/* <dialog> by itself or <wa-dialog> */
:host,
dialog:not(:host *) {
  width: 31rem;
  max-width: calc(100% - var(--wa-space-2xl));
  max-height: calc(100% - var(--wa-space-2xl));
  background-color: var(--wa-color-surface-raised);
  padding: var(--wa-space-xl);
  border-radius: var(--wa-panel-border-radius);
  border: none;
  box-shadow: var(--wa-shadow-l);
  transition: var(--wa-transition-slow, 200ms) var(--wa-transition-easing);
  transition-behavior: allow-discrete !important;
}

/* <dialog> wherever it is */
dialog {
  flex-direction: column;
  inset: 0;

  &[open] {
    display: flex;

    &::backdrop {
      @starting-style {
        opacity: 0;
      }
    }

    @starting-style {
      opacity: 0;
      scale: 0.8;
    }
  }

  &:not([open]) {
    scale: 0.8;

    &,
    &::backdrop {
      opacity: 0;
    }
  }

  &.wa-dialog-pulse {
    animation: wa-dialog-pulse 250ms ease;
  }

  &:focus {
    outline: none;
  }

  &::backdrop {
    /* NOTE: the ::backdrop element doesn't inherit properly before Safari 17.4 */
    background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
    transition: inherit;
    opacity: 1;
  }

  /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
  @media screen and (max-width: 420px) {
    max-height: 80vh;
  }

  @media (forced-colors: active) {
    border: solid 1px white;
  }

  > * {
    margin: 0;
  }

  > slot {
    display: block;
  }

  > :nth-child(2):not(:last-child) {
    padding-block-start: inherit;
  }

  > :nth-last-child(2):not(:first-child) {
    padding-block-end: inherit;
  }

  /* Dialog body */
  > :not(header, footer) {
    &:where(header:first-child + *, :first-child):where(:last-child, :has(+ footer:last-child)) {
      flex: 1 1 auto;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

  > header {
    flex: 0 0 auto;
    display: flex;
    padding-block-end: 0;
  }

  > footer {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wa-space-xs);
    justify-content: end;
    padding-block-start: 0;

    ::slotted(wa-button:not(:first-of-type)),
    ::slotted(button:not(:first-of-type)),
    > wa-button:not(:first-of-type),
    > button:not(:first-of-type) {
      margin-inline-start: var(--wa-spacing-xs);
    }
  }
}

@keyframes wa-dialog-pulse {
  from,
  to {
    scale: 1;
  }
  50% {
    scale: 1.02;
  }
}

@keyframes wa-fade-in {
  from {
    opacity: 0;
  }
}

dialog > header > h2 {
  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: 0;
}
