@layer components {
  .confirm {
    position: fixed;
    inset: var(--space-0);
    z-index: var(--z-modal);
    inline-size: var(--size-fill);
    block-size: var(--size-fill);
    max-inline-size: none;
    max-block-size: none;
    margin: var(--space-0);
    padding: var(--gutter-fluid) var(--gutter-fluid) calc(var(--safe-bottom) + var(--gutter-fluid));
    border: none;
    outline: none;
    background-color: var(--color-scrim);
    color: var(--color-ink);
    opacity: var(--opacity-none);
    transition:
      opacity var(--dur-base) var(--ease-calm),
      overlay var(--dur-base) var(--ease-calm) allow-discrete,
      display var(--dur-base) var(--ease-calm) allow-discrete;
  }

  .confirm[open] {
    display: grid;
    align-content: end;
    justify-items: center;
    opacity: initial;
  }

  .confirm::backdrop {
    background-color: transparent;
  }

  @starting-style {
    .confirm[open] {
      opacity: var(--opacity-none);
    }
  }

  .confirm__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    inline-size: var(--size-fill);
    max-inline-size: var(--modal-inline-size);
    max-block-size: var(--size-fill);
    min-block-size: var(--space-0);
    outline: none;
    transition: translate var(--dur-sheet) var(--ease-spring-soft);
  }

  @starting-style {
    .confirm[open] .confirm__panel {
      translate: var(--space-0) var(--modal-enter-offset);
    }
  }

  .confirm__sheet,
  .confirm__cancel {
    border-radius: var(--radius-card);
    background-color: var(--color-surface-raised);
    box-shadow: var(--elev-4);
  }

  .confirm__sheet {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-block-size: var(--space-0);
    padding: var(--space-8) var(--space-7) var(--space-7);
  }

  .confirm__message {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-block-size: var(--space-0);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .confirm__title {
    font: var(--type-title-2);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-display);
    text-wrap: balance;
  }

  .confirm__body {
    font: var(--type-body);
    color: var(--color-ink-muted);
    text-wrap: pretty;
  }

  .confirm__detail {
    padding-inline: var(--space-5);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-sunken);
  }

  .confirm__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .confirm .button {
    inline-size: var(--size-fill);
  }

  .confirm--menu .confirm__sheet {
    gap: var(--space-3);
    padding: var(--space-6) var(--space-0) var(--space-0);
    overflow: hidden;
  }

  .confirm--menu .confirm__title {
    padding-inline: var(--space-7);
    font: var(--type-label);
    letter-spacing: normal;
    color: var(--color-ink-muted);
    text-align: center;
    overflow-wrap: anywhere;
  }

  .confirm--menu .confirm__actions {
    gap: var(--space-0);
  }

  .confirm__item {
    --icon-size: var(--button-icon-size);

    display: flex;
    align-items: center;
    gap: var(--space-5);
    inline-size: var(--size-fill);
    min-block-size: var(--tap-min);
    padding: var(--space-4) var(--space-7);
    border-block-start: var(--border-width) solid var(--color-border);
    font: var(--type-body);
    color: var(--color-ink);
    text-align: start;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .confirm__item > .icon {
    color: var(--color-accent-ink);
  }

  .confirm__item-text {
    display: flex;
    flex: auto;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: var(--space-0);
  }

  .confirm__item-detail {
    font: var(--type-caption);
    color: var(--color-ink-muted);
    text-wrap: pretty;
  }

  .confirm__item:active {
    background-color: var(--color-surface-sunken);
  }

  .confirm__item--danger,
  .confirm__item--danger > .icon {
    color: var(--color-danger);
  }

  .confirm__item[hidden] {
    display: none;
  }

  @media (any-hover: hover) {
    .confirm__item:hover {
      background-color: var(--color-surface-sunken);
    }
  }

  .confirm__cancel .button {
    border-radius: inherit;
    font-weight: 700;
  }

  @media (width > 440px) {
    .confirm[open] {
      align-content: center;
    }

    .confirm__panel {
      gap: var(--space-0);
      overflow: hidden;
      border-radius: var(--radius-card);
      background-color: var(--color-surface-raised);
      box-shadow: var(--elev-4);
    }

    .confirm__sheet,
    .confirm__cancel {
      border-radius: var(--space-0);
      background-color: transparent;
      box-shadow: none;
    }

    .confirm__sheet,
    .confirm--menu .confirm__sheet {
      padding-block-end: var(--space-3);
    }

    .confirm__cancel {
      padding: var(--space-0) var(--space-7) var(--space-7);
    }
  }
}