/* Demo chrome only; it is not part of m.css. A later layer than m, so it wins without specificity. */
@layer demo {
  [data-token-panel] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
  }

  [data-swatch] {
    display: inline-block;
    min-inline-size: 3rem;
    block-size: 1.5rem;
    vertical-align: middle;
    text-align: center;
    background: var(--swatch);
    border: 1px solid var(--_m-border);
    border-radius: var(--m-radius);
  }

  [data-bar] {
    display: inline-block;
    inline-size: var(--bar);
    block-size: 0.75rem;
    background: var(--_m-primary);
  }

  /* A borderless, unpadded button keeps the top bar one line tall, like its links. */
  [data-demo-settings-button] {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-weight: inherit;
    line-height: inherit;

    &:hover {
      background: none;
      color: var(--_m-primary);
    }
  }

  [data-demo-settings] {
    inline-size: min(28rem, calc(100vw - 2rem));
    max-block-size: calc(100dvh - 2rem);
    overflow-y: auto;
  }

  :is([data-demo-settings], [data-property-controls]) {
    & label:has(> output) {
      display: grid;
      grid-template-columns: 1fr auto;

      & > input {
        grid-column: 1 / -1;
      }
    }

    & output {
      color: var(--_m-text-muted);
      font-variant-numeric: tabular-nums;
    }
  }

  /* A live example sits in a frame, with its state toggles above and its markup below. */
  figure[data-example] {
    margin-block-end: var(--_m-space-2);
    padding: var(--_m-space-6);
    border: 1px solid var(--_m-border);
    border-radius: calc(var(--m-radius) * 1.5);
  }

  [data-support] {
    color: var(--_m-text-muted);
  }

  [data-example-code] pre {
    margin-block: 0 var(--_m-space-2);
  }

  [data-property-controls] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: var(--_m-space-4);
    align-items: end;
  }

  /* A fixed height, not one measured by script, keeps the page stable while the switch restyles the frame. */
  [data-before-after] iframe {
    display: block;
    inline-size: 100%;
    block-size: 30rem;
    border: 1px solid var(--_m-border);
    border-radius: calc(var(--m-radius) * 1.5);
  }
}