@mixin tab-active($style: tabs) {
    color: var(--ec-tab-color-active, var(--ec-color-interactive));

    @if $style == tabs {
        border-color: var(--ec-tab-border-color-active, var(--ec-border-color-focus));
    } @else {
        background-color: var(--ec-tab-background-color-active, var(--ec-background-color));
    }
}

@mixin tab($style: tabs) {
    $height: 2rem;

    @if $style == 'pills' {
        $height: 1.75rem;
        padding-left: .5rem;
        padding-right: .5rem;
        border-radius: var(--ec-border-radius);
        border: 1px solid var(--ec-tab-border-color, var(--ec-border-color));

    } @else {
        padding-left: 0;
        padding-right: 0;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
    }

    align-items: center;
    color: var(--ec-tab-color, var(--ec-color-secondary-dark));
    cursor: pointer;
    font-size: var(--ec-tab-font-size, var(--ec-font-size-label));
    display: flex;
    height: $height;
    min-width: $height;
    
    justify-content: center;

    &.active {
        @include tab-active($style);
    }

    &:hover,
    &:focus {
        // Override the default browser focus ring
        outline: none;

        @if $style == 'pills' {
            border-color: var(--ec-tab-border-color-active, var(--ec-border-color-focus));
            box-shadow: 0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));
            position: relative;
            z-index: 1;
        } @else {
            border-color: var(--ec-tab-border-color-active, var(--ec-border-color-focus));
        }
    }

    &.is-disabled {
        opacity: var(--ec-form-control-opacity-disabled);
        cursor: default;
        pointer-events: none;
    }
}

@mixin tab-icon-only {
    padding: 0;
    justify-content: center;

    .ec-icon {
        color: inherit;
    }
}

@mixin tab-item($style: tabs) {
    display: block;
    min-width: 0;

    &:not(:last-child) {
        @if $style == tabs {
            margin-right: 1rem;
        }
    }

    @if $style == pills {
        &:not(:first-child) {
            margin-left: -1px;
        }
        
        .tab {
            border-radius: 0;
        }

        &:first-child .tab {
            border-top-left-radius: var(--ec-border-radius);
            border-bottom-left-radius: var(--ec-border-radius);
        }

        &:last-child .tab {
            border-top-right-radius: var(--ec-border-radius);
            border-bottom-right-radius: var(--ec-border-radius);
        }
    }
}

@mixin tabbar($style: tabs) {
    display: flex;

    @if $style == tabs {
        border-bottom: 1px solid var(--ec-tab-border-color, var(--ec-border-color));
    }
}
