/* Speaker modal fade transition.
   Uses @starting-style + allow-discrete so the dialog can animate
   across its display:none <-> display:block (and top-layer) transition. */

.speaker-modal {
    opacity: 0;
    transition:
        opacity 300ms ease,
        overlay 300ms ease allow-discrete,
        display 300ms ease allow-discrete;
}

.speaker-modal[open] {
    opacity: 1;
}

@starting-style {
    .speaker-modal[open] {
        opacity: 0;
    }
}

.speaker-modal::backdrop {
    background-color: rgba(0, 0, 0, 0);
    transition:
        background-color 300ms ease,
        overlay 300ms ease allow-discrete,
        display 300ms ease allow-discrete;
}

.speaker-modal[open]::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}

@starting-style {
    .speaker-modal[open]::backdrop {
        background-color: rgba(0, 0, 0, 0);
    }
}