$tabHeaderAnimationSpeed: 0.2s;
$tabContentAnimationSpeed: 0.2s;

@keyframes tabChange {
    0% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

.tabs-header {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    column-gap: 10px;
    width: 100%;
    min-height: 50px;
    user-select: none;
    margin: 0 0 var(--baseSpacing);
    border-bottom: 1px solid var(--baseAlt2Color);
    .tab-item {
        position: relative;
        outline: 0;
        border: 0;
        background: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 70px;
        gap: 5px;
        padding: 10px 10px;
        margin: 0;
        font-size: var(--lgFontSize);
        line-height: var(--baseLineHeight);
        font-family: var(--baseFontFamily);
        color: var(--txtHintColor);
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        border-top-left-radius: var(--baseRadius);
        border-top-right-radius: var(--baseRadius);
        transition: color var(--baseAnimationSpeed),
                    background var(--baseAnimationSpeed);
        &:after { // active border
            content: "";
            position: absolute;
            display: block;
            left: 0;
            bottom: -1px;
            width: 100%;
            height: 2px;
            border-top-left-radius: var(--baseRadius);
            border-top-right-radius: var(--baseRadius);
            background: var(--primaryColor);
            transform: rotateY(90deg);
            transition: transform $tabHeaderAnimationSpeed;
        }
        .txt, i {
            display: inline-block;
            vertical-align: top;
        }
        &:hover,
        &:focus-visible,
        &:active {
            color: var(--txtPrimaryColor);
        }
        &:focus-visible,
        &:active {
            transition-duration: var(--activeAnimationSpeed);
            background: var(--baseAlt2Color);
        }
        &.active {
            color: var(--txtPrimaryColor);
            &:after {
                transform: rotateY(0deg);
            }
        }
        &.disabled {
            pointer-events: none;
            color: var(--txtDisabledColor);
            &:after {
                display: none;
            }
        }
    }
    &.right {
        justify-content: flex-end;
    }
    &.center {
        justify-content: center;
    }
    &.stretched {
        .tab-item {
            flex-grow: 1;
            flex-basis: 0;
        }
    }
    &.compact {
        min-height: 30px;
        margin-bottom: var(--smSpacing);
    }
}

.tabs-content {
    @extend %block;
    position: relative;
    > .tab-item {
        width: 100%;
        display: none;
        &.active {
            display: block;
            opacity: 0;
            animation: tabChange $tabContentAnimationSpeed forwards;
        }
        & > :first-child {
            margin-top: 0;
        }
        & > :last-child {
            margin-bottom: 0;
        }
    }
}

.tabs {
    @extend %block;
    position: relative;
}