@use 'sass:math';

.md-toggle-switch {
  $switch-width: 2.75rem;
  $switch-height: math.div($switch-width, 2);
  $thumb-size: 0.635rem;
  $thumb-margin: math.div($switch-height - $thumb-size, 2);
  $transition-time: 150ms;

  appearance: none;
  width: $switch-width;
  height: $switch-height;
  border-radius: math.div($switch-height, 2);
  margin-right: 0.5rem;
  transition: background $transition-time;
  background-color: var(--mds-color-theme-control-inactive-normal);
  border: 1px solid var(--mds-color-theme-outline-input-normal);
  display: flex;
  justify-content: flex-start;
  align-items: center;

  @media (forced-colors: active) {
    background-color: ButtonFace;
    border: 1px solid ButtonBorder !important;
  }

  &:before {
    content: '';
    width: $thumb-size;
    height: $thumb-size;
    border-radius: math.div($thumb-size, 2);
    margin-left: $thumb-margin;
    display: block;
    transition: transform $transition-time;
    background-color: var(--mds-color-theme-text-primary-normal);

    @media (forced-colors: active) {
      background-color: ButtonText;
    }
  }

  &:checked {
    background-color: var(--mds-color-theme-control-active-normal);
    border: none;

    @media (forced-colors: active) {
      background-color: SelectedItem !important;
    }

    &:before {
      background-color: var(--mds-color-theme-inverted-text-primary-normal);
      transform: translateX($switch-width - $switch-height);

      @media (forced-colors: active) {
        background-color: SelectedItemText;
      }
    }
  }

  // Focused
  &:focus {
    border: 1px solid var(--mds-color-theme-outline-input-normal);
    box-shadow: var(--md-globals-focus-ring-box-shadow);

    &:checked {
      border: none;
    }
  }

  // Hovered
  &:hover {
    background-color: var(--mds-color-theme-control-inactive-hover);

    &:before {
      background-color: var(--mds-color-theme-text-primary-normal);

      @media (forced-colors: active) {
        background-color: SelectedItem;
      }
    }

    &:checked {
      background-color: var(--mds-color-theme-control-active-hover);

      &:before {
        background-color: var(--mds-color-theme-inverted-text-primary-normal);
        transform: translateX($switch-width - $switch-height);
      }
    }
  }

  // Pressed
  &:active {
    background-color: var(--mds-color-theme-control-inactive-pressed);

    &:before {
      background-color: var(--mds-color-theme-inverted-text-primary-normal);
    }

    &:checked {
      background-color: var(--mds-color-theme-control-active-pressed);

      &:before {
        background-color: var(--mds-color-theme-inverted-text-primary-normal);
        transform: translateX($switch-width - $switch-height);
      }
    }
  }

  // Disabled
  &:disabled {
    background-color: var(--mds-color-theme-control-inactive-disabled);

    @media (forced-colors: active) {
      background-color: ButtonFace;
      border-color: GrayText;
    }

    &:before {
      background-color: var(--mds-color-theme-text-primary-disabled);

      @media (forced-colors: active) {
        background-color: GrayText;
      }
    }

    &:checked {
      background-color: var(--mds-color-theme-control-active-disabled);

      &:before {
        background-color: var(--mds-color-theme-inverted-text-primary-disabled);
        transform: translateX($switch-width - $switch-height);
      }
    }
  }
}