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

@layer jokul.components {
    .jkl-toast-region {
        z-index: jkl.$z-index--floating;
        background: transparent;
        display: flex;
        justify-content: center;
        position: fixed;
        bottom: var(--jkl-unit-30);
        right: 0;
        left: 0;
        width: 100%;
        pointer-events: none;

        &__toasts {
            min-width: 18rem;
            pointer-events: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--jkl-unit-20);
        }

        &--left {
            justify-content: flex-start;
            left: var(--jkl-unit-30);
        }
    }

    .jkl-toast {
        --background-color: var(--jkl-color-background-container-high);
        --text-color: var(--jkl-color-text-default);
        --jkl-toast-padding: var(--jkl-unit-20);

        color: var(--text-color);
        background-color: var(--background-color);
        border-radius: 4px;
        box-sizing: border-box;
        align-items: start;
        overflow: hidden;
        width: clamp(15em, 100%, min(30rem, 85vw));
        padding: var(--jkl-toast-padding);
        position: relative;

        @include jkl.text-style("paragraph-medium");

        &__progress {
            --bar-color: var(--text-color);
            --track-color: transparent;

            border-radius: 0;
            position: absolute;
            inset: 0 0 auto;
        }

        &__icon {
            @include jkl.forced-colors-svg-fallback($stroke: CanvasText);

            .jkl-toast:not(:has(.jkl-toast__title)) & {
                margin-block-start: jkl.rem(1px);
            }

            .jkl-toast:has(.jkl-toast__title) & {
                margin-block-start: 0;
            }
        }

        &__content {
            flex-grow: 1;
            flex-basis: 100vw;
        }

        &__action {
            margin-top: var(--jkl-unit-15);
        }

        &__title {
            @include jkl.text-style("heading-5");
        }

        &__dismiss-button {
            background-color: transparent;
            padding: 0;
            cursor: pointer;

            color: inherit;

            @include jkl.forced-colors-svg-fallback($stroke: ButtonText);

            @include jkl.forced-colors-mode {
                background-color: ButtonFace;
            }

            // Sørg for å ha en stor nok touch target.
            &::after {
                --tap-size: 44px;
                content: "";
                position: absolute;
                inset: calc((var(--tap-size) - 100%) / 2 * -1);
            }
        }

        &--info,
        &--warning,
        &--error,
        &--success {
            --text-color: var(--jkl-color-text-on-alert);
        }

        &--info {
            --background-color: var(--jkl-color-background-alert-info);
        }

        &--warning {
            --background-color: var(--jkl-color-background-alert-warning);
        }

        &--error {
            --background-color: var(--jkl-color-background-alert-error);
        }

        &--success {
            --background-color: var(--jkl-color-background-alert-success);
        }

        @include jkl.forced-colors-mode {
            border: 2px solid CanvasText;

            &--info {
                border-style: dotted;
            }

            &--warning {
                border-style: dashed;
            }

            &--error {
                border-style: double;
                border-width: 4px;
            }
        }
    }

    $_entering: jkl-entering-#{string.unique-id()};
    $_exiting: jkl-exiting-#{string.unique-id()};

    .jkl-toast[data-animation="entering"],
    .jkl-toast[data-animation="queued"] {
        animation: $_entering jkl.timing("polite") jkl.easing("entrance")
            forwards;
    }

    .jkl-toast[data-animation="exiting"] {
        animation: $_exiting jkl.timing("productive") jkl.easing("exit")
            forwards;
    }

    @keyframes #{$_entering} {
        from {
            opacity: 0;
            transform: translate3d(0, 50%, 0);
        }

        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    @keyframes #{$_exiting} {
        from {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }

        to {
            opacity: 0;
            transform: translate3d(0, 50%, 0);
        }
    }
}