@charset "utf-8";

/* --------------------------------------------------------------------------
   Floating Message
-------------------------------------------------------------------------- */

    .floating-message {

        position: fixed;
        top: calc(var(--space-64) + var(--space-16));
        right: var(--space-24);
        z-index: 10000;

        display: flex;
        align-items: flex-start;
        gap: var(--space-12);

        width: fit-content;
        max-width: min(24rem, calc(100vw - 4.375rem));

        padding: var(--space-16);

        box-sizing: border-box;
        border-radius: var(--radius-400);

        box-shadow: 0 var(--space-8) var(--space-24) rgb(0 0 0 / 10%);

        pointer-events: none;

        animation: floating-message 4.5s forwards;

        &.ok {
            background: #f0f7f2;

            .status {
                color: #009c44;
            }
        }

        &.error {
            background: var(--color-negative-surface-low);

            .status {
                color: var(--color-negative-primary);
            }
        }

        .status {
            width: var(--space-24);
            height: var(--space-24);
            flex-shrink: 0;
            fill: currentColor;
        }

        .content {

            min-width: 0;
            flex: 1;

            header {
                color: var(--color-neutral-content-high);
                font-size: var(--font-size-body-l);
                font-weight: var(--font-weight-semibold);
                line-height: var(--line-height-body-l);
            }

            section {
                margin-top: var(--space-8);
                color: var(--color-neutral-content-medium);
                font-size: var(--font-size-body-m);
                font-weight: var(--font-weight-regular);
                line-height: var(--line-height-body-m);
            }

            header + section {
                margin-top: var(--space-8);
            }

            section:first-child {
                margin-top: 0;
            }

        }

    }

    @keyframes floating-message {

        0% {
            opacity: 0;
            transform: translateX(var(--space-48)) scale(.96);
        }

        7% {
            opacity: 1;
            transform: translateX(calc(var(--space-4) * -1)) scale(1.01);
        }

        11% {
            opacity: 1;
            transform: translateX(0) scale(1);
        }

        88% {
            opacity: 1;
            transform: translateX(0) scale(1);
        }

        94% {
            opacity: 1;
            transform: translateX(calc(var(--space-4) * -1)) scale(1);
        }

        100% {
            opacity: 0;
            transform: translateX(var(--space-32)) scale(.97);
        }

    }


/* --------------------------------------------------------------------------
    Dialog
-------------------------------------------------------------------------- */

    dialog {

        /* Data */
        > section {

            width: 30rem;
            max-width: 100%;

            background: var(--color-neutral-white);
            border-radius: var(--radius-600);

            /* Header */
            > header {

                width: 100%;
                height: auto;
                min-height: 0;

                padding: var(--space-28) var(--space-28) var(--space-16);
                box-sizing: border-box;

                display: grid;
                grid-template-columns: 1fr auto;
                align-items: center;
                gap: var(--space-16);

                background: var(--color-neutral-white);
                border-radius: var(--radius-600) var(--radius-600) var(--radius-0) var(--radius-0);

                color: var(--color-neutral-content-high);

                font-size: var(--font-size-heading-s);
                line-height: var(--line-height-heading-s);
                font-weight: var(--font-weight-semibold);
                letter-spacing: 0;

                [data-action="dialog-close"] {

                    width: var(--space-24);
                    height: var(--space-24);

                    margin-right: var(--space-0);

                    cursor: pointer;

                    stroke: var(--color-neutral-content-low);
                    transition: var(--transition-default);

                    &:hover {
                        stroke: var(--color-brand-primary);
                        scale: 1.1;
                    }

                }

            }

            /* Content */
            > section {

                padding: var(--space-16) var(--space-28) var(--space-28);
                box-sizing: border-box;

            }

            /* Footer */
            > footer {

                padding: var(--space-0) var(--space-28) var(--space-28);
                box-sizing: border-box;

                &:empty {
                    display: none;
                }

            }

        }

    }