.ebs-switch {
  border-radius: rem(8px);
  height: rem(16px);
  width: rem(32px);
  position: relative;
  cursor: pointer;

  &--unchecked {
    background-color: $border-color;

    .ebs-switch__dot {
      border-color: $border-color;
      background-color: $white;
      box-shadow: 0px 0px 0px 2px $grey-500 inset;
    }

    &:hover .ebs-switch__dot {
      border-color: var(--primary-200);
      box-shadow: 0px 0px 0px 2px var(--primary-color inset);
    }
  }

  &--unchecked.disabled {
    cursor: not-allowed;
    background-color: $border-color;

    .ebs-switch__dot,
    .ebs-switch__dot:hover {
      background-color: $white;
      border-color: $border-color;
    }
  }

  &--checked {
    background-color: var(--primary-200);

    .ebs-switch__dot {
      transform: translate(16px, -50%);
      background-color: var(--primary-400);
      border-color: var(--primary-200);
    }

    &:hover .ebs-switch__dot {
      border-color: var(--primary-300);
      box-shadow: 0px 0px 0px 2px var(--primary-color inset);
    }
  }

  &--checked.disabled {
    cursor: not-allowed;
    background-color: var(--primary-100);

    .ebs-switch__dot,
    .ebs-switch__dot:hover {
      box-shadow: 0px 0px 0px 2px var(--primary-400 inset);
      background-color: var(--primary-300);
      border-color: var(--primary-100);
    }
  }

  &__dot {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    width: rem(16px);
    height: rem(16px);
    border: 2px solid transparent;
    box-shadow: 0px 0px 0px 2px var(--primary-color inset);
    border-radius: 50%;
    overflow: hidden;
    transition: all $transition-time;
  }

  &__checked-sheet {
    border-radius: rem(25px);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
