/*==============================================================================
 Tabs

 Tabs

 Markup:
 <div class="b-tabs">
     <ul class="b-tabs__nav b-list--reset">
         <li>
           <a href="#tab1"> Tab1 </a>
         </li>
         <li>
           <a href="#tab2"> Tab2 </a>
         </li>
         <li>
           <a href="#tab3"> Tab3 </a>
         </li>
     </ul>
    <div class="b-tabs__panels">
         <div class="b-tabs__panel" id="tab1">
           Panel 1
         </div>
         <div class="b-tabs__panel" id="tab2">
           Panel 2
         </div>
         <div class="b-tabs__panel" id="tab3">
           Panel 3
         </div>
    </div>
 </div>

 #{$namespace}tabs
 ==============================================================================*/



#{$namespace}tabs {
    position: relative;
    overflow: hidden;
    @include rem(margin-bottom, $verticalspace);
}



#{$namespace}tabs__nav {
    display: table;
    width: 100%;

    > :last-child,
    > :last-child > :last-child {
        margin-bottom: 0;
    }

    li{
        display: table-cell;
    }

    a{
        display: block;
        padding: .5em 1em;
        color: $color-text;
        text-decoration: none;
        transition: all .2s ease-in-out;

        &.is-active,
        &:hover {
            background-color: $theme-grey--medium;
        }
    }
}



#{$namespace}tabs__panels {
    position: relative;
}



#{$namespace}tabs__panel {
    padding: 1em;
    background-color: $theme-grey;
    color: $color-text;

    > :last-child,
    > :last-child > :last-child {
        margin-bottom: 0;
    }

    .js & { // Filtering Old Browsers
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        visibility: hidden;
        transition: visibility .2s ease-in-out;

        &.is-active {
            position: static;
            visibility: visible;
        }
    }
}