$toggle-switch-fill-error: var(--wds-toggle-switch-fill-error, var(--wds-color-fill-dark-primary, #131720));
$toggle-switch-fill-error-hover: var(--wds-toggle-switch-fill-error-hover, var(--wds-color-fill-dark-primary-hover, #42454c));
$toggle-switch-fill-standard: var(--wds-toggle-switch-fill-standard, var(--wds-color-fill-dark-primary, #131720));
$toggle-switch-fill-standard-hover: var(--wds-toggle-switch-fill-standard-hover, var(--wds-color-fill-dark-primary-hover, #42454c));
$toggle-switch-fill-success: var(--wds-toggle-switch-fill-success, var(--wds-color-fill-dark-primary, #131720));
$toggle-switch-fill-success-hover: var(--wds-toggle-switch-fill-success-hover, var(--wds-color-fill-dark-primary-hover, #42454c));
$toggle-switch-fill-urgent: var(--wds-toggle-switch-fill-urgent, var(--wds-color-fill-dark-primary, #131720));
$toggle-switch-fill-urgent-hover: var(--wds-toggle-switch-fill-urgent-hover, var(--wds-color-fill-dark-primary-hover, #42454c));
$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, 16px);
$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-padding: var(--wds-toggle-switch-padding, var(--wds-space-50, 2px));
$toggle-switch-shadow: var(--wds-toggle-switch-shadow, 0 2px 1px 0 rgba(0, 6, 36, 0.42), 0 0 3px 0 rgba(0, 6, 36, 0.12));
$toggle-switch-width-large: var(--wds-toggle-switch-width-large, 40px);
$toggle-switch-width-medium: var(--wds-toggle-switch-width-medium, 28px);
$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;
    }
  }

  & &__knob {
    box-shadow: $toggle-switch-shadow;
  }

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

  &#{&}--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: 16px;
    padding: $toggle-switch-padding;
  }

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

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

  &#{&}--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;
    padding: $toggle-switch-padding;
  }

  &#{&}--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-fill-dark-primary);
  }

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

  &#{&}--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-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-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);
    }
  }
}