@layer components {
  /*
    色を選ぶ欄。手本はBackpackの配色の設定（実測: screenshots/37signals-others/backpack-color-scheme-customizer-2009.jpg、1倍）。
    - 色の面 (295, 20, 190, 185): 枠も角丸も無い四角。BC2のポップオーバーではなくページの中に置く欄なので、面の外側は
      BC2の通知する人を選ぶ箱（overlays.md 1e）の淡い灰色の箱にする（手本の#999の濃い灰色の面は、灰色の文字が4.5:1に届かないので使わない）。
    - 色の面の中の位置 (458, 73, 11, 11): 白い輪の内と外に暗い縁を付けた直径約11pxの輪。ぼかしの影は無い。
    - 色相は手本では面の右の縦の帯だが、ここではRangeの溝とつまみ（range.css）の中を色の移り変わりにしたスライダーにする。
  */
  .rx-color-picker {
    --color-picker-hue: 215;
    --color-picker-saturation: 0.68;
    --color-picker-brightness: 0.84;
    --color-picker-alpha: 1;
    --color-picker-color: var(--rx-link);
    --color-picker-hue-color: var(--rx-link);
    --color-picker-fallback: var(--rx-link);
    container: rx-color-picker / inline-size;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;

    & > legend {
      max-inline-size: 100%;
      padding: 0;
      font-size: var(--rx-label);
      font-weight: var(--rx-label-weight);
      line-height: var(--rx-label-leading);
    }

    & > .editor {
      display: grid;
      align-items: start;
      gap: var(--rx-space-4);
      min-inline-size: 0;
      /* 面の余白は、色の面とスライダーのグループの間やスライダーどうしの間より広くする。 */
      padding-block: var(--rx-space-4);
      padding-inline: var(--rx-space-5);
      /*
        シートの中の枠。実測: overlays.md「1e. 通知する人を選ぶ欄」のフォームの下に置く灰色の箱。
        塗り#f9f9f9、1px #dfdfdf（--rx-gray-200に丸めた）、角丸約8px。
      */
      border: var(--rx-stroke-width) solid var(--rx-gray-200);
      border-radius: 0.5rem;
      background: var(--rx-gray-20);
    }

    & > .editor > .visual,
    & > .editor > .channels {
      min-inline-size: 0;
    }

    & > .editor > .visual > .area {
      position: relative;
      display: block;
      inline-size: 100%;
      max-inline-size: none;
      min-block-size: 0;
      aspect-ratio: 8 / 5;
      overflow: hidden;
      padding: 0;
      /* 手本の色の面は枠も角丸も無い。Buttonの枠は透かし、色を縁まで敷く。 */
      border-color: transparent;
      border-radius: 0;
      background:
        linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent),
        var(--color-picker-hue-color, var(--rx-link));
      /* 透かした枠の下まで色を一続きに敷き、縁に繰り返しの線を出さない。 */
      background-origin: border-box;
      box-shadow: var(--rx-shadow-input);
      cursor: crosshair;
      touch-action: none;
    }

    &:not([data-state]) > .editor > .visual > .area {
      display: none;
    }

    & > .editor > .visual > .area > .cursor {
      position: absolute;
      inset-inline-start: calc(var(--color-picker-saturation, 0.68) * 100%);
      inset-block-start: calc((1 - var(--color-picker-brightness, 0.84)) * 100%);
      inline-size: 0.75rem;
      block-size: 0.75rem;
      border: 0.125rem solid white;
      border-radius: 50%;
      background: transparent;
      box-shadow:
        0 0 0 var(--rx-stroke-width) rgb(0 0 0 / 55%),
        inset 0 0 0 var(--rx-stroke-width) rgb(0 0 0 / 55%);
      translate: -50% -50%;
      pointer-events: none;
    }

    & > .editor > .visual > .preview {
      display: grid;
      grid-template-columns: 1.625rem minmax(0, 1fr) auto;
      align-items: center;
      gap: 0.5625rem;
      min-inline-size: 0;
      margin-block-start: 0.625rem;
      color: var(--rx-muted);
      font-size: var(--rx-small);
      line-height: var(--rx-small-leading);
    }

    & > .editor > .visual > .preview > .swatch {
      position: relative;
      inline-size: 1.625rem;
      block-size: 1.625rem;
      overflow: hidden;
      border: var(--rx-stroke-width) solid var(--rx-control-border);
      border-radius: var(--rx-radius-mark);
      background: repeating-conic-gradient(var(--rx-border) 0 25%, white 0 50%) 0 0 / 0.5rem 0.5rem;
      box-shadow: none;
    }

    & > .editor > .visual > .preview > .swatch::after {
      position: absolute;
      inset: 0;
      background: var(--color-picker-fallback, var(--rx-link));
      background: var(--color-picker-color, var(--rx-link));
      content: "";
    }

    & > .editor > .visual > .preview > .preview-label {
      min-inline-size: 0;
      overflow-wrap: anywhere;
    }

    & > .editor > .channels {
      display: grid;
      gap: 0.625rem;
    }

    & > .editor > .channels > .rx-field {
      gap: 0.125rem;
    }

    & > .editor > .channels > .rx-field > .rx-range > .controls {
      margin-block-start: 0;
    }

    /*
      四本のスライダーはRange（range.css）の溝とつまみをそのまま使い、溝の中だけを各値の色の移り変わりにする。
      色そのものが値を示すので、進んだ側の淡い青の塗りは敷かない。
    */
    & > .editor > .channels > .rx-field > .rx-range {
      --rx-range-lead: 0%;
      --rx-range-rest: linear-gradient(transparent, transparent);
    }

    & > .editor > .channels > .rx-field > .rx-range[data-channel="hue"] {
      --slider-value: calc(var(--color-picker-hue, 215) / 360);
      --rx-range-fill: linear-gradient(
        to right,
        #f33,
        #fc3,
        #59c966,
        #35bdc8,
        #487edc,
        #c05bc4,
        #f33
      );
    }

    & > .editor > .channels > .rx-field > .rx-range[data-channel="saturation"] {
      --slider-value: var(--color-picker-saturation, 0.68);
      --rx-range-fill: linear-gradient(
        to right,
        white,
        var(--color-picker-hue-color, var(--rx-link))
      );
    }

    & > .editor > .channels > .rx-field > .rx-range[data-channel="brightness"] {
      --slider-value: var(--color-picker-brightness, 0.84);
      --rx-range-fill: linear-gradient(
        to right,
        black,
        var(--color-picker-hue-color, var(--rx-link))
      );
    }

    & > .editor > .channels > .rx-field > .rx-range[data-channel="alpha"] {
      --slider-value: var(--color-picker-alpha, 1);
      --rx-range-fill:
        linear-gradient(to right, transparent, var(--color-picker-hue-color, var(--rx-link))),
        repeating-conic-gradient(var(--rx-border) 0 25%, white 0 50%) 0 0 / 0.5rem 0.5rem;
    }

    /* 使えない時は形と塗りをそのままにし、文字だけを灰色にする（controls.md 13・15章）。 */
    &:disabled > .editor > .visual > .preview {
      color: var(--rx-disabled-text);
    }

    &:disabled > .editor > .visual > .area {
      cursor: default;
    }
  }

  @container rx-color-picker (inline-size >= 28rem) {
    .rx-color-picker > .editor > .channels {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 1.125rem;
    }
  }

  @container rx-color-picker (inline-size < 20rem) {
    .rx-color-picker > .editor > .visual > .preview {
      grid-template-columns: 1.625rem minmax(0, 1fr);
    }

    .rx-color-picker > .editor > .visual > .preview > .rx-tag {
      grid-column: 1 / -1;
    }
  }

  @container rx-color-picker (inline-size >= 38rem) {
    .rx-color-picker > .editor {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: 1.375rem;
    }

    .rx-color-picker > .editor > .channels {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (forced-colors: active) {
    .rx-color-picker > .editor > .visual > .area {
      background: Canvas;
      box-shadow: none;
    }

    .rx-color-picker > .editor > .visual > .area > .cursor {
      border-color: Highlight;
      box-shadow: none;
    }

    .rx-color-picker > .editor > .channels > .rx-field > .rx-range {
      --rx-range-fill: linear-gradient(Highlight, Highlight);
    }
  }
}