$toggle-switch-fill-error: var(--wds-toggle-switch-fill-error, var(--wds-color-fill-dark-primary, #151414));
$toggle-switch-fill-error-disabled: var(--wds-toggle-switch-fill-error-disabled, var(--wds-color-fill-destructive-primary-disabled, rgba(19, 23, 32, .3)));
$toggle-switch-fill-error-hover: var(--wds-toggle-switch-fill-error-hover, var(--wds-color-fill-dark-primary-hover, #383838));
$toggle-switch-fill-standard: var(--wds-toggle-switch-fill-standard, var(--wds-color-black-400, #767574));
$toggle-switch-fill-standard-disabled: var(--wds-toggle-switch-fill-standard-disabled, var(--wds-color-fill-standard-primary-disabled, rgba(19, 23, 32, .3)));
$toggle-switch-fill-standard-hover: var(--wds-toggle-switch-fill-standard-hover, var(--wds-color-fill-dark-primary-hover, #383838));
$toggle-switch-fill-success: var(--wds-toggle-switch-fill-success, var(--wds-color-fill-dark-primary, #151414));
$toggle-switch-fill-success-disabled: var(--wds-toggle-switch-fill-success-disabled, var(--wds-color-fill-success-primary-disabled, rgba(19, 23, 32, .3)));
$toggle-switch-fill-success-hover: var(--wds-toggle-switch-fill-success-hover, var(--wds-color-fill-dark-primary-hover, #383838));
$toggle-switch-fill-urgent: var(--wds-toggle-switch-fill-urgent, var(--wds-color-fill-dark-primary, #151414));
$toggle-switch-fill-urgent-disabled: var(--wds-toggle-switch-fill-urgent-disabled, var(--wds-color-fill-urgent-primary-disabled, rgba(19, 23, 32, .3)));
$toggle-switch-fill-urgent-hover: var(--wds-toggle-switch-fill-urgent-hover, var(--wds-color-fill-dark-primary-hover, #383838));
$toggle-switch-knob-size-large: var(--wds-toggle-switch-knob-size-large, 20px);
$toggle-switch-knob-size-medium: var(--wds-toggle-switch-knob-size-medium, 14px);
$toggle-switch-knob-size-small: var(--wds-toggle-switch-knob-size-small, 12px);
$toggle-switch-knob-text-height: var(--wds-toggle-switch-knob-text-height, 0px);
$toggle-switch-width-large: var(--wds-toggle-switch-width-large, 40px);
$toggle-switch-width-medium: var(--wds-toggle-switch-width-medium, 26px);
$toggle-switch-width-small: var(--wds-toggle-switch-width-small, 24px);

.toggle-switch {
  &#{&}--size-small &__track {
    border-radius: var(--wds-border-radius-full, #{$toggle-switch-knob-size-small});
  }

  &#{&}--size-small &__knob {
    border-radius: var(--wds-border-radius-full, #{$toggle-switch-knob-size-small});
  }

  &#{&}--size-medium &__track {
    border-radius: var(--wds-border-radius-full, #{$toggle-switch-knob-size-medium});
  }

  &#{&}--size-medium &__knob {
    border-radius: var(--wds-border-radius-full, #{$toggle-switch-knob-size-medium});
  }

  &#{&}--size-large &__track {
    border-radius: var(--wds-border-radius-full, #{$toggle-switch-knob-size-large});
  }

  &#{&}--size-large &__knob {
    border-radius: var(--wds-border-radius-full, #{$toggle-switch-knob-size-large});
  }

  &#{&}--skin-standard {
    color: $toggle-switch-fill-standard;
  }

  @media (hover: hover) {
    &#{&}--skin-standard:hover {
      color: $toggle-switch-fill-standard-hover;
    }
  }

  &#{&}--skin-success {
    color: $toggle-switch-fill-success;
  }

  @media (hover: hover) {
    &#{&}--skin-success:hover {
      color: $toggle-switch-fill-success-hover;
    }
  }

  &#{&}--skin-error {
    color: $toggle-switch-fill-error;
  }

  @media (hover: hover) {
    &#{&}--skin-error:hover {
      color: $toggle-switch-fill-error-hover;
    }
  }

  &#{&}--skin-urgent {
    color: $toggle-switch-fill-urgent;
  }

  @media (hover: hover) {
    &#{&}--skin-urgent:hover {
      color: $toggle-switch-fill-urgent-hover;
    }
  }

  &#{&}--size-small &__track {
    width: $toggle-switch-width-small;
    height: 12px;
  }

  &#{&}--size-small &__knob {
    width: 12px;
    height: 12px;
    transform: translateX(-6px);
  }

  &#{&}--size-small &__knob-icon {
    width: 6px;
    height: 6px;
  }

  &#{&}--size-small &__knob-icon > svg {
    height: $toggle-switch-knob-text-height;
  }

  &#{&}--size-small#{&}--checked &__knob,
  :global([dir='rtl']) &#{&}--size-small &__knob {
    transform: translateX(6px);
  }

  :global([dir='rtl']) &#{&}--size-small#{&}--checked &__knob {
    transform: translateX(-6px);
  }

  &#{&}--size-medium &__track {
    width: $toggle-switch-width-medium;
    height: 14px;
  }

  &#{&}--size-medium &__knob {
    width: 14px;
    height: 14px;
    transform: translateX(-6px);
  }

  &#{&}--size-medium &__knob-icon {
    width: 7px;
    height: 7px;
  }

  &#{&}--size-medium &__knob-icon > svg {
    height: $toggle-switch-knob-text-height;
  }

  &#{&}--size-medium#{&}--checked &__knob,
  :global([dir='rtl']) &#{&}--size-medium &__knob {
    transform: translateX(6px);
  }

  :global([dir='rtl']) &#{&}--size-medium#{&}--checked &__knob {
    transform: translateX(-6px);
  }

  &#{&}--size-large &__track {
    width: $toggle-switch-width-large;
    height: 20px;
  }

  &#{&}--size-large &__knob {
    width: 20px;
    height: 20px;
    transform: translateX(-10px);
  }

  &#{&}--size-large &__knob-icon {
    width: 10px;
    height: 10px;
  }

  &#{&}--size-large &__knob-icon > svg {
    height: $toggle-switch-knob-text-height;
  }

  &#{&}--size-large#{&}--checked &__knob,
  :global([dir='rtl']) &#{&}--size-large &__knob {
    transform: translateX(10px);
  }

  :global([dir='rtl']) &#{&}--size-large#{&}--checked &__knob {
    transform: translateX(-10px);
  }

  &#{&}--skin-standard:not(&--checked):not(&--disabled) {
    color: var(--wds-color-black-400);
  }

  @media (hover: hover) {
    &#{&}--skin-standard:hover:not(&--checked):not(&--disabled) {
      color: var(--wds-color-fill-dark-primary-hover);
    }
  }

  &#{&}--skin-standard#{&}--disabled,
  &#{&}--skin-standard#{&}--disabled#{&}--checked {
    color: $toggle-switch-fill-standard-disabled;
  }

  @media (hover: hover) {
    &#{&}--skin-standard#{&}--disabled:hover,
    &#{&}--skin-standard#{&}--disabled#{&}--checked:hover {
      color: $toggle-switch-fill-standard-disabled;
    }
  }

  &#{&}--skin-success:not(&--checked):not(&--disabled) {
    color: var(--wds-color-fill-dark-primary);
  }

  @media (hover: hover) {
    &#{&}--skin-success:hover:not(&--checked):not(&--disabled) {
      color: var(--wds-color-fill-dark-primary-hover);
    }
  }

  &#{&}--skin-success#{&}--disabled,
  &#{&}--skin-success#{&}--disabled#{&}--checked {
    color: $toggle-switch-fill-success-disabled;
  }

  @media (hover: hover) {
    &#{&}--skin-success#{&}--disabled:hover,
    &#{&}--skin-success#{&}--disabled#{&}--checked:hover {
      color: $toggle-switch-fill-success-disabled;
    }
  }

  &#{&}--skin-error:not(&--checked):not(&--disabled) {
    color: var(--wds-color-fill-dark-primary);
  }

  @media (hover: hover) {
    &#{&}--skin-error:hover:not(&--checked):not(&--disabled) {
      color: var(--wds-color-fill-dark-primary-hover);
    }
  }

  &#{&}--skin-error#{&}--disabled,
  &#{&}--skin-error#{&}--disabled#{&}--checked {
    color: $toggle-switch-fill-error-disabled;
  }

  @media (hover: hover) {
    &#{&}--skin-error#{&}--disabled:hover,
    &#{&}--skin-error#{&}--disabled#{&}--checked:hover {
      color: $toggle-switch-fill-error-disabled;
    }
  }

  &#{&}--skin-urgent:not(&--checked):not(&--disabled) {
    color: var(--wds-color-fill-dark-primary);
  }

  @media (hover: hover) {
    &#{&}--skin-urgent:hover:not(&--checked):not(&--disabled) {
      color: var(--wds-color-fill-dark-primary-hover);
    }
  }

  &#{&}--skin-urgent#{&}--disabled,
  &#{&}--skin-urgent#{&}--disabled#{&}--checked {
    color: $toggle-switch-fill-urgent-disabled;
  }

  @media (hover: hover) {
    &#{&}--skin-urgent#{&}--disabled:hover,
    &#{&}--skin-urgent#{&}--disabled#{&}--checked:hover {
      color: $toggle-switch-fill-urgent-disabled;
    }
  }

  & &__knob {
    box-shadow: var(--wds-toggle-switch-shadow, none);
    transition: transform 150ms ease-out;
  }

  & &__track {
    transition: all 100ms ease;
  }

  @media (prefers-reduced-motion) {
    & &__knob {
      transition: none;
    }
  }
}