.switch {
  display: flex; }
  .switch__item input {
    position: absolute;
    width: 0px;
    height: 0px;
    visibility: hidden;
    opacity: 0;
    cursor: pointer; }
  .switch__item label {
    display: flex;
    align-items: center; }
    @media (hover: hover) {
      .switch__item label {
        cursor: pointer; }
        .switch__item label:hover .toggler {
          background-color: #fff; } }
  .switch__item input:checked {
    cursor: default; }
  @media (hover: hover) {
    .switch__item input:checked ~ label {
      cursor: pointer; }
      .switch__item input:checked ~ label:hover .toggler {
        background-color: var(--theme-base-color-light); } }
  .switch__item input:checked ~ label .toggler {
    border-color: var(--theme-base-color);
    background-color: var(--theme-base-color); }
    .switch__item input:checked ~ label .toggler:before {
      left: 22px;
      border-color: #fff; }
  .switch__item .toggler {
    position: relative;
    width: 40px;
    height: 20px;
    display: flex;
    flex: 0 0 auto;
    transition: all .3s ease;
    pointer-events: none;
    border: 1px solid #DEDFE8;
    border-radius: 24px;
    background-color: #F0F2F6; }
    .switch__item .toggler:before {
      position: absolute;
      top: 50%;
      left: 2px;
      width: 14px;
      height: 14px;
      display: flex;
      flex: 0 0 auto;
      content: '';
      transition: all .3s ease;
      transform: translateY(-50%);
      border: 1px solid #DEDFE8;
      border-radius: 50%;
      background-color: #fff; }
  .switch__item .descr {
    display: block;
    margin-left: 12px;
    white-space: nowrap; }