@use "../../core/jkl";

@layer jokul.components {
    @include jkl.light-mode-variables {
        --jkl-table-head-sticky-color: var(--jkl-background-color);
    }

    @include jkl.dark-mode-variables {
        --jkl-table-head-sticky-color: var(--jkl-background-color);
    }

    $_border-size: jkl.rem(-1px);

    .jkl-table-head {
        &--sr-only {
            @include jkl.screenreader-only;
        }

        &--sticky {
            & > .jkl-table-row {
                position: sticky;
                top: var(--jkl-table-head-sticky-offset, 0);
                z-index: 1;
                background-color: var(--jkl-table-head-sticky-color);

                border-bottom: none;

                box-shadow: inset 0 0 0 #000,
                    inset 0 $_border-size 0 var(--jkl-color-border-separator-strong);
                background-clip: padding-box;

                // legg til litt (nesten-cirka 16px) over headingen
                vertical-align: bottom;
                height: 2.3em;
            }
        }
    }
}