//----------------------------------*\
// TOGGLABLE TABS
//----------------------------------*/
.tablist {}

.tablist__item {
    display:block;
    float:left;
    width:50%;
}

.tabpanel__tab {
    border-style:solid;
    border-width:0 0 1px;
    display:block;
    line-height:1;
    margin:0 0 0 ($_space / 3);
    padding:0 $_space .5em 0;
    position:relative;
    text-decoration:none;

    @include large-xlarge-screen {
        margin:0 0 0 $_space;
    }

    &[aria-expanded="true"] {
        border-width:0 0 3px;
        color:$_color_omega;
    }

    :first-child > & {margin:0;}

    &:after {
        bottom:em($_base_font_size);
        content:attr(data-problems);
        display:inline-block;
        font-size:em(10, $_base_font_size);
        position:absolute;
        right:0;
    }
}

.tab-content {
    clear:both;
    padding:$_space 0 $_space_narrow;

    > .tab-pane {
        display:none;
        visibility:hidden;
    }

    > .active {
        display:block;
        visibility:visible;
    }
}