.spectrum-Underlay { visibility: hidden; opacity: 0; transition: transform var(--spectrum-global-animation-duration-100, 130ms) ease-in-out, opacity var(--spectrum-global-animation-duration-100, 130ms) ease-in-out, visibility 0ms linear var(--spectrum-global-animation-duration-100, 130ms); pointer-events: none; } .spectrum-Underlay.is-open { visibility: visible; opacity: 1; transition-delay: 0ms; pointer-events: auto; } .spectrum-Underlay { --spectrum-dialog-confirm-background-entry-animation-delay: 0ms; --spectrum-dialog-confirm-background-exit-animation-ease: cubic-bezier(0.5, 0, 1, 1); --spectrum-dialog-confirm-background-entry-animation-ease: cubic-bezier(0, 0, 0.40, 1); } .spectrum-Underlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; overflow: hidden; transition: opacity var(--spectrum-dialog-confirm-background-exit-animation-duration, var(--spectrum-global-animation-duration-300)) var(--spectrum-dialog-confirm-background-exit-animation-ease, var(--spectrum-global-animation-linear)) var(--spectrum-dialog-confirm-background-exit-animation-delay, var(--spectrum-global-animation-duration-200)), visibility 0ms linear calc(var(--spectrum-dialog-confirm-background-exit-animation-delay, var(--spectrum-global-animation-duration-200)) + var(--spectrum-dialog-confirm-background-exit-animation-duration, var(--spectrum-global-animation-duration-300))); } .spectrum-Underlay.is-open { transition: opacity var(--spectrum-dialog-confirm-background-entry-animation-duration, var(--spectrum-global-animation-duration-600)) var(--spectrum-dialog-confirm-background-entry-animation-ease, var(--spectrum-global-animation-linear)) var(--spectrum-dialog-confirm-background-entry-animation-delay, 0ms); } .spectrum-Underlay { background: var(--spectrum-dialog-confirm-overlay-background-color, var(--spectrum-alias-background-color-modal-overlay)); }