/*#tabs Plugin!#*/

.tabs {
    &__nav {
        ul {
            scroll-snap-type: x mandatory;
            &::-webkit-scrollbar { display: none; }//Chrome, Safari, Opera
            -ms-overflow-style: none;  // IE and Edge 
            scrollbar-width: none;  // Firefox 
            width: 100%;
            display: flex;
            list-style: none;
            margin-bottom: 1em;
            padding: 0;
            width: 100%;
            overflow: auto;
            position: relative;
        }

        li {
            display: block;
            list-style: inherit;
            text-align: center;
            transition: 100ms all ease-out;
            z-index: 300;
            padding-right: 2em;   
        }
        
        a, button {
            transition: 120ms all ease-in-out;
            padding: 0.5em;
            display: inline-block;
            text-decoration: none;
            line-height: 1.25;
            position: relative;
            z-index: 100;
            border-bottom: 0.1875rem solid transparent;

            outline-offset: -0.125rem;
        }

        &-li--active {
            a, button {
                border-bottom-color: currentColor;
                color: #2c3142;
            }
        }
    }

    &__body {
        position: relative;
    }

      
    &__panel {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        display: block; //overrides the hidden attribute which displays as none
    
        transition: opacity 250ms ease-in-out;
        opacity: 0;
    
        &--closing,
        &--opening,
        &--open {
            position: relative;
            width: auto;
            height: auto;
            clip: auto;
            opacity: 1;
        }


        &--closing {
            inset: 0;
            position: absolute;
            opacity: 0;
        }
    }
}