$switch-width: 3.5rem;
$switch-height: 2rem;
$switch-circle-width: 1.5rem;
$switch-circle-height: $switch-circle-width;
$switch-circle-side-margin: 0.25rem;
$switch-circle-top-margin: 0.25rem;
$switch-checked-x: $switch-width - $switch-circle-width - $switch-circle-side-margin;

input[type="checkbox"].switch {
  @include ignore-device-rendering();
  outline: none;
  display: block;
  width: $switch-width;
  height: $switch-height;
  position: relative;
  border: none;
  background-color: transparent;

  &:checked {
    background: transparent none;
  }
  &:hover {
    box-shadow: none;
  }

  /* Switch styling */

  &.switch {
    &:active {
      background-color: transparent;
    }
    &:active:before {
      border-color: var(--color-ui-2);
    }

    &:before {
      content: "";
      display: block;
      width: $switch-width;
      height: $switch-height;
      background-color: var(--color-ui-2-50);
      border-radius: 1rem;
      border: $default-border-width-thin solid var(--color-ui-2);
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
      transition: transform 0.2s, background 0.2s ease-out;
    }

    &:after {
      content: "\2715";
      color: var(--color-ui-1-50);
      font-size: var(--font-size-small);
      display: block;
      width: $switch-circle-width;
      height: $switch-circle-height;
      background-color: var(--color-ui-4);
      border-radius: 1rem;
      position: absolute;
      margin-left: $switch-circle-side-margin;
      margin-right: $switch-circle-side-margin;
      will-change: transform, background;
      transform: translateX(0);
      top: $switch-circle-top-margin;
      border: none;
      line-height: $switch-circle-height;
      text-align: center;
    }

    &:active:after {
      background-color: var(--color-ui-3);
      box-shadow: 0 $default-border-width-thin $default-margin var(--color-shadow-30);
    }

    /* Checked styling */

    &:checked {
      &:active {
        background-color: transparent;
      }
      &:active:before {
        background-color: var(--color-brand-light);
      }
      &:before {
        content: "";
        background-color: var(--color-brand-light-80);
        border-color: var(--color-brand-light);
      }
      &:after {
        content: "\2713";
        will-change: transform;
        transform: translateX($switch-checked-x);
        margin: 0;
        padding: 0;
        color: var(--color-ui-1-50);
      }

      /* Checked hover state */

      &:hover:before {
        background-color: var(--color-brand-light);
        border-color: var(--color-brand-light)
      }
    }

    /* Hover state */
    &:hover:before {
      border-color: var(--color-ui-2)
    }

    &:hover:after {
      box-shadow: 0 $default-border-width $default-margin*2 var(--color-shadow-30);
    }

    /* Disabled styling */

    &[disabled]:before,
    &[disabled]:checked:before {
      background-color: var(--color-ui-3);
      border-color: var(--color-ui-2-50);
    }
    &[disabled]:after {
      color: var(--color-ui-1-30);
    }

    /* Focus state */
    &:focus {
      box-shadow: none;
    }
    &:focus:before {
      box-shadow: 0 0 0 0.25rem var(--color-focus-80);
    }
  }
}