// TABS
.tabs{

}
.tabs__nav{
    // reset list style
    margin: 0;
    padding: 0;
    list-style: none;

    display: flex;
    flex-wrap: wrap;
    // margin-bottom: 1.5rem;
    font-family: $font-family--heading;
    font-weight: 700;

    li{
        flex: 1;
        @include block-selection;
        cursor: pointer;
        padding: 0.75rem;
        text-align: center;
        background: $grey--light;
    }
    li.current{
        pointer-events: none;
        color: white;
        background: $main;
    }

    @include desktop{

        li{
            @include transition;
        }
        li:hover{
            color: white;
            background: lighten($main, 10%);
        }
    }
}
.tabs__content{
    // reset list style
    margin: 0;
    padding: 0;
    list-style: none;

    li{
        display: flex;
        padding: 0.75rem;
        padding-bottom: calc(0.75rem - 1px);
        border-bottom: 1px solid $grey--light;
    }
    // date
    span:nth-of-type(1){
        flex-grow: 0;
        flex-shrink: 0;
        width: 7.5rem;
        padding-left: 1.5rem;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        line-height: $font-leading;
        color: $main;
        background-image: url('../icons/icon-tab__date.svg');
        background-size: 1rem 1rem;
        background-position: top 0.25rem left;
        background-repeat: no-repeat;
    }
    // title
    span:nth-of-type(2){
        font-weight: 700;
        line-height: $font-leading;
    }

    @include desktop{

        li{
            @include transition(background);
        }
        li:hover{
            background: $grey--light;
        }
    }
}