.toggle-switch {
  &#{&}--size-small &__track {
    width: 24px;
    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: 0px;
  }

  &#{&}--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: 26px;
    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: 0px;
  }

  &#{&}--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: 40px;
    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: 0px;
  }

  &#{&}--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: var(--wds-color-fill-standard-primary-disabled);
  }

  @media (hover: hover) {
    &#{&}--skin-standard#{&}--disabled:hover,
    &#{&}--skin-standard#{&}--disabled#{&}--checked:hover {
      color: var(--wds-color-fill-standard-primary-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: var(--wds-color-fill-success-primary-disabled);
  }

  @media (hover: hover) {
    &#{&}--skin-success#{&}--disabled:hover,
    &#{&}--skin-success#{&}--disabled#{&}--checked:hover {
      color: var(--wds-color-fill-success-primary-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: var(--wds-color-fill-destructive-primary-disabled);
  }

  @media (hover: hover) {
    &#{&}--skin-error#{&}--disabled:hover,
    &#{&}--skin-error#{&}--disabled#{&}--checked:hover {
      color: var(--wds-color-fill-destructive-primary-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: var(--wds-color-fill-urgent-primary-disabled);
  }

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

  & &__knob {
    box-shadow: none;
    transition: transform 150ms ease-out;
  }

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

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