@import '../shared-styles/index';

:host {
    display: flex;
    align-items: flex-end;
    justify-content: center;

    &.is-expert {
        justify-content: flex-start;
        border-bottom-width: nx-border-size(xs);
        border-bottom-style: solid;
        border-bottom-color: v(tab-expert-bottom-border-color);

        .nx-tab-nav-bar {
            width: 100%;
        }
    }

    .nx-tab-nav-bar {
        display: flex;
        position: relative;
        overflow-x: scroll;
        outline: none;
        -ms-overflow-style: none; // hide scrollbar on IE
        scrollbar-width: none; // hide scrollbar on firefox

        // hide scrollbar on chrome, edge, safari
        &::-webkit-scrollbar {
            display: none;
        }
    }

    &.at-start {
        .nx-tab-nav-bar {
            margin-left: -8px;
            padding-left: 8px;

            [dir='rtl'] & {
                margin-left: 0;
                padding-left: 0;
                margin-right: -8px;
                padding-right: 8px;
            }
        }
    }

    &:not(.scrollable) {
        .nx-tab-nav-bar {
            margin-right: -8px;
            padding-right: 8px;

            [dir='rtl'] & {
                margin-right: 0;
                padding-right: 0;
                margin-left: -8px;
                padding-left: 8px;
            }
        }
    }
}

:host ::ng-deep a.nx-tab-link {
    @include tab__item;
    white-space: nowrap;
}

:host ::ng-deep a.nx-tab-link.is-active {
    @include tab__item--active;
}

:host:not(.is-expert) ::ng-deep {
    a.nx-tab-link:not(.is-active)::before {
        content: '';
        position: absolute;
        width: calc(100% + 64px);
        height: 1px;
        background-color: v(tab-item-border-color);
        bottom: 0;
        left: -32px;
    }

    a.nx-tab-link:first-child::before {
        left: 0px;
        width: calc(100% + 32px);

        [dir='rtl'] & {
            left: initial;
            right: 0;
        }
    }

    a.nx-tab-link:last-child::before {
        width: calc(100% + 32px);

        [dir='rtl'] & {
            left: initial;
            right: -32px;
        }
    }
}

:host ::ng-deep {
    a.nx-tab-link:first-child {
        margin-left: 0;

        [dir='rtl'] & {
            margin-right: 0;
            margin-left: nx-spacer(s);
        }
    }

    a.nx-tab-link:last-child {
        margin-right: 0;

        [dir='rtl'] & {
            margin-right: nx-spacer(s);
            margin-left: 0;
        }
    }
}

:host.is-expert ::ng-deep {
    a.nx-tab-link {
        padding: 4px 0;
    }

    a.nx-tab-link.is-disabled:not(.is-active) {
        border-bottom-color: transparent;
        color: v(tab-expert-item-disabled-color);
    }
}

:host.is-expert:not(.is-negative) ::ng-deep {
    a.nx-tab-link:not(.is-disabled):not(.is-active) {
        color: v(tab-expert-color);

        @media screen and (forced-colors: active) {
            color: buttonText;
        }
    }

    a.nx-tab-link.is-active {
        border-color: v(tab-item-active-border-color);
    }
}

:host(.is-negative) {
    color: v(negative);

    ::ng-deep a.nx-tab-link {
        color: v(negative);
        border-bottom-color: v(negative);
    }

    ::ng-deep a.nx-tab-link.is-disabled {
        color: v(tab-item-disabled-negative-color);
        border-color: v(tab-item-disabled-negative-color);
    }

    @media screen and (forced-colors: active) {
        ::ng-deep a.nx-tab-link.is-active {
            background-color: highlight;
            color: highlightText;
            border-color: windowFrame;
            forced-color-adjust: none;
        }
    }
}

:host.is-expert.is-negative {
    ::ng-deep a.nx-tab-link:not(.is-active) {
        border-bottom-color: transparent;
    }
}

:host ::ng-deep a.nx-tab-link.is-disabled {
    @include tab__item--disabled;
}

:host(.is-disabled) {
    cursor: not-allowed;
}

:host(.is-disabled.is-negative) {
    ::ng-deep a.nx-tab-link {
        color: v(tab-item-disabled-negative-color);
        border-color: v(tab-item-disabled-negative-color);
    }
}

// Focus Styles
// not:(.is-disabled) is needed because if you click on a disabled link and then press an arrow key the disabled tab gets focused.
:host ::ng-deep .nx-tab-link:not(.is-disabled).cdk-keyboard-focused {
    &::after {
        content: '';
        display: block;
        position: absolute;
        height: v(tab-item-line-height);
        width: 100%;
        top: 4px;

        @include focus-style;
        border-radius: nx-border-radius(s);
    }
}

@media screen and (forced-colors: active) {
    :host(.is-negative) {
        color: buttonText;

        ::ng-deep a.nx-tab-link {
            color: buttonText;
            border-bottom-color: buttonText;
        }

        ::ng-deep a.nx-tab-link.is-active {
            background-color: highlight;
            color: highlight;
            border-color: highlight;
        }

        ::ng-deep a.nx-tab-link.is-disabled {
            color: GrayText;
            border-bottom-color: GrayText;
        }
    }
}
