@layer components {
  /*
    スイッチ。Basecamp 2・Highriseの画面に手本は無い（推測）。
    隣に並ぶOSの標準のチェックボックス（実測: controls.md 9。13〜14px、1px #9c9c9c 前後の枠、角丸 約2px）に近い、
    控えめな小さな溝とつまみにする。溝は高さ14px・幅26pxの灰色の角丸2pxの枠で、つまみは同じ枠の白い小さな四角。
    入れると溝を青緑で塗り、つまみを終わり側へ動かす。塗りは平らにし、光沢や浮き彫りは付けない。
    入力の箱は名前の一行と同じ高さにし（名前の一行目と上端をそろえる）、溝とつまみは擬似要素で中央に描く。
  */
  .rx-switch {
    --rx-switch-edge: #9c9c9c;
    --rx-switch-width: 1.625rem;
    --rx-switch-height: 0.875rem;
    display: grid;
    grid-template-columns: var(--rx-switch-width) minmax(0, 1fr);
    align-items: start;
    column-gap: var(--rx-space-2);
    min-inline-size: 0;
    font-size: var(--rx-label);
    line-height: calc(10 / 7);
    cursor: pointer;

    & > input {
      appearance: none;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      inline-size: var(--rx-switch-width);
      block-size: calc(10em / 7);
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: inherit;
    }

    & > input::before,
    & > input::after {
      content: "";
      grid-area: 1 / 1;
      box-sizing: border-box;
      block-size: var(--rx-switch-height);
      border: var(--rx-stroke-width) solid var(--rx-switch-edge);
      border-radius: var(--rx-radius-mark);
      background: var(--rx-surface);
    }

    /* 溝。切っている間は、チェックボックスの中ほどの灰色（実測: controls.md 9。#ececec）で塗り、白いつまみと見分ける。 */
    & > input::before {
      inline-size: 100%;
      background: var(--rx-gray-100);
    }

    /* つまみ。溝の枠に重ねた、溝と同じ高さの四角。 */
    & > input::after {
      justify-self: start;
      inline-size: 0.75rem;
    }

    /*
      オンは、選ぶ操作の共通の見た目（チェックボックスの選んだ状態と同じ青の塗りと紺の縁）。
      溝は14pxと細く、白いつまみが半分を覆うので、同じ塗りでは選んだ日のセル（24px）より淡く見える。
      溝だけ同じ色合いで一段濃い塗りにし、選んだ日と同じくらいの濃さに見せる（ユーザーの指定）。
    */
    & > input:checked::before {
      border-color: var(--rx-selected-edge);
      border-block-end-color: var(--rx-selected-edge-end);
      background: linear-gradient(#a9d3f9, #86bdf3 50%, #6eaeee);
    }

    & > input:checked::after {
      justify-self: end;
      border-color: var(--rx-selected-edge);
    }

    /* ホバーは手本が無い（推測）。枠を一段濃くする。 */
    &:hover > input:not(:disabled, :checked)::before,
    &:hover > input:not(:disabled, :checked)::after {
      border-color: color-mix(in srgb, var(--rx-switch-edge) 70%, var(--rx-ink));
    }

    /* フォーカスは欄と同じ、青い縁と外側の淡い青の輪を溝に出す。 */
    & > input:focus-visible {
      outline: 0.125rem solid transparent;
      outline-offset: 0;
    }

    & > input:focus-visible::before {
      border-color: var(--rx-focus-border);
      box-shadow: var(--rx-focus-glow);
    }

    /* 使えないスイッチは、Buttonと同じく形と塗りをそのままにし、名前の文字だけを灰色にする。 */
    &:has(> input:disabled) {
      color: var(--rx-disabled-text);
      cursor: default;
    }

    & > span {
      min-inline-size: 0;
    }

    & > span > small {
      display: block;
      margin-block-start: var(--rx-space-1);
      color: var(--rx-muted);
      font-size: var(--rx-small);
    }

    &:has(> input:disabled) > span > small {
      color: var(--rx-disabled-text);
    }
  }

  @media (pointer: coarse) {
    .rx-switch {
      min-block-size: 2.75rem;
      padding-block: var(--rx-space-3);
    }
  }
  @media (forced-colors: active) {
    .rx-switch > input {
      appearance: auto;
      block-size: var(--rx-switch-height);
    }
    .rx-switch > input::before,
    .rx-switch > input::after {
      display: none;
    }
  }
}