/* Bottom sheet «Details» (the Apple Pay sheet has its own applepay.css); shared buttons */

.sheet-backdrop {
  position: fixed;
  z-index: var(--z-sheet);
  inset: 0;
  background: var(--color-backdrop);
}
.sheet {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  margin-inline: auto;
  max-inline-size: calc(var(--column) + 2 * var(--space-xl));
  max-block-size: var(--sheet-max);
  overflow: auto;
  padding: var(--space-xl) var(--space-xl) calc(var(--space-2xl) + env(safe-area-inset-bottom));
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--color-bg);
}
.sheet-title { font-size: var(--size-2xl); }
.sheet .text-muted { font-size: var(--size-s); }

/* Documents: rows without a link in the demo */
.docs button {
  inline-size: 100%;
  min-block-size: var(--control-m);
  padding-block: var(--space-sm);
  border-block-start: var(--border-thin) solid var(--color-line);
  text-align: start;
  font-weight: var(--weight-semibold);
  cursor: default;
}
.docs button::after { content: "›"; float: inline-end; color: var(--color-text-muted); }

.btn {
  inline-size: 100%;
  min-block-size: var(--control-l);
  padding-inline: var(--space-xl);
  border: var(--border) solid var(--color-border-strong);
  border-radius: var(--radius-m);
  font-family: var(--font-display);
  font-weight: var(--weight-heavy);
  font-size: var(--size-m);
  text-transform: uppercase;
}
.btn[data-variant="primary"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.btn:disabled { background: var(--color-off); border-color: var(--color-off); color: var(--color-on-off); }