@layer components {
  /*
    ダイヤル。Basecamp 2・Highriseに手本は無い（推測）。つまみは控えめなボタン（実測: controls.md 1。平らな白、
    1px #ccc、下に 1px #ddd の影）と同じ作りの丸にし、周りに目盛りの値を並べる。
    値は左下から時計回りに右下まで、270度の弧に等しく並べる（3〜8個）。選んだ値は丸やピルで囲まず、
    黒い太字にし（ユーザーの指定）、つまみの針がその値へ回る。
    実体はラジオボタンのグループで、ボタンそのものは非表示にして値の文字を押せる範囲にする。
  */
  .rx-dial {
    --rx-dial-count: 2;
    --rx-dial-at: 0;
    /* 弧の半径は置き場所の幅に合わせて縮め、つまみも同じ割合で小さくする。 */
    --rx-dial-radius: min(4.25rem, calc((100cqi - 3rem) / 2));
    --rx-dial-size: calc(var(--rx-dial-radius) * 18 / 17);
    container-type: inline-size;
    --rx-dial-step: calc(270deg / (var(--rx-dial-count) - 1));
    display: grid;
    justify-items: center;
    gap: var(--rx-space-1);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--rx-text);
    font-family: var(--rx-control-font-family);
    font-size: var(--rx-label);
    line-height: var(--rx-label-leading);
    & > legend {
      margin-inline: auto;
      padding: 0;
      padding-block-end: var(--rx-space-2);
      font-weight: var(--rx-label-weight);
    }
    /*
      目盛りとつまみの位置は円の上の角度で決まり、書字方向に関係しないので、面の中は左から右に固定する。
      弧は真上から左下・右下の45度までなので、面の高さは真上の目盛り（半径）と下端の目盛り（半径×cos45°）に、
      目盛りの文字の高さの半分ずつを足した分にする。上下に余る空きをそろえ、見出し・単位との間を詰める。
    */
    & > .face {
      --rx-dial-center: calc(var(--rx-dial-radius) + 0.75rem);
      position: relative;
      direction: ltr;
      max-inline-size: 100%;
      inline-size: calc(var(--rx-dial-radius) * 2 + 3rem);
      block-size: calc(var(--rx-dial-radius) * 1.7071 + 1.5rem);
      &:has(> .stop:nth-of-type(1) > input:checked) {
        --rx-dial-at: 0;
      }
      &:has(> .stop:nth-of-type(2) > input:checked) {
        --rx-dial-at: 1;
      }
      &:has(> .stop:nth-of-type(3) > input:checked) {
        --rx-dial-at: 2;
      }
      &:has(> .stop:nth-of-type(4) > input:checked) {
        --rx-dial-at: 3;
      }
      &:has(> .stop:nth-of-type(5) > input:checked) {
        --rx-dial-at: 4;
      }
      &:has(> .stop:nth-of-type(6) > input:checked) {
        --rx-dial-at: 5;
      }
      &:has(> .stop:nth-of-type(7) > input:checked) {
        --rx-dial-at: 6;
      }
      &:has(> .stop:nth-of-type(8) > input:checked) {
        --rx-dial-at: 7;
      }
      /* 目盛りは8個までの設計なので、9個目以降を選んだ時は違う値を指さないよう針を隠し、値の太字だけで示す。 */
      &:has(> .stop:nth-of-type(n + 9) > input:checked) > .knob > .pointer {
        display: none;
      }
      /* 目盛りの値。弧の上の位置へ置き、文字はまっすぐ立てたままにする。 */
      & > .stop {
        --rx-dial-i: 0;
        --rx-dial-angle: calc(-135deg + var(--rx-dial-i) * var(--rx-dial-step));
        position: absolute;
        inset-block-start: var(--rx-dial-center);
        inset-inline-start: 50%;
        translate: calc(-50% + sin(var(--rx-dial-angle)) * var(--rx-dial-radius))
          calc(-50% - cos(var(--rx-dial-angle)) * var(--rx-dial-radius));
        padding-block: 0.125rem;
        padding-inline: 0.375rem;
        color: var(--rx-muted);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        cursor: pointer;
        & > input {
          position: absolute;
          inline-size: 0.0625rem;
          block-size: 0.0625rem;
          margin: 0;
          opacity: 0;
          pointer-events: none;
        }
        &:hover {
          color: var(--rx-text);
        }
        /* 選んだ値は、ヘッダーの今いる項目と同じく黒い太字で示し、面で囲わない。 */
        &:has(> input:checked) {
          color: var(--rx-ink);
          font-weight: 700;
        }
        &:has(> input:focus-visible) {
          outline: 0.125rem solid var(--rx-focus-border);
          outline-offset: 0.0625rem;
        }
      }
      /* つまみ。控えめなボタンと同じ平らな白、1px #ccc の枠、下に 1px #ddd の影。光沢は付けない。 */
      & > .knob {
        position: absolute;
        inset-block-start: var(--rx-dial-center);
        inset-inline-start: 50%;
        inline-size: var(--rx-dial-size);
        block-size: var(--rx-dial-size);
        translate: -50% -50%;
        border: var(--rx-stroke-width) solid var(--rx-control-border);
        border-radius: 50%;
        background: var(--rx-surface);
        box-shadow: var(--rx-shadow-control);
        /* 目盛りの刻み。つまみの縁の外に、値と同じ角度で短い線を引く。 */
        & > .tick {
          --rx-dial-i: 0;
          --rx-dial-angle: calc(-135deg + var(--rx-dial-i) * var(--rx-dial-step));
          position: absolute;
          inset-block-start: 50%;
          inset-inline-start: 50%;
          inline-size: var(--rx-stroke-width);
          block-size: 0.375rem;
          background: var(--rx-perforation);
          transform-origin: 50% 0;
          transform: rotate(calc(var(--rx-dial-angle) + 180deg))
            translateY(calc(var(--rx-dial-size) / 2 + 0.25rem));
        }
        /* 針。つまみの中心から、選んだ値の角度へ伸ばす。 */
        & > .pointer {
          position: absolute;
          inset-block-start: 50%;
          inset-inline-start: 50%;
          inline-size: 0.1875rem;
          block-size: calc(var(--rx-dial-size) / 2 - 0.625rem);
          border-radius: var(--rx-radius-pill);
          background: var(--rx-ink);
          transform-origin: 50% 0;
          rotate: calc(-135deg + var(--rx-dial-at) * var(--rx-dial-step) + 180deg);
          translate: -50% 0;
        }
      }
    }
    & > .unit {
      color: var(--rx-text);
      font-size: var(--rx-small);
      font-weight: 700;
      line-height: var(--rx-small-leading);
    }
    /* 使えないダイヤルは、Buttonと同じく形と塗りをそのままにし、文字だけを灰色にする。 */
    &:disabled {
      color: var(--rx-disabled-text);
      & > .face > .stop {
        color: var(--rx-disabled-text);
        cursor: default;
      }
      & > .face > .stop:has(> input:checked) {
        color: var(--rx-disabled-text);
      }
      & > .unit {
        color: var(--rx-disabled-text);
      }
    }
  }
  @media (forced-colors: active) {
    .rx-dial > .face > .knob {
      border: var(--rx-stroke-width) solid CanvasText;
      & > .pointer {
        background: CanvasText;
      }
    }
    .rx-dial > .face > .stop:has(> input:checked) {
      outline: var(--rx-stroke-width) solid Highlight;
    }
  }
}