@use '../config' as *;

.signature {
  --signature-padding: var(--spacer-1);
  --signature-border-radius: var(--border-radius);
  --signature-canvas-height: 12.5rem;
  padding: var(--signature-padding);
  border: var(--border-width) solid var(--border-color);
  @include border-radius(var(--border-radius));
}

.signature-canvas {
  display: block;
  width: 100%;
  // A fixed height is required: without it the canvas height comes from its own
  // width/height attributes, which `resizeCanvas()` rewrites on every resize —
  // each run then measures a different `offsetHeight` and the pad drifts.
  height: var(--signature-canvas-height);
  cursor: crosshair;
  border: var(--border-width) dashed var(--border-color);
  @include border-radius(calc(var(--signature-border-radius) - var(--signature-padding)));
}