.address-open-btn {
    background-color: var(--color-red-600);
}

.address-open-btn:hover {
    background-color: var(--color-red-500);
}

dialog::backdrop {
    background-color: color-mix(in oklab, var(--color-gray-500) 75%, transparent);
    text-align: center;
    justify-content: center;
    min-height: 100%;
    display: flex;
}

dialog {
    margin-block: calc(var(--spacing) * 8);
    position: absolute;
    border-radius: var(--radius-lg);
    background-color: var(--color-white);
    padding-inline: calc(var(--spacing) * 4);
    text-align: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    width: 100%;
}

button {
    cursor: pointer;
}

@media (width >= 40rem) {
    dialog::backdrop {
        padding: calc(var(--spacing) * 0);
        align-items: center;
    }

    dialog {
        margin-block: calc(var(--spacing) * 8);
        width: 100%;
        max-width: var(--container-lg);
        padding: calc(var(--spacing) * 6);
    }
}