@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;
@use '@carbon/styles/scss/components/tabs';

@mixin msk-tabs-focus {
    &:not(.msk-tabs--tab-label-only):focus {
        box-shadow: inset 0 0 0 0.125rem c.$msk--black-100,
            inset 0 0 0 calc(0.125rem + 2px) c.$msk--white-0;
        outline: none;
    }
}

@mixin msk-tabs {
    @include tabs.tabs;

    // // link
    // .#{$prefix}--tabs__nav-link {
    //     color: $text-secondary;
    //   }

    .#{$prefix}--tabs {
        --#{$prefix}-border-interactive: #{tk.$msk--color-border-selected};
        --#{$prefix}-text-primary: #{tk.$msk--color-content-action};
        --#{$prefix}-text-secondary: #{tk.$msk--color-content-action};

        // line underneath entire tab
        .#{$prefix}--tab--list {
            position: relative;
        }

        // same spacing for all tabs
        .#{$prefix}--tabs__nav-item {
            border-bottom: 1px solid var(--#{$prefix}-border-interactive);
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
            border-top: 3px solid transparent;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        // top border for selected tab
        .#{$prefix}--tabs__nav-item--selected {
            border-bottom-color: transparent;
            border-left-color: var(--#{$prefix}-border-interactive);
            border-right-color: var(--#{$prefix}-border-interactive);
            border-top-color: var(--#{$prefix}-border-interactive);
            position: relative;

            &:focus {
                &::after {
                    height: 0;
                }
            }
        }

        .#{$prefix}--tabs__nav-link {
            --#{$prefix}-focus: #{tk.$msk--color-border-focus-outer};

            // focus state
            @include msk-tabs-focus;

            // tab label only
            &.msk-tabs--tab-label-only {
                outline: none;
                cursor: text;
                color: tk.$msk--color-content-disabled;
                border-bottom: 1px solid tk.$msk--color-border-disabled;
            }
        }

        // disabled state
        .#{$prefix}--tabs__nav-item--disabled,
        .#{$prefix}--tabs__nav-item--disabled:hover {
            --#{$prefix}-text-disabled: #{tk.$msk--color-content-disabled};

            background-color: tk.$msk--color-bg-disabled;
            border-bottom-color: tk.$msk--color-border-disabled;
        }

        // contained list
        &.#{$prefix}--tabs--contained {
            .#{$prefix}--tabs__nav-item {
                --#{$prefix}-layer-accent: #{c.$msk--white-0};

                + .#{$prefix}--tabs__nav-item {
                    --#{$prefix}-border-strong: transparent;
                }
            }

            .#{$prefix}--tabs__nav-item--selected {
                --#{$prefix}-layer: transparent;
            }
        }

        //-----------------------------
        // Item Hover
        //-----------------------------
        &:not(.#{$prefix}--tabs--contained)
            .#{$prefix}--tabs__nav-item:not(
                .#{$prefix}--tabs__nav-item--selected
            ):not(.#{$prefix}--tabs__nav-item--disabled):not(
                .msk-tabs--tab-label-only
            ):hover {
            border-block-end: 1px solid var(--#{$prefix}-border-interactive);
            background-color: tk.$msk--color-bg-action-hover;
        }

        &:not(.#{$prefix}--tabs--contained)
            .#{$prefix}--tabs__nav-item:not(
                .#{$prefix}--tabs__nav-item--selected
            ):not(
                .#{$prefix}--tabs__nav-item--disabled
            ).msk-tabs--tab-label-only:hover {
            border-block-end: 1px solid tk.$msk--color-border-disabled;
            color: tk.$msk--color-content-disabled;
        }

        .#{$prefix}--tabs__nav-item + .#{$prefix}--tabs__nav-item {
            margin-inline-start: 0;
        }
        //---------------------------
        // Tab Active
        //---------------------------
        .#{$prefix}--tabs__nav-link.msk-tabs--tab-label-only:active {
            outline: none;
        }
    }

    /* ----- tab content ----- */
    // content focus state
    .#{$prefix}--tab-content {
        @include msk-tabs-focus;
    }
}