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

$_dismiss-animation-name: jkl-dismiss-#{string.unique-id()};
$_dismiss-animation-duration: jkl.timing("lazy");

@layer jokul.components {
    .jkl-system-message {
        --jkl-system-message-content-padding: var(--jkl-unit-30);
        --jkl-system-message-dismiss-button-size: var(--jkl-unit-40);
        --jkl-system-message-dismiss-button-margin: -#{jkl.rem(
                6.5px
            )} -#{jkl.rem(18px)} -#{jkl.rem(6.5px)}
            auto;
        --jkl-system-message-message-margin: 0 var(--jkl-spacing-20);
        --background-color: var(--jkl-color-background-alert-neutral);
        --text-color: var(--jkl-color-text-on-alert);

        width: 100%;
        background-color: var(--background-color);
        color: var(--text-color);
        transition-behavior: allow-discrete;
        box-sizing: border-box;

        &__content {
            @include jkl.text-style("text-medium");
            box-sizing: border-box;
            padding: var(--jkl-system-message-content-padding);
            display: grid;
            grid-template-columns: min-content 1fr min-content;
            align-items: start;
            width: 100%;
            margin: 0 auto;
        }

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

        &__message {
            margin: var(--jkl-system-message-message-margin);
        }

        &__dismiss-button {
            background-color: transparent;
            padding: 0;
            cursor: pointer;
            display: grid;
            place-content: center;
            position: relative;
            color: inherit;

            // Sørg for å ha en stor nok touch target.
            &::after {
                content: "";
                position: absolute;
                display: block;
                width: var(--jkl-system-message-dismiss-button-size);
                height: var(--jkl-system-message-dismiss-button-size);
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

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

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

            @include jkl.reset-outline;

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

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

            &:focus-visible {
                @include jkl.focus-outline;

                @include jkl.forced-colors-mode {
                    outline: 2px solid ButtonText;
                    outline-offset: 2px;
                }
            }
        }

        &__message,
        &__message:last-child {
            margin-bottom: 0;
        }

        &--dismissed {
            animation: $_dismiss-animation-name jkl.timing("lazy") forwards;
            transition: block jkl.timing("lazy") jkl.timing("lazy");
        }

        &--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;
            }
        }
    }

    @keyframes #{$_dismiss-animation-name} {
        from {
            opacity: 1;
            transform: translateY(0);
            filter: saturate(1);
            display: block;
        }

        to {
            opacity: 0;
            transform: translateY(-10%);
            filter: saturate(0.7);
            display: none;
        }
    }
}