@layer components {
  :root {
    --dialog-border-color: lightgray;
    --dialog-backdrop-color: rgba(0, 0, 0, 0.15);
  }

  dialog {
    position: fixed;
    inset: 0;
    z-index: 999;
    max-width: min(64rem, 95vw);
    max-height: 95vh;
    margin: auto;
    border: 1px solid var(--dialog-border-color);
    border-radius: 1rem;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
    overflow: auto;
    opacity: 0;
    padding: 1rem;
    transform: scale(0.95) translateY(1rem);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, display 0.3s allow-discrete;
  }

  dialog.sm {
    max-width: min(24rem, 95vw);
  }

  dialog.lg {
    max-width: min(48rem, 95vw);
  }

  dialog.full {
    max-width: 95vw;
  }

  .dialog-close-button {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 1rem;
    margin-right: 1rem;
  }

  dialog h3 {
    margin-top: -0.2rem;
    margin-bottom: .8rem;
    padding-right: 2rem;
  }

  .dialog-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: right;
    background-color: #f7f7f7;
    margin-top: 1rem;
    margin-inline: -1rem;
    margin-bottom: -1rem;
    padding: 1rem;
  }

  dialog::backdrop {
    background-color: rgb(0 0 0 / 0);
    transition: background-color 0.3s ease-out;
    backdrop-filter: blur(4px);
  }

  dialog[open] {
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  dialog[open]::backdrop {
    background-color: var(--dialog-backdrop-color);
  }

  @starting-style {
    dialog[open] {
      opacity: 0;
      transform: scale(0.95) translateY(1rem);
    }

    dialog[open]::backdrop {
      background-color: rgb(0 0 0 / 0);
    }
  }
}