.tabs__horz--container, .tabs__vert--container{
    background: $white;
}

.tabs__horz--buttons, .tabs__vert--buttons{
    display: flex;
    flex-wrap: wrap;
}

.tab__button{
    padding: 0 25px;
    cursor: pointer;
    border-bottom: 5px solid $white;
    transition: all .1s;
    text-align: center;

    @include media($mobile){
        width: calc(100% - 50px);
    }

    &:hover{
        border-color: $accentblue;
        color: $accentblue;
    }

    &.active{
        border-color: $blue;
        color: $blue;
    }

    &.disabled{
        color: color(grey, '4');
        pointer-events: none;
    }
}

.tab__content{
    display: none;
    padding: 5px 25px;

    &.active{
        display: block;
    }
}

.tabs__vert--container{
    display: flex;

    @include media($mobile){
        flex-direction: column;
    }
}

.tabs__vert--buttons{
    width: 150px;
}

.tabs__vert--content{
    width: calc( 100% - 150px );
}

.tabs__vert--buttons, .tabs__vert--content{
    @include media($mobile){
        width: 100%;
    }
}