@import 'nav-control-base';

$tab-border-width: 1px;
$tab-border-color: $ec-border-color;
$tab-color: $font-color-label;
$tab-color-active: $gray-7;
$tab-color-hover: $gray-7;
$tab-bg-active: $ec-color-bg-body;

$tab-pill-bg-active: #d2d7d9;

@mixin tab-active($style: tabs) {
    color: $tab-color-active;

    @if $style == tabs {
        background-color: $tab-bg-active;
        border-top-color: $tab-border-color;
        border-left-color: $tab-border-color;
        border-right-color: $tab-border-color;
    } @else {
        background-color: $tab-pill-bg-active;
    }
}

@mixin tab($style: tabs) {
    $height: rem-calc(32px);

    @if $style == 'pills' {
        $height: rem-calc(24px);
    }

    align-items: center;
    border: $tab-border-width solid transparent;
    border-radius: $ec-border-radius;
    color: $tab-color;
    cursor: pointer;
    font-size: $ec-font-size-label;
    display: flex;
    height: $height;
    min-width: $height;
    padding-left: rem-calc(8px);
    padding-right: rem-calc(8px);

    @if $style == tabs {
        border: $tab-border-width solid transparent;
        margin-bottom: -($tab-border-width);
    }

    &:hover {
        color: $tab-color-hover;
    }

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

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

        &:not(.active):not(.is-disabled) {
            @include nav-focus(true);
            // We use a box shadow to make the focus ring thicker on buttons and inputs.
            // we don't want the same thickness for tabs so we will override the box-shadow
            box-shadow: none;
        }
    }

    &.is-disabled {
        color: $ec-color-text-hint-dark;
        cursor: default;
    }
}

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

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

    &:not(:last-child) {
        margin-right: rem-calc(4px);
    }
}

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

    @if $style == tabs {
        border-bottom: $tab-border-width solid $tab-border-color;
        padding-left: rem-calc(16px);
        padding-right: rem-calc(16px);
    }
}
