.Toggle {
  --toggle-switch-background-color: var(--color-background-base-tertiary);
  --toggle-switch-handle-background-color: var(--color-static-white);
  --toggle-switch-handle-opacity: 1;
  display: inline-flex;
  position: relative;
}

  .Toggle_size_s .Toggle-Input:checked + .Toggle-Switch::before, .Toggle_size_xs .Toggle-Input:checked + .Toggle-Switch::before, .Toggle_size_2xs .Toggle-Input:checked + .Toggle-Switch::before {
        transform: translateX(14px);
      }

  .Toggle_size_s .Toggle-Switch, .Toggle_size_xs .Toggle-Switch, .Toggle_size_2xs .Toggle-Switch {
      inline-size: 30px;
      block-size: 16px;
      border-radius: calc(30px / 2);
    }

  .Toggle_size_s .Toggle-Switch::before, .Toggle_size_xs .Toggle-Switch::before, .Toggle_size_2xs .Toggle-Switch::before {
        block-size: 14px;
        inline-size: 14px;
        inset-inline-start: 1px;
        inset-block-end: 1px;
      }

  .Toggle_size_m .Toggle-Input:checked + .Toggle-Switch::before, .Toggle_size_l .Toggle-Input:checked + .Toggle-Switch::before {
        transform: translateX(20px);
      }

  .Toggle_size_m .Toggle-Switch, .Toggle_size_l .Toggle-Switch {
      inline-size: 44px;
      block-size: 24px;
      border-radius: calc(44px / 2);
    }

  .Toggle_size_m .Toggle-Switch::before, .Toggle_size_l .Toggle-Switch::before {
        block-size: 20px;
        inline-size: 20px;
        inset-inline-start: 2px;
        inset-block-end: 2px;
      }

.Toggle-Input {
  position: absolute;
  margin: 0;
  opacity: 0;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: 100%;
  cursor: pointer;
  z-index: var(--z-index-absolute);
}

.Toggle-Input:hover:not(:disabled) + .Toggle-Switch {
    --toggle-switch-background-color: var(--color-background-base-tertiary-hover);
  }

.Toggle-Input:active:not(:disabled) + .Toggle-Switch {
    --toggle-switch-background-color: var(--color-background-base-tertiary-pressed);
  }

.Toggle-Input:checked + .Toggle-Switch {
    --toggle-switch-background-color: var(--color-background-accent-default);
    --toggle-switch-handle-background-color: var(--color-background-base-accent-on);
  }

.Toggle-Input:hover:checked + .Toggle-Switch {
    --toggle-switch-background-color: var(--color-background-accent-hover);
  }

.Toggle-Input:active:checked + .Toggle-Switch {
    --toggle-switch-background-color: var(--color-background-accent-pressed);
  }

.Toggle-Input:focus-visible + .Toggle-Switch {
    box-shadow: var(--shadow-outline-focused);
  }

.Toggle-Switch {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  background-color: var(--toggle-switch-background-color);
  box-shadow: 0 1px 1px 0 rgb(0 0 0 / 16%) inset;
  transition: var(--transition-default);
}

.Toggle-Switch::before {
    position: absolute;
    content: '';
    background-color: var(--toggle-switch-handle-background-color);
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 16%);
    transition: var(--transition-default);
    border-radius: 50%;
    opacity: var(--toggle-switch-handle-opacity);
  }

.Toggle_disabled {
  --toggle-switch-handle-opacity: 0.7;
  pointer-events: none;
}

.Toggle_disabled .Toggle-Switch {
    --toggle-switch-background-color: var(--color-background-base-disabled);
  }

.Toggle_disabled .Toggle-Input:checked + .Toggle-Switch {
    --toggle-switch-background-color: var(--color-background-accent-active-disabled);
  }