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

$_blink-animation-name: jkl-blink-#{string.unique-id()};

@layer jokul.components {
    @property --jkl-skeleton-sweeper-position {
        syntax: "<percentage>";
        initial-value: 0%;
        inherits: true;
    }

    .jkl-skeleton-animation {
        --jkl-skeleton-element-color: var(--jkl-color-background-container-low);
        --jkl-skeleton-sweep-duration: 4500ms;
        --jkl-skeleton-sweeper-width: 40%;

        mask-image: linear-gradient(to right, #000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)), transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width) / 2), #000 var(--jkl-skeleton-sweeper-position));
        mask-size: 100dvi 100dvb;
        mask-position: center;
        animation: var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep;
    }

    .jkl-skeleton-element {
        border-radius: jkl.rem(2px);
        background-color: var(--jkl-skeleton-element-color);

        &--circle {
            border-radius: 50%;
        }

        @include jkl.forced-colors-mode {
            border: 1px solid CanvasText;
            // Vi kan ikke bruke "gradient-trikset" for å skape den samme effekten,
            // så vi må tenke annerledes. Bruk gjennomsiktighet for å indikere at
            // noe skjer.
            animation: 2s ease infinite $_blink-animation-name;
        }
    }

    .jkl-skeleton-input {
        display: flex;
        flex-direction: column;
        gap: var(--jkl-spacing-12);

        &__checkbox {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: var(--jkl-spacing-8);
        }

        @include jkl.small-device {
            gap: var(--jkl-spacing-8);
        }

        &--compact::after {
            gap: var(--jkl-spacing-8);
        }
    }

    .jkl-skeleton-table {
        display: flex;
        flex-direction: column;

        &__header,
        &__row {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            border-bottom: solid 1px var(--jkl-skeleton-element-color);
        }

        &__header {
            padding: var(--jkl-unit-20) var(--jkl-unit-10);
        }

        &__row {
            padding: var(--jkl-unit-20) var(--jkl-unit-10);
        }

        @include jkl.small-device {
            &__header {
                padding: var(--jkl-unit-10) var(--jkl-unit-05);
            }

            &__row {
                padding: var(--jkl-unit-20) var(--jkl-unit-05);
            }
        }

        @include jkl.forced-colors-mode {
            // Vi kan ikke bruke "gradient-trikset" for å skape den samme effekten,
            // så vi må tenke annerledes. Bruk gjennomsiktighet for å indikere at
            // noe skjer.
            animation: 2s ease-in-out infinite $_blink-animation-name;
        }
    }

    @keyframes #{$_blink-animation-name} {
        0% {
            opacity: 1;
        }

        40%,
        50% {
            opacity: 0.3;
        }

        70%,
        100% {
            opacity: 1;
        }
    }

    @keyframes --jkl-skeleton-sweep {
        0%,
        67% {
            --jkl-skeleton-sweeper-position: 0%;
        }

        100% {
            --jkl-skeleton-sweeper-position: calc(100% + var(--jkl-skeleton-sweeper-width));
        }
    }
}