:host { box-sizing: border-box; }
:host *, :host ::before, :host ::after { box-sizing: inherit; }
[hidden] { display: none !important; }
:host { --width: 31rem; --spacing: var(--wa-space-l); --backdrop-filter: none; --show-duration: 200ms; --hide-duration: 200ms; display: none; }
:host([open]) { display: block; }
.dialog {
  display: flex; flex-direction: column; inset: 0px; width: var(--width); max-width: calc(100% - var(--wa-space-2xl)); max-height: calc(100% - var(--wa-space-2xl)); color: inherit; background-color: var(--wa-color-surface-raised); border-radius: var(--wa-panel-border-radius); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-shadow: var(--wa-shadow-l); padding: 0px; margin: auto;
  &.show {
  animation: show-dialog var(--show-duration) ease;
  &::backdrop { animation: show-backdrop var(--show-duration, 200ms) ease; }
}
  &.hide {
  animation: show-dialog var(--hide-duration) ease reverse;
  &::backdrop { animation: show-backdrop var(--hide-duration, 200ms) ease reverse; }
}
  &.pulse { animation: 250ms ease 0s 1 normal none running pulse; }
}
.dialog:focus { outline: none; }
@media screen and (max-width: 420px) {
  .dialog { max-height: 80vh; }
}
.open { display: flex; opacity: 1; }
.header { flex: 0 0 auto; display: flex; flex-wrap: nowrap; padding-inline-start: var(--spacing); padding-block-end: 0px; padding-inline-end: calc(var(--spacing) - var(--wa-form-control-padding-block)); padding-block-start: calc(var(--spacing) - var(--wa-form-control-padding-block)); }
.title { align-self: center; flex: 1 1 auto; font-family: inherit; font-size: var(--wa-font-size-l); font-weight: var(--wa-font-weight-heading); line-height: var(--wa-line-height-condensed); margin: 0px; }
.header-actions { align-self: start; display: flex; flex-shrink: 0; flex-wrap: wrap; justify-content: end; gap: var(--wa-space-2xs); padding-inline-start: var(--spacing); }
.header-actions wa-button, .header-actions ::slotted(wa-button) { flex: 0 0 auto; display: flex; align-items: center; }
.body {
  flex: 1 1 auto; display: block; padding: var(--spacing); overflow: auto;
  &:focus { outline: none; }
  &:focus-visible { outline: var(--wa-focus-ring); outline-offset: var(--wa-focus-ring-offset); }
}
.footer { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: var(--wa-space-xs); justify-content: end; padding: var(--spacing); padding-block-start: 0px; }
.footer ::slotted(wa-button:not(:first-of-type)) { margin-inline-start: var(--wa-spacing-xs); }
.dialog::backdrop { background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25)); backdrop-filter: var(--backdrop-filter); }
@keyframes pulse { 
  0% { scale: 1; }
  50% { scale: 1.02; }
  100% { scale: 1; }
}
@keyframes show-dialog { 
  0% { opacity: 0; scale: 0.8; }
  100% { opacity: 1; scale: 1; }
}
@keyframes show-backdrop { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@media (forced-colors: active) {
  .dialog { border: 1px solid white; }
}