/* Shared instrument panels for interactive blog posts. See docs/blog-toys.md. */
@layer components {
  .blog-toy {
    --toy-rule: color-mix(in srgb, var(--secondary) 40%, var(--paper));
    --toy-grid: color-mix(in srgb, var(--secondary) 8%, transparent);
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid var(--toy-rule);
    border-block-start: 3px solid var(--primary);
    background: var(--paper-dark);
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--secondary) 10%, transparent);
    container: toy / inline-size;
  }

  .blog-toy .toy-viewport {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2;
    border: 1px solid var(--toy-rule);
    background: var(--tertiary);
  }

  .toy-panel {
    min-width: 0;
    margin: 1rem 0;
    padding: 0.8rem;
    border: 1px solid var(--toy-rule);
    background:
      linear-gradient(var(--toy-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--toy-grid) 1px, transparent 1px),
      var(--paper);
    background-size: 1rem 1rem;
    color: var(--secondary);
    font: 0.8em / 1.4 ui-monospace, "Cascadia Code", "DejaVu Sans Mono", monospace;
    font-variant-numeric: tabular-nums;
  }

  .toy-panel legend {
    max-width: 100%;
    padding-inline: 0.5em;
    color: var(--secondary);
    font: inherit;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .toy-panel legend::before {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    margin-inline-end: 0.65em;
    background: var(--accent-color);
  }

  .toy-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
  }

  .toy-panel label {
    display: block;
    min-width: 0;
    font-size: 1em;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .toy-panel output {
    float: right;
    min-width: 3ch;
    padding-inline: 0.35em;
    border: 1px solid var(--toy-rule);
    background: var(--paper-dark);
    color: var(--accent-color);
    text-align: right;
    line-height: 1.5;
  }

  .toy-panel button,
  .toy-panel input[type="number"] {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.5em 0.75em;
    border: 1px solid var(--secondary);
    border-radius: 0;
    background: var(--paper-dark);
    color: var(--tertiary);
    font: inherit;
    line-height: 1.4;
  }

  .toy-panel input[type="number"] {
    margin-block-start: 0.4rem;
    border-inline-start: 3px solid var(--primary);
    letter-spacing: 0.1em;
  }

  .toy-panel button {
    border-inline-end: 3px solid var(--accent-color);
    background: linear-gradient(135deg, var(--toy-rule) 6px, transparent 6px), var(--paper-dark);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .toy-panel button:hover:enabled {
    border-color: var(--accent-color);
    background-color: color-mix(in srgb, var(--primary) 12%, var(--paper));
  }

  .toy-panel button:active:enabled {
    background-color: color-mix(in srgb, var(--primary) 22%, var(--paper));
  }

  .toy-panel :is(input, button):focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
  }

  .toy-panel input[type="range"] {
    appearance: none;
    display: block;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
  }

  .toy-range {
    position: relative;
    display: block;
    isolation: isolate;
    margin-block-start: 0.25rem;
  }

  .toy-range input[type="range"] { position: relative; z-index: 1; }

  .toy-range-ticks {
    position: absolute;
    /* The thumb's center travels from 6px to width - 6px. */
    inset-inline: 6px;
    top: 50%;
    width: calc(100% - 12px);
    height: 6px;
    transform: translateY(-50%);
    overflow: visible;
    pointer-events: none;
    stroke: var(--primary);
    stroke-width: 0.75px;
  }

  .toy-panel input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    border-block: 1px solid var(--toy-rule);
    background: transparent;
  }

  .toy-panel input[type="range"]::-moz-range-track {
    height: 6px;
    border-block: 1px solid var(--toy-rule);
    background: transparent;
  }

  .toy-panel input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    box-sizing: border-box;
    width: 12px;
    height: 20px;
    margin-top: -7px;
    border: 2px solid var(--paper);
    border-radius: 0;
    outline: 1px solid var(--accent-color);
    background: var(--accent-color);
  }

  .toy-panel input[type="range"]::-moz-range-thumb {
    box-sizing: border-box;
    width: 12px;
    height: 20px;
    border: 2px solid var(--paper);
    border-radius: 0;
    outline: 1px solid var(--accent-color);
    background: var(--accent-color);
  }

  .toy-panel .toy-toggle {
    display: flex;
    align-items: center;
    gap: 0.65em;
    min-height: 44px;
    cursor: pointer;
  }

  .toy-panel input[type="checkbox"] {
    appearance: none;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1px solid var(--secondary);
    border-radius: 0;
    background: var(--paper-dark);
    cursor: pointer;
  }

  .toy-panel input[type="checkbox"]:checked {
    border-color: var(--accent-color);
    background: var(--accent-color);
    box-shadow: inset 0 0 0 4px var(--paper);
  }

  .toy-panel label:has(input:disabled) { opacity: 0.55; }
  .toy-panel :is(input, button):disabled { cursor: not-allowed; }
  .toy-panel:disabled { opacity: 0.55; }

  .blog-toy figcaption { font-size: 0.8em; line-height: 1.5; }

  .blog-toy .toy-status {
    margin: 0.75rem 0 0;
    padding: 0.6rem 0 0 0.65rem;
    border-block-start: 1px solid var(--toy-rule);
    border-inline-start: 2px solid var(--primary);
    color: var(--secondary);
    font: 0.72em / 1.6 ui-monospace, "Cascadia Code", "DejaVu Sans Mono", monospace;
  }

  @container toy (max-width: 22rem) {
    .toy-controls { grid-template-columns: 1fr; gap: 0.75rem; }
    .toy-panel { padding: 0.65rem; }
  }

  @media (max-width: 420px) {
    .blog-toy { padding: 0.65rem; }
  }

  @media (forced-colors: active) {
    .toy-panel input[type="checkbox"] { appearance: auto; }
    .toy-panel input[type="range"] { appearance: auto; }
    .toy-range-ticks { display: none; }
  }
}