@import 'themes/default';
@import 'themes/bandit';

.Toggle {
  --focus--offset: var(--focus--width);

  display: inline-block;
  height: var(--Toggle__Track____height);
  margin: 0;
  position: relative;
  vertical-align: top;
  width: auto;
}

.Toggle__Track {
  // Track outline
  border-radius: var(--Toggle__Track____radius);
  box-shadow: var(--Toggle__Track____shadow);
  display: inline-block;
  height: var(--Toggle__Track____height);
  margin: 0;
  padding: 0;
  pointer-events: none;
  position: relative;
  text-indent: -5000px;
  width: var(--Toggle__Track____width);

  // Track fill
  &::before {
    background-color: var(--Toggle--unchecked__Track____bg-color);
    border-radius: var(--Toggle__Track____radius);
    content: '';
    display: block;
    height: var(--Toggle__Track____height);
    left: 0;
    position: absolute;
    top: 0;
    transition: var(--Toggle__Track____transition-duration) ease-in-out;
    width: var(--Toggle--unchecked__Track____fill-width);
  }

  // Switch
  &::after {
    background-color: var(--Toggle--unchecked__Switch____bg-color);
    border-radius: var(--Toggle__Switch____radius);
    box-shadow: var(--Toggle--unchecked__Switch____shadow);
    content: '';
    display: block;
    height: var(--Toggle__Switch____height);
    left: var(--Toggle__Switch____left);
    position: absolute;
    top: var(--Toggle__Switch____top);
    transition: var(--Toggle__Switch____transition-duration) ease-in-out;
    width: var(--Toggle__Switch____width);
  }
}

.Toggle__Checkbox {
  appearance: none;
  border-radius: var(--Toggle__Track____radius);
  cursor: pointer;
  font-size: inherit;
  height: 100%;
  margin: 0;
  opacity: 0.1;
  position: absolute;
  width: 100%;

  &:checked + .Toggle__Track {
    // Track fill
    &::before {
      background-color: currentColor;
      width: var(--Toggle--checked__Track____fill-width);
    }

    // Switch
    &::after {
      background-color: var(--Toggle--checked__Switch____bg-color);
      box-shadow: var(--Toggle--checked__Switch____shadow);
      left: calc(
        var(--Toggle__Track____width) - var(--Toggle__Switch____width) -
          var(--Toggle__Switch____left)
      );
    }
  }

  &:disabled {
    cursor: default;
  }

  &:disabled + .Toggle__Track {
    opacity: 0.3;
  }

  &:focus-visible {
    outline: none;

    + .Toggle__Track {
      outline: var(--focus--color) var(--focus--style) var(--focus--width);
      outline-offset: var(--focus--offset);
    }
  }
}

.Toggle.Toggle--ai {
  .Toggle__Checkbox {
    &:checked + .Toggle__Track {
      // Track fill
      &::before {
        background: var(--gradient--ai-reverse-a);
      }
    }
  }
}