.toggle-switch {
  display: inline-flex;
  position: relative;

  /* We're relying on the input to handle mouse events, that's why we need it to cover the entire component */
  & &__input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    cursor: inherit;
  }

  &:not(&--disabled) {
    cursor: pointer;
  }

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

  & &__knob {
    transition: all 300ms ease;
  }

  &#{&}--size-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    width: min-content;
  }

  &#{&}--size-small &__track {
    width: var(--wds-toggle-switch-width-small, 28px);
    height: var(--wds-toggle-switch-knob-size-small, 14px);
    padding: var(--wds-toggle-switch-padding, 1px);
    border-radius: var(--wds-border-radius-full, var(--wds-toggle-switch-knob-size-small, 14px));
    box-sizing: content-box;
  }

  &#{&}--size-small &__knob {
    position: absolute;
    box-sizing: border-box;
    width: var(--wds-toggle-switch-knob-size-small, 14px);
    height: var(--wds-toggle-switch-knob-size-small, 14px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wds-border-radius-full, var(--wds-toggle-switch-knob-size-small, 14px));
    transform: translateX(calc(-1 * (var(--wds-toggle-switch-width-small, 28px) / 2 - var(--wds-toggle-switch-knob-size-small, 14px) / 2)));
  }

  &#{&}--size-small &__knob-icon {
    width: calc(var(--wds-toggle-switch-knob-size-small, 14px) / 2);
    height: calc(var(--wds-toggle-switch-knob-size-small, 14px) / 2);
  }

  &#{&}--size-small &__knob-icon > svg {
    display: block;
    width: 100%;
    height: var(--wds-toggle-switch-knob-text-height, 100%);
    max-height: 100%;
  }

  &#{&}--size-small#{&}--checked &__knob,
  :global([dir='rtl']) &#{&}--size-small &__knob {
    transform: translateX(calc(var(--wds-toggle-switch-width-small, 28px) / 2 - var(--wds-toggle-switch-knob-size-small, 14px) / 2));
  }

  :global([dir='rtl']) &#{&}--size-small#{&}--checked &__knob {
    transform: translateX(calc(-1 * (var(--wds-toggle-switch-width-small, 28px) / 2 - var(--wds-toggle-switch-knob-size-small, 14px) / 2)));
  }

  &#{&}--size-medium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    width: min-content;
  }

  &#{&}--size-medium &__track {
    width: var(--wds-toggle-switch-width-medium, 34px);
    height: var(--wds-toggle-switch-knob-size-medium, 18px);
    padding: var(--wds-toggle-switch-padding, 1px);
    border-radius: var(--wds-border-radius-full, var(--wds-toggle-switch-knob-size-medium, 18px));
    box-sizing: content-box;
  }

  &#{&}--size-medium &__knob {
    position: absolute;
    box-sizing: border-box;
    width: var(--wds-toggle-switch-knob-size-medium, 18px);
    height: var(--wds-toggle-switch-knob-size-medium, 18px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wds-border-radius-full, var(--wds-toggle-switch-knob-size-medium, 18px));
    transform: translateX(calc(-1 * (var(--wds-toggle-switch-width-medium, 34px) / 2 - var(--wds-toggle-switch-knob-size-medium, 18px) / 2)));
  }

  &#{&}--size-medium &__knob-icon {
    width: calc(var(--wds-toggle-switch-knob-size-medium, 18px) / 2);
    height: calc(var(--wds-toggle-switch-knob-size-medium, 18px) / 2);
  }

  &#{&}--size-medium &__knob-icon > svg {
    display: block;
    width: 100%;
    height: var(--wds-toggle-switch-knob-text-height, 100%);
    max-height: 100%;
  }

  &#{&}--size-medium#{&}--checked &__knob,
  :global([dir='rtl']) &#{&}--size-medium &__knob {
    transform: translateX(calc(var(--wds-toggle-switch-width-medium, 34px) / 2 - var(--wds-toggle-switch-knob-size-medium, 18px) / 2));
  }

  :global([dir='rtl']) &#{&}--size-medium#{&}--checked &__knob {
    transform: translateX(calc(-1 * (var(--wds-toggle-switch-width-medium, 34px) / 2 - var(--wds-toggle-switch-knob-size-medium, 18px) / 2)));
  }

  &#{&}--size-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
    width: min-content;
  }

  &#{&}--size-large &__track {
    width: var(--wds-toggle-switch-width-large, 46px);
    height: var(--wds-toggle-switch-knob-size-large, 22px);
    padding: var(--wds-toggle-switch-padding, 1px);
    border-radius: var(--wds-border-radius-full, var(--wds-toggle-switch-knob-size-large, 22px));
    box-sizing: content-box;
  }

  &#{&}--size-large &__knob {
    position: absolute;
    box-sizing: border-box;
    width: var(--wds-toggle-switch-knob-size-large, 22px);
    height: var(--wds-toggle-switch-knob-size-large, 22px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wds-border-radius-full, var(--wds-toggle-switch-knob-size-large, 22px));
    transform: translateX(calc(-1 * (var(--wds-toggle-switch-width-large, 46px) / 2 - var(--wds-toggle-switch-knob-size-large, 22px) / 2)));
  }

  &#{&}--size-large &__knob-icon {
    width: calc(var(--wds-toggle-switch-knob-size-large, 22px) / 2);
    height: calc(var(--wds-toggle-switch-knob-size-large, 22px) / 2);
  }

  &#{&}--size-large &__knob-icon > svg {
    display: block;
    width: 100%;
    height: var(--wds-toggle-switch-knob-text-height, 100%);
    max-height: 100%;
  }

  &#{&}--size-large#{&}--checked &__knob,
  :global([dir='rtl']) &#{&}--size-large &__knob {
    transform: translateX(calc(var(--wds-toggle-switch-width-large, 46px) / 2 - var(--wds-toggle-switch-knob-size-large, 22px) / 2));
  }

  :global([dir='rtl']) &#{&}--size-large#{&}--checked &__knob {
    transform: translateX(calc(-1 * (var(--wds-toggle-switch-width-large, 46px) / 2 - var(--wds-toggle-switch-knob-size-large, 22px) / 2)));
  }

  &#{&}--skin-standard &__track {
    background-color: currentColor;
  }

  &#{&}--skin-standard &__knob {
    background-color: var(--wds-color-fill-standard-tertiary, white);
  }

  &#{&}--skin-standard &__knob-icon {
    fill: currentColor;
  }

  &#{&}--skin-standard {
    color: var(--wds-toggle-switch-fill-standard, #d6e6fe);
  }

  @media (hover: hover) {
    &#{&}--skin-standard:hover {
      color: var(--wds-toggle-switch-fill-standard-hover, #a8caff);
    }
  }

  &#{&}--skin-standard#{&}--checked {
    color: var(--wds-toggle-switch-fill-standard-active, #116dff);
  }

  &#{&}--skin-standard#{&}--disabled,
  &#{&}--skin-standard#{&}--disabled#{&}--checked {
    color: var(--wds-toggle-switch-fill-standard-disabled, #acafc4);
  }

  @media (hover: hover) {
    &#{&}--skin-standard#{&}--checked:hover {
      color: var(--wds-toggle-switch-fill-standard-active-hover, #5999ff);
    }

    &#{&}--skin-standard#{&}--disabled:hover,
    &#{&}--skin-standard#{&}--disabled#{&}--checked:hover {
      color: var(--wds-toggle-switch-fill-standard-disabled, #acafc4);
    }
  }

  &#{&}--skin-success &__track {
    background-color: currentColor;
  }

  &#{&}--skin-success &__knob {
    background-color: var(--wds-color-fill-standard-tertiary, white);
  }

  &#{&}--skin-success &__knob-icon {
    fill: currentColor;
  }

  &#{&}--skin-success {
    color: var(--wds-toggle-switch-fill-success, #c8e8d6);
  }

  @media (hover: hover) {
    &#{&}--skin-success:hover {
      color: var(--wds-toggle-switch-fill-success-hover, #87cea5);
    }
  }

  &#{&}--skin-success#{&}--checked {
    color: var(--wds-toggle-switch-fill-success-active, #25a55a);
  }

  &#{&}--skin-success#{&}--disabled,
  &#{&}--skin-success#{&}--disabled#{&}--checked {
    color: var(--wds-toggle-switch-fill-success-disabled, #acafc4);
  }

  @media (hover: hover) {
    &#{&}--skin-success#{&}--checked:hover {
      color: var(--wds-toggle-switch-fill-success-active-hover, #51b77b);
    }

    &#{&}--skin-success#{&}--disabled:hover,
    &#{&}--skin-success#{&}--disabled#{&}--checked:hover {
      color: var(--wds-toggle-switch-fill-success-disabled, #acafc4);
    }
  }

  &#{&}--skin-error &__track {
    background-color: currentColor;
  }

  &#{&}--skin-error &__knob {
    background-color: var(--wds-color-fill-standard-tertiary, white);
  }

  &#{&}--skin-error &__knob-icon {
    fill: currentColor;
  }

  &#{&}--skin-error {
    color: var(--wds-toggle-switch-fill-error, #fbd0cd);
  }

  @media (hover: hover) {
    &#{&}--skin-error:hover {
      color: var(--wds-toggle-switch-fill-error-hover, #f69891);
    }
  }

  &#{&}--skin-error#{&}--checked {
    color: var(--wds-toggle-switch-fill-error-active, #e62214);
  }

  &#{&}--skin-error#{&}--disabled,
  &#{&}--skin-error#{&}--disabled#{&}--checked {
    color: var(--wds-toggle-switch-fill-error-disabled, #acafc4);
  }

  @media (hover: hover) {
    &#{&}--skin-error#{&}--checked:hover {
      color: var(--wds-toggle-switch-fill-error-active-hover, #ff6d63);
    }

    &#{&}--skin-error#{&}--disabled:hover,
    &#{&}--skin-error#{&}--disabled#{&}--checked:hover {
      color: var(--wds-toggle-switch-fill-error-disabled, #acafc4);
    }
  }

  &#{&}--skin-urgent &__track {
    background-color: currentColor;
  }

  &#{&}--skin-urgent &__knob {
    background-color: var(--wds-color-fill-standard-tertiary, white);
  }

  &#{&}--skin-urgent &__knob-icon {
    fill: currentColor;
  }

  &#{&}--skin-urgent {
    color: var(--wds-toggle-switch-fill-urgent, #fddbc8);
  }

  @media (hover: hover) {
    &#{&}--skin-urgent:hover {
      color: var(--wds-toggle-switch-fill-urgent-hover, #fcbd9c);
    }
  }

  &#{&}--skin-urgent#{&}--checked {
    color: var(--wds-toggle-switch-fill-urgent-active, #fe620f);
  }

  &#{&}--skin-urgent#{&}--disabled,
  &#{&}--skin-urgent#{&}--disabled#{&}--checked {
    color: var(--wds-toggle-switch-fill-urgent-disabled, #acafc4);
  }

  @media (hover: hover) {
    &#{&}--skin-urgent#{&}--checked:hover {
      color: var(--wds-toggle-switch-fill-urgent-active-hover, #f05300);
    }

    &#{&}--skin-urgent#{&}--disabled:hover,
    &#{&}--skin-urgent#{&}--disabled#{&}--checked:hover {
      color: var(--wds-toggle-switch-fill-urgent-disabled, #acafc4);
    }
  }

  &#{&}--focus-visible &__track {
    box-shadow: 0 0 0 3px var(--wds-color-blue-300, #a6d0ff);
  }

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