.wrapper {
  display: flex;
  align-items: center;

  .switch-label-fake {
    margin-left: 7px;
  }
}

.switch {
  position: relative;

  &-toggler {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 12px;
    height: 12px;
    content: "";
    background: var(--background-card);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(40, 41, 61, 0.2), 0 2px 4px rgba(96, 97, 112, 0.2);
    transition: all 0.2s;
    transform: translateX(0);
  }

  &-label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 24px;
    height: 16px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #c7c9d9;
    border-radius: 8px;
    transition: all 0.2s;

    &:active {
      &-toggler {
        width: 32px;
      }
    }
  }

  &-input {
    position: absolute;
    width: 0;
    height: 0;
    visibility: hidden;

    &:checked + .switch-label {
      background: var(--color-primary-7);
      border-color: var(--color-primary-7);

      .switch-toggler {
        box-shadow: none;
        // width - half of the toggler - side padding
        transform: translateX(calc(100% - 6px - 1px * -1));
      }
    }

    &:disabled + .switch-label,
    &:disabled:checked + .switch-label {
      cursor: not-allowed;
      background: #f2f2f5;
      border-color: #ebebf0;

      .switch-toggler {
        background: #7f8197;
        box-shadow: none;
      }
    }
  }

  &-label-fake {
    font-size: 13px;
    color: var(--color-switch);
    text-align: center;
  }
}
