.tds-toggle {
  .disabled {
    cursor: not-allowed;
  }

  .toggle-headline {
    font: var(--tds-detail-02);
    letter-spacing: var(--tds-detail-02-ls);
    color: var(--tds-toggle-headline);
    margin-bottom: 12px;

    &.disabled {
      color: var(--tds-toggle-headline-disabled);
    }
  }

  input[type='checkbox'] {
    appearance: initial;
    margin: 0;
    width: 44px;
    height: 24px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;

    &::after,
    &::before {
      content: '';
      position: absolute;
      box-sizing: border-box;
      transition: all var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-scania);
    }

    &::before {
      /* Slider */
      width: 44px;
      height: 24px;
      border-radius: 16px;
      background-color: var(--tds-toggle-off-slider);
      left: 0;
      border: 1px solid transparent;
    }

    /* Switch */
    &::after {
      width: 16px;
      height: 16px;
      background-color: var(--tds-toggle-switch);
      border-radius: 50%;
      left: 4px;
      top: 4px;
    }

    &:focus {
      outline: none;
      outline: 2px solid var(--tds-toggle-border-outline);
      border-radius: 16px;
      outline-offset: 0;

       &::before {
        background-color: var(--tds-toggle-off-slider-focus);
        border: 1px solid var(--tds-toggle-off-border-focus);
      }
    }

    &:hover {
      &::before {
        background-color: var(--tds-toggle-off-slider-hover);
        border: 1px solid var(--tds-toggle-off-border-focus);
      }
    }

    &:checked {
      &::before {
        background-color: var(--tds-toggle-on-slider);
      }

      &:focus {
        &::before {
          background-color: var(--tds-toggle-on-slider-focus);
          border: 1px solid var(--tds-toggle-off-border-focus);
        }
      }

      &:hover {
        &::before {
          background-color: var(--tds-toggle-on-slider-hover);
          border: 1px solid var(--tds-toggle-off-border-focus);
        }
      }

      &::after {
        left: calc(44px - 20px);
      }
    }

    &:disabled {
      cursor: not-allowed;

      &::before {
        background-color: var(--tds-toggle-slider-disabled);
        border: 1px solid var(--tds-toggle-slider-disabled);
      }

      &::after {
        background-color: var(--tds-toggle-switch-disabled);
      }
    }

    &:disabled:checked {
      &::before {
        background-color: var(--tds-toggle-on-slider-disabled);
        border: 1px solid var(--tds-toggle-on-slider-disabled);
      }

      &::after {
        background-color: var(--tds-toggle-switch-disabled);
      }
    }

    &.sm {
      width: 28px;
      height: 16px;

      &::before {
        width: 28px;
        height: 16px;
      }

      &::after {
        width: 8px;
        height: 8px;
      }

      &:checked {
        &::before {
          background-color: var(--tds-toggle-on-slider);
        }

        &::after {
          left: calc(44px - 28px); // slider width - switch width - padding
        }
      }

      &:disabled {
        &::before {
          background-color: var(--tds-toggle-slider-disabled);
          border: 1px solid var(--tds-toggle-slider-disabled);
        }

        &::after {
          background-color: var(--tds-toggle-switch-disabled);
        }
      }
    }
  }

  label {
    display: inline-block;
    vertical-align: middle;
    font: var(--tds-detail-01);
    letter-spacing: var(--tds-detail-01-ls);
    color: var(--tds-toggle-label-color);
    padding-left: 8px;
    cursor: pointer;

    &.disabled {
      color: var(--tds-toggle-label-color-disabled);
    }
  }
}