dialog {
  max-inline-size: 300px;
  
  transition:
    1s opacity,
    1s translate,
    /* Step 3: transition display with transition-behavior: allow-discrete */
    1s display allow-discrete,
    /* Step 4: keep the ::backdrop around until gone */
    1s overlay allow-discrete;
  
  &::backdrop {
    transition:
      opacity 1s,
      display 1s allow-discrete,
      overlay 1s allow-discrete;
  }

  /* STATE: On The Way Out */
  /* Think: reverse order states */
  &:not(:open) {
    opacity: 0;
    translate: 100px 0;
    &::backdrop {
      opacity: 0;
    }
  }
  
  
  /* STATE: While Open */
  &:open {
    opacity: 1;
    translate: 0 0;
    &::backdrop {
      opacity: 1;
    }
  }

  /* STATE: On The Way Out */
  /* Note the placement for specificity. @starting-style doesn't have any specificity, so these need to come AFTER regular open styles. */
  /* Benefit for using = https://codepen.io/phaux/pen/RNrPNgG */
  @starting-style {
    &:open {
      /* Step 5: styles before open. */
      /* STATE: On the Way In */
      opacity: 0;
      translate: -100px 0;

      /* The backdrop needs a starting style too! */
      &::backdrop {
        opacity: 0;
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  dialog {  
    transition:
    1s opacity,
    1s display allow-discrete,
    1s overlay allow-discrete;

    &, &:open {
      translate: 0 !important;
    }
  }
}



/* Doesn't this all beg for a @mixin with slots???
https://nerdy.dev/css-mixins-ready-for-experimentation
*/









@layer style {
  html {
    font: 100%/1.3 system-ui;
  }

  header, footer {
    background: #ececec;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    h2 {
      font-size: 18px;
      margin: 0;
    }
    button {
      background: transparent;
      color: white;
      padding: 0;
      border: 0;
      font-weight: bold;
      font-size: 18px;
      border-radius: 6px;
      padding: 0.5rem;
      &.button-no {
        background: #ff4545;
      }
      &.button-yes {
        background: #4ac54a;
      }
    }
  }
  header {
    background: #111;
    font-size: 24px;
    justify-content: center;
  }
  form {
    padding: 1rem;
  }
  dialog {
    border-radius: 8px;
    padding: 0;
    border: 0;
    box-shadow: rgba(0, 0, 0, 0.75) 0px 50px 100px -20px, rgba(0, 0, 0, 0.85) 0px 30px 60px -30px;

    p {
      margin: 0;
      padding: 1rem;
    }

    &::backdrop {
      background: linear-gradient(
        45deg, #333, #999
      );
    }
  }
  
}