.switch {
  position: relative;
  display: inline-block;
  width: 2.375rem;
  height: 1.25rem;

  &.disabled {
    input {
      &:checked + .slider {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }
  }

  input {
    opacity: 0;
    width: 0;
    height: 0;

    &:checked + .slider {
      background-color: var(--v2-color-indigo);

      &:before {
        transform: translateX(1rem);
      }
    }
    &:focus + .slider {
      box-shadow: 0 0 1px var(--v2-color-indigo);
    }
  }
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--v2-color-silver);
  transition: background-color 0.4s;
  border-radius: 2.125rem;

  &:before {
    position: absolute;
    content: "";
    height: 1rem;
    width: 1rem;
    left: 0.1875rem;
    bottom: 0.125rem;
    background-color: var(--v2-color-white);
    transition: transform 0.4s;
    border-radius: 50%;
  }
}
