dialog {
    outline: 0;
    border: 0;

    opacity: 0;
    transform: scale(.9);

    background: none;

    transition:
        opacity var(--transition-animation-ms) ease-out,
        transform var(--transition-animation-ms) ease-out,
        overlay var(--transition-animation-ms) ease-out allow-discrete,
        display var(--transition-animation-ms) ease-out allow-discrete;

    &::backdrop {
        opacity: 0;
        backdrop-filter: blur(5px);
        background-color: hsla(var(--color-primary-hue), calc(var(--color-primary-saturation) * .8), 20%, 40%);
        transition: opacity var(--transition-animation-ms) ease-out;
    }

    &.loading {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;

        > img {
            width: 80px;
            height: 80px;
        }

        > .message {
        }
    }

    & > .Panel {
        border: none;
    }
}

dialog[open] {
    opacity: 1;
    transform: scale(1);

    &::backdrop {
        opacity: 1;
    }
}

@starting-style {
    dialog[open] {
        opacity: 0;
        transform: scale(.9);
        &::backdrop {
            opacity: 0;
        }
    }
}