@use '../../tools/breakpoint';
@use '../../tools/reset';
@use '../../tools/typography';
@use 'theme';

.Tabs {
    display: flex;
    flex: none;
    gap: var(--tabs-gap);
    align-items: center;
    justify-content: center;
    list-style: none;

    // stylelint-disable-next-line custom-property-no-missing-var-function
    $property-name: --tabs-spacing;
    $fallback: theme.$spacing-fallback;

    @each $breakpoint-name, $breakpoint-value in theme.$breakpoints {
        @if $breakpoint-value > 0 {
            // stylelint-disable-next-line custom-property-no-missing-var-function
            $property-name: --tabs-spacing-#{$breakpoint-name};
        }

        @include breakpoint.up($breakpoint-value) {
            --tabs-gap: var(#{$property-name}, #{$fallback});
        }

        $fallback: var(#{$property-name}, #{$fallback});
    }
}

// stylelint-disable-next-line selector-max-universal -- Let's be bold and reset spacing for all direct descendants regardless of their type to avoid inheritance of spacing for nested Tabs.
.Tabs > * {
    @each $breakpoint-name, $breakpoint-value in theme.$breakpoints {
        @if $breakpoint-value > 0 {
            --tabs-spacing-#{$breakpoint-name}: initial;
        } @else {
            --tabs-spacing: initial;
        }
    }
}

.Tabs__item {
    padding-inline: theme.$item-padding-x;
}

.Tabs__link {
    @include reset.button();
    @include typography.generate(theme.$item-typography);

    padding-block: theme.$link-padding-y;
    color: theme.$link-color-state-default;

    @media (hover: hover) {
        &:hover {
            text-decoration: none;
            color: theme.$link-color-state-hover;
        }
    }

    &:active {
        text-decoration: none;
        color: theme.$link-color-state-active;
    }
}

.Tabs__link.is-selected {
    position: relative;
    color: theme.$link-color-state-selected;

    &::after {
        content: '';
        position: absolute;
        bottom: 0;
        height: 2px;
        border-radius: theme.$item-selected-underline-border-radius;
        background: currentcolor;
        inset-inline: 0;
    }
}
