.tab-nav{
    @include row();
    padding:0;
    background:$color-grey-4;

    li{
        list-style-type:none;
        width:33%;
        float:left;
        padding:0;
        position:relative;
        margin-right:1px;
    }
    a{
        @include transition(border-color 0.2s ease);
        background-color:lighten($color-teal-darker, 3%);
        outline:none;
        text-transform:uppercase;
        font-weight:700;
        font-size:1.2em;
        text-decoration:none;
        display:block;
        padding:0.7em;
        color:white;
        border-top:0.3em solid lighten($color-teal-darker, 3%);
        max-height:1.2em;
        overflow:hidden;

        &:hover{
            color:white;
            border-top-color:$color-teal-dark;
        }
    }

    a.errors{
        &:after{
            @include border-radius(50px);
            @include box-shadow(1px 2px 2px rgba(0, 0, 0, 0.1));
            position:absolute;
            right:-0.5em;
            top:-0.5em;
            z-index:5;
            min-width:0.9em;
            color:white;
            background:$color-red;
            content:attr(data-count);
            padding:0 0.3em;
            line-height:1.4em;
            text-align:center;
            font-size:0.8em;
        }
    }

    li.active a{
        @include box-shadow(none);
        color:$color-grey-1;
        background-color:white;
        border-top:0.3em solid $color-grey-1;
    }

    li.settings a{
        &:before{
            font-family:wagtail;
            vertical-align:middle;
            text-transform:none;
            content:"w";
            margin-right:0.5em;
            font-size:1.2em;
        }
    }

    /* For cases where tab-nav should merge with header */
    &.merged{
        margin-top:0;
        background-color:$color-header-bg;
    }
}
.tab-content{
    section{
        display:none;
        padding-top:1em;

        &.active{
            display:block;
        }
    }
}

@media screen and (min-width: $breakpoint-mobile){
    .tab-nav{
        /* For cases where tab-nav should merge with header */
        &.merged{
            background-color:$color-header-bg;
        }

        li{
            width:auto;
            padding:0;
            margin-left:0.7em;
        }

        a{
            padding-left:$desktop-nice-padding - 10;
            padding-right:$desktop-nice-padding - 10;
        }

        li.settings a{
            padding-left:2em;
            padding-right:2em;
        }
    }

    .modal-content .tab-nav li{
        padding:0;
        min-width:0;
    }
}