a

.toggleButtonContainer {
  .toggleButton {
    // --- 基本レイアウト ---
    display: inline-block;
    position: relative;
    width: 40px;
    height: 20px;
    border-radius: 15px;
    cursor: pointer;
    transition: background-color 0.4s;
    background-color: #dee0e3;

    // --- 共通のつまみ（スライダー）スタイル ---
    &::after {
      position: absolute;
      top: 2px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      content: "";
      transition: left 0.4s, background-color 0.4s;
      box-shadow: 0 0 5px rgba(0 0 0 / 20%);
    }

    // --- OFF状態（未チェック） ---
    &:not(:has(input:checked)) {
      // background-color: #dee0e3;

      &::after {
        left: 3px;
        background-color: #b2b2b2;
      }

      // OFF時のホバー
      &:hover {
        background-color: #cccccc;

        &::after {
          background-color: #969799;
        }
      }

      // OFF時のアクティブ
      &:active {
        background-color: #b2b2b2;
      }

      // OFF時 + 押下中（disable時は除外）
      &:has(input:active):not(:has(input:disabled))::after {
        background-color: #6b6b6b;
      }
    }

    // --- ON状態（チェック済み） ---
    &:has(input:checked) {
      background-color: #0070cc;

      &::after {
        left: 21px;
        background-color: #ffffff;
      }

      // ON時のホバー
      &:hover {
        background-color: #005499;
      }

      // ON時のアクティブ
      &:active {
        background-color: #003866;
      }
    }

    // --- 無効化状態 ---
    &:has(input:disabled) {
      cursor: not-allowed;
      opacity: 0.3;
    }

    // OFF時 + 無効化
    &:not(:has(input:checked)):has(input:disabled) {
      background-color: #dee0e3;

      &::after {
        background-color: #b2b2b2;
      }
    }

    // ON時 + 無効化
    &:has(input:checked:disabled) {
      background-color: #0068bd;

      &::after {
        background-color: #ffffff;
      }
    }

    // --- フォーカス状態 ---
    &:has(input:focus-visible) {
      outline: 2px solid #0068bd;
      outline-offset: 2px;
    }

    // --- チェックボックス（非表示） ---
    input[type="checkbox"] {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
  }
}