@tabs-header-border-bottom: 2px;
@tabs-header-padding: 0.5em 0;
@tabs-header-margin: 0 1em -1px;
@tabs-ink-bar-transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
@tabs-content-padding: 1em;
@tabs-splitline-width: 1px;
@tabs-splitline-left: 1em;

.@{prefix}-tabs {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    cursor: pointer;

    .@{prefix}-tab-header {
        border-bottom: @tabs-header-border-bottom solid transparent;
        padding: @tabs-header-padding;
        margin: @tabs-header-margin;
        color: @text-color-dark;
        text-decoration: none;
        cursor: pointer;
        transform: translateX(-1em);

        &.disabled {
            border-color: transparent;
            color: @text-color-light;
            cursor: default;

            &:hover {
                border-color: transparent;
            }
        }
    }

    .@{prefix}-ink-bar {
        position: absolute;
        left: 0;
        bottom: 0;
        height: @tabs-header-border-bottom;
        background-color: @text-color-dark;
        transition: @tabs-ink-bar-transition;
        transform: translateX(-1em);
    }
}

.@{prefix}-tab-content {
    display: none;

    &.active {
        display: block;
    }
}

// --- tabs size, can be use 'default' | 'large' ---
.@{prefix}-tabs-defalt {
    .@{prefix}-tab-header {
        font-size: @font-size-base;
    }
}

.@{prefix}-tabs-large {
    .@{prefix}-tab-header {
        font-size: @font-size-large;
    }
}

// --- tabs variants, can be use 'underline' | 'splitline' ---
.@{prefix}-tabs-underline {
    border-bottom: 1px solid @split-lint-color;
}

.@{prefix}-tabs-splitline {
    .@{prefix}-tab-header {

        &::after {
            content: '|';
            position: relative;
            left: @tabs-splitline-left;
            width: @tabs-splitline-width;
            height: 0;
            color: @split-lint-color;
            clear: both;
        }
    }
}