.turbo-progress-bar {
    background-color: rgb(79 70 229);
}

.qr-code {
    aspect-ratio: 1;
    block-size: 50dvh;
}

.trix-content ul {
    list-style: disc inside;
}

.trix-content ol {
    list-style: decimal inside;
}

::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%4f46e5" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}

:is(.dialog) {
    --backdrop-speed: 150ms;
    --panel-size: max-content;
    --speed: 150ms;

    border: 0;
    opacity: 0;
    transform: translateY(50%);
    transform-origin: bottom center;
    transition:
            display var(--speed) allow-discrete,
            opacity var(--speed),
            overlay var(--speed) allow-discrete,
            transform var(--speed);

    &::backdrop {
        opacity: 0;
        transform: translateY(0);
        transition:
                display var(--backdrop-speed) allow-discrete,
                opacity var(--backdrop-speed),
                overlay var(--backdrop-speed) allow-discrete;
    }

    &[open] {
        opacity: 1;
        transform: translateY(0);

        &::backdrop {
            opacity: 0.5;
        }
    }

    @starting-style {
        &[open] {
            opacity: 0;
            transform: translateY(50%);
        }

        &[open]::backdrop {
            opacity: 0;
        }
    }
}

/* bridge--form component */
[data-bridge-components~="form"]
[data-controller~="bridge--form"]
[type="submit"] {
    display: none;
}

/* bridge--button component */
[data-bridge-components~="button"]
[data-controller~="button"] {
    display: none;
}