@charset "UTF-8";
@use "../../core/jkl";

@layer jokul.components {
    .jkl-tabs {
        width: 100%;
    }

    .jkl-tablist {
        --padding-inline-end: var(--jkl-unit-50);
        --text-color: var(--jkl-color-text-interactive);
        --line-color: var(--jkl-color-border-separator);
        --indicator-color: var(--jkl-color-border-separator-hover);

        scroll-snap-type: x proximity;
        overflow: scroll hidden;
        scrollbar-width: none;
        position: relative;
        display: inline-flex;
        flex-direction: row;
        padding: 0;
        margin: 0;
        border-bottom: 1px solid var(--line-color);
        width: fit-content;
        max-width: 100%;

        @include jkl.forced-colors-mode {
            border-color: GrayText;
        }

        &::-webkit-scrollbar {
            display: none;
        }

        @supports (position-anchor: --active-tab) {
            &::after {
                content: "";
                position: absolute;
                position-anchor: --active-tab;
                height: 2px;
                width: calc(anchor-size(inline) - var(--padding-inline-end));
                inset-block-start: calc(anchor(end) - 2px);
                inset-inline-start: calc(anchor(--active-tab start));
                background-color: var(--indicator-color);

                @include jkl.motion("standard", "lazy");
            }
        }
    }

    .jkl-tab {
        --padding-inline-end: var(--jkl-unit-50);

        @include jkl.text-style("text-medium");
        color: var(--text-color);
        padding: var(--jkl-unit-10) var(--padding-inline-end) var(--jkl-unit-10)
            var(--jkl-unit-05);
        border: none;
        background-color: transparent;
        cursor: pointer;
        position: relative;
        scroll-margin-inline-start: var(--jkl-unit-20);
        scroll-snap-align: start;
        text-decoration: none;
        white-space: nowrap;

        @include jkl.reset-outline;

        &:hover {
            --text-color: var(--jkl-color-text-interactive-hover);
        }

        &:focus-visible {
            @include jkl.focus-outline($offset: -2px);
        }

        &[aria-selected="true"] {
            anchor-name: --active-tab;

            @include jkl.no-grow-bold;

            @supports not (position-anchor: --active-tab) {
                position: relative;

                &::after {
                    content: "";
                    position: absolute;
                    height: 2px;
                    width: calc(100% - var(--padding-inline-end));
                    inset-block-end: 0;
                    inset-inline-start: 0;
                    background-color: var(--indicator-color);

                    @include jkl.motion("standard", "lazy");
                }
            }
        }
    }
}