@layer components {
  /* A white sheet to sign on, in either theme, so the ink and the saved image look the same everywhere. */
  .signature-pad {
    --signature-ink: oklch(22% 0.03 264);
    --signature-guide: oklch(75% 0.01 264);
    --signature-hint: oklch(55% 0.01 264);

    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    inline-size: 100%;
    /* The area's ratio turns its 8rem floor into a 24rem width, wider than a phone; the pad may be narrower. */
    min-inline-size: 0;
  }

  .signature-pad__area {
    aspect-ratio: 3 / 1;
    background-color: white;
    border: var(--border);
    border-radius: var(--radius-lg);
    inline-size: 100%;
    min-block-size: 8rem;
    overflow: hidden;
    position: relative;

    &::after {
      border-block-end: 1px dashed var(--signature-guide);
      content: "";
      inset-block-end: 28%;
      inset-inline: 6%;
      pointer-events: none;
      position: absolute;
    }
  }

  .signature-pad__canvas {
    block-size: 100%;
    color: var(--signature-ink);
    cursor: crosshair;
    display: block;
    inline-size: 100%;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .signature-pad__hint {
    color: var(--signature-hint);
    font-size: var(--text-small);
    inset-block-end: calc(28% + 0.4em);
    inset-inline-start: 6%;
    pointer-events: none;
    position: absolute;
    transition: opacity var(--duration-medium) ease;

    .signature-pad--signed & {
      opacity: 0;
    }
  }

  .signature-pad__actions {
    display: flex;
    justify-content: flex-end;
  }

  .signature-mark {
    display: inline-block;
    max-inline-size: 100%;
  }

  .signature-mark__drawing {
    background-color: white;
    block-size: auto;
    border-radius: var(--radius-lg);
    display: block;
    max-block-size: 5rem;
    max-inline-size: min(18rem, 100%);

    /* The white box is the paper signed on, so the dark theme does not dim it as it does other images. */
    opacity: 1;

    .signature-mark--small & {
      max-block-size: 2.5rem;
      max-inline-size: min(8rem, 100%);
    }
  }

  .signature-mark__name {
    border-block-start: 1px solid currentColor;
    display: block;
    font-size: var(--text-small);
    padding-block-start: 0.2em;
  }
}