:is(.dialog) {
  --backdrop-speed: 150ms;
  --panel-size: max-content;
  --speed: 150ms;

  background-color: var(--cw-surface, var(--color-bg));
  border: 1px solid var(--cw-border, var(--color-subtle));
  border-radius: var(--cw-radius, 1em);
  color: var(--cw-ink, var(--color-ink));
  box-sizing: border-box;
  inline-size: min(var(--panel-size, 42rem), calc(100vw - (var(--inline-space, 1rem) * 2)));
  inset: 0;
  margin: auto;
  max-block-size: calc(100dvh - (var(--block-space, 1rem) * 2));
  max-inline-size: min(42rem, calc(100% - (var(--inline-space, 1rem) * 2)));
  overflow: auto;
  padding: 1.25rem;
  position: fixed;
  opacity: 0;
  transform: translateY(0.75rem);
  transform-origin: center;
  transition:
      display var(--speed) allow-discrete,
      opacity var(--speed),
      overlay var(--speed) allow-discrete,
      transform var(--speed);

  &::backdrop {
    background-color: color-mix(in srgb, var(--cw-bg, var(--color-bg)) 30%, #000);
    opacity: 0;
    transform: translateY(0);
    transition:
      display var(--backdrop-speed) allow-discrete,
      opacity var(--backdrop-speed),
      overlay var(--backdrop-speed) allow-discrete;
  }

  &[open] {
    opacity: 1;
    transform: translateY(0);

    &::backdrop {
      opacity: 0.5;
    }
  }

  @starting-style {
    &[open] {
      opacity: 0;
      transform: translateY(0.75rem);
    }

    &[open]::backdrop {
      opacity: 0;
    }
  }
}

@media (max-width: 70ch) {
  :is(.dialog) {
    --cw-radius: 0.85rem;

    inline-size: calc(100vw - (var(--inline-space, 1rem) * 2));
    max-block-size: calc(100dvh - (var(--block-space, 1rem) * 2));
    padding: 1rem;
  }
}

:is(.dialog__close) {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--cw-muted, var(--color-subtle-dark));
  cursor: pointer;
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 500;
  inset: 0.55rem 0.65rem auto auto;
  justify-content: center;
  line-height: 1;
  position: absolute;
  transition: background-color 150ms ease, color 150ms ease;
  block-size: 2rem;
  inline-size: 2rem;
}

:is(.dialog__close:hover) {
  background-color: color-mix(in srgb, var(--cw-border, var(--color-subtle)) 45%, transparent);
  color: var(--cw-ink, var(--color-ink));
}