// This scoping is needed because of css in forms.less
input[type='checkbox'].switch {
  position: relative;

  width: 36px;
  height: 20px;

  opacity: var(--blend--solid--light);
  background-color: rgb(var(--background--neutral-base-default--light));
  border: 1px solid rgb(var(--border--neutral-low-default--light));
  border-radius: var(--size--lg);

  transition: background-color 0.2s ease-in-out, left 0.2s ease-in-out;

  // Needed because of css in forms.less
  &::before {
    content: '' !important;
  }

  &::after {
    content: '';

    position: absolute;
    top: 1px;
    left: 1px;

    display: block;

    width: var(--size--lg);
    height: var(--size--lg);

    opacity: var(--blend--solid--light);
    background-color: rgb(var(--background--controls-medium-default--light));
    border-radius: var(--size--lg);
    box-shadow: 0 1px 2px rgb(var(--background--neutral-strong-default--light) / var(--blend--strong--light));

    transition: all 0.2s ease-in-out;
  }

  &:hover:not(:disabled)::after {
    background-color: rgb(var(--background--controls-medium-hovered--light));
  }

  &:checked {
    background-color: rgb(var(--background--controls-medium-selected--light));

    &::after {
      left: calc(var(--size--lg) + var(--tweak--1000));
      background-color: rgb(var(--background--neutral-base-default--light));
    }

    &:hover:not(:disabled) {
      background-color: rgb(var(--background--controls-medium-hovered--light));

      &::after {
        background-color: rgb(var(--background--neutral-low-hovered--light));
      }
    }
  }

  &:disabled {
    opacity: var(--blend--medium--light);
  }

  &.warning-field,
  &.warning-field:focus {
    border-color: rgb(var(--border--warning-medium-default--light));
  }

  &.error-field,
  &.error-field:focus {
    border-color: rgb(var(--border--critical-high-default--light));
  }
}

input[type='checkbox'].switch--sm {
  width: 28px;
  height: 16px;

  &::after {
    left: 1px;
    width: 12px;
    height: 12px;
  }

  &:checked::after {
    left: 13px;
  }
}