dialog {
    top: 50%;
    left: 50%;
    width: 100vw;
    translate: -50% -50%;
    border: none;
    border-radius: var(--radius-default);
    background: var(--color-lightest);
    font-size: var(--font-size-normal);
    color: var(--color-darkest);
    position: relative;

    opacity: 0;
    scale: 0;
    transition:
        opacity var(--transition-default) ease-out,
        scale var(--transition-default) ease-out,
        overlay var(--transition-default) ease-out allow-discrete,
        display var(--transition-default) ease-out allow-discrete;

    &[open] {
        opacity: 1;
        scale: 1;

        &::backdrop {
            background-color: rgb(0 0 0 / 25%);
        }
    }

    &::backdrop {
        z-index: 2000;
        background-color: rgb(0 0 0 / 0%);
        transition:
            display var(--transition-default) allow-discrete,
            overlay var(--transition-default) allow-discrete,
            background-color var(--transition-default);
    }

    & > .wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--padding-default);
    }

    & header {
        justify-content: space-between;
        align-items: center;
        padding: var(--padding-default) var(--padding-default) 0;
    }

    main {
        padding: 0 var(--padding-default);
    }

    & footer {
        justify-content: space-between;
        padding: 0 var(--padding-default) var(--padding-default);
    }
}

@starting-style {
    dialog[open] {
        opacity: 0;
        scale: 0;

        &::backdrop {
            background-color: rgb(0 0 0 / 0%);
        }
    }
}