$standard: var(--wds-color-fill-standard-primary, var(--wsr-color-B10, #116dff));
$standard-hover: var(
  --wds-color-fill-standard-primary-hover,
  var(--wsr-color-B05, #0f62e6)
);
$standard-tertiary-hover: var(
  --wds-color-fill-standard-tertiary-hover,
  var(--wsr-color-B50, #e7f0ff)
);
$success: var(--wds-color-fill-success-primary, var(--wsr-color-G10, #25a55a));
$success-hover: var(
  --wds-color-fill-success-primary-hover,
  var(--wsr-color-G20, #51b77b)
);
$success-tertiary-hover: var(
  --wds-color-fill-success-tertiary-hover,
  var(--wsr-color-G50, #e1f4eb)
);
$disabled: var(
  --wds-color-fill-standard-primary-disabled,
  var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
);

.check-toggle {
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: none;
  display: block;
  position: relative;
  cursor: pointer;
  /* stylelint-disable-next-line plugin/use-baseline */
  user-select: none;
  border-radius: 100%;

  & &__input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
  }

  & &__toggle {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: none;
    border: 1px solid;
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: content-box;
  }

  & &__toggle svg {
    color: var(
      --wds-color-text-standard-primary-light,
      var(--wsr-color-D80, #ffffff)
    );
    transform: translate(-1px, -1px);
  }

  /* Size */
  &--size-small {
    height: 18px;
    width: 18px;
  }

  &--size-medium {
    height: 24px;
    width: 24px;
  }

  &--size-small &__toggle {
    height: 16px;
    width: 16px;
  }

  &--size-medium &__toggle {
    height: 22px;
    width: 22px;
  }

  /* Focus: the ring belongs to the label, which is not focusable itself. The
     inner checkbox is, and the Focusable state class used to carry it up. */
  &:focus-visible,
  &:has(:focus-visible) {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: var(--wds-outline-focus-outer, 3px solid var(--wsr-color-B10, #116dff));
    outline-offset: 1px;
  }

  &:focus-visible::before,
  &:has(:focus-visible)::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: var(--wds-outline-focus-inner, 1px solid var(--wsr-color-D80, #ffffff));
  }

  &:not(#{&}--checked) svg {
    visibility: hidden;
  }

  /* Skin */
  &--skin-standard &__toggle {
    border-color: $standard;
    background-color: $standard;
  }

  &--skin-success &__toggle {
    border-color: $success;
    background-color: $success;
  }

  /* Disabled */
  &--disabled &__toggle {
    cursor: initial;
    border-color: $disabled;
    background-color: $disabled;
  }

  &--disabled#{&}--checked &__toggle {
    border-color: transparent;
  }

  /* Hover */
  @media (hover: hover) {
    &:not(#{&}--disabled)#{&}--skin-standard#{&}--checked:hover &__toggle {
      border-color: $standard-hover;
      background-color: $standard-hover;
    }

    &:not(#{&}--disabled)#{&}--skin-success#{&}--checked:hover &__toggle {
      border-color: $success-hover;
      background-color: $success-hover;
    }

    &:not(#{&}--disabled)#{&}--skin-standard:hover &__toggle {
      border-color: $standard;
      background-color: $standard-tertiary-hover;
    }

    &:not(#{&}--disabled)#{&}--skin-success:hover &__toggle {
      border-color: $success;
      background-color: $success-tertiary-hover;
    }
  }

  /* Checked */
  &:not(#{&}--checked) &__toggle {
    background-color: unset;
  }
}