@layer genr.component {
    .dialog {
        --dialog-max-width: 40rem;
        --dialog-transform: translateY(100%);
        --dialog-duration: var(--transition-duration);
        --dialog-border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        --dialog-top-position: auto;
        --dialog-bottom-position: 0;
        --dialog-horizontal-position: auto;
        --backdrop-color: lch(from var(--color-black) l c h / 0.5);
        --backdrop-duration: var(--transition-duration);

        @media (width > 768px) {
            --dialog-transform: scale(0.8) translateY(3rem);
            --dialog-border-radius: var(--radius-sm);
            --dialog-top-position: auto;
            --dialog-bottom-position: auto;
        }

        overflow-x: hidden;
        width: 100%;
        max-height: calc(100% - 5rem);
        max-width: var(--dialog-max-width);
        margin-top: var(--dialog-top-position, auto);
        margin-bottom: var(--dialog-bottom-position, auto);
        margin-right: var(--dialog-horizontal-position, auto);
        padding: 0 1.5rem 1.5rem;
        color: var(--color-white);
        border-radius: var(--dialog-border-radius);
        box-shadow: var(--shadow-lg);
        background-color: var(--color-dark-green);
        border: 0;
        transition: display var(--dialog-duration) allow-discrete, overlay var(--dialog-duration) allow-discrete;
        animation: dialog-close var(--dialog-duration) forwards;

        &[open] {
            animation: dialog-open var(--dialog-duration) forwards;

            &::backdrop {
                animation: dialog-backdrop-fade-in var(--backdrop-duration) forwards;
            }
        }

        &.close::backdrop {
            animation: dialog-backdrop-fade-out var(--backdrop-duration) forwards;
        }

        &::backdrop {
            background-color: var(--backdrop-color);
        }

        &.is-no-close {
            .dialog__header,
            .dialog__body {
                animation: dialog-shake-x 1s;
            }
        }
    }

    .dialog__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        position: sticky;
        top: 0;
        z-index: 1;
        margin-inline: -0.5rem;
        padding: 2rem 0.5rem;
        background-color: var(--color-dark-green);
    }

    .dialog__body {
        overflow-y: auto;
        margin: -1rem;
        padding: 1rem;
    }

    .dialog__title {
        display: flex;
        gap: 0.75rem;
        margin-bottom: 0;
        font-weight: 700;
        color: var(--color-light-patrol);
    }

    /* .dialog__button {} */

    @keyframes dialog-open {
        from {
            opacity: 0;
            transform: var(--dialog-transform);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes dialog-close {
        from {
            opacity: 1;
            transform: none;
        }

        to {
            opacity: 0;
            transform: var(--dialog-transform);
        }
    }

    @keyframes dialog-backdrop-fade-in {
        from {
            background-color: transparent;
        }

        to {
            background-color: var(--backdrop-color);
        }
    }

    @keyframes dialog-backdrop-fade-out {
        from {
            background: var(--backdrop-color);
        }

        to {
            background-color: transparent;
        }
    }

    @keyframes dialog-shake-x {
        0%,
        100% {
            transform: translateZ(0);
        }

        10%,
        30%,
        50%,
        70%,
        90% {
            transform: translate3d(-0.5rem, 0, 0);
        }

        20%,
        40%,
        60%,
        80% {
            transform: translate3d(0.5rem, 0, 0);
        }
    }
}