/*
  states: .a-toggle--checked (when toggle is decorative, :checked is used for inputs, unchecked default), .a-toggle--disabled
  sizes: .a-toggle--lg (default small)
*/

.a-toggle {
  --bar-bg: var(--lens-semantic-color-action-form-default);
  --bar-border: var(--lens-semantic-color-action-form-outline);
  --bar-border-width: var(--lens-semantic-border-width-thin);
  --bar-radius: var(--lens-semantic-radius-full);
  --bar-height: var(--lens-core-spacing-2);
  --bar-width: var(--lens-core-spacing-4);
  --bar-padding-x: var(--lens-core-spacing-0-25);
  --dot-bg: var(--lens-semantic-color-action-form-default);
  --dot-border: var(--lens-semantic-color-action-form-outline);
  --dot-border-width: var(--lens-semantic-border-width-thin);
  --dot-size: calc(var(--lens-core-spacing-1) + var(--lens-core-spacing-0-25));
  appearance: none;
  margin: 0;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: var(--a-toggle-bar-width, var(--bar-width));
  height: var(--a-toggle-bar-height, var(--bar-height));
  border-radius: var(--a-toggle-bar-radius, var(--bar-radius));
  background: var(--a-toggle-bar-bg, var(--bar-bg));
  border: 1px solid var(--a-toggle-bar-border, var(--bar-border));
  transition-property: background, border-color;
  transition-duration: var(--a-transition-duration);
  transition-timing-function: var(--a-transition-easing);
  &::after {
    content: "";
    display: block;
    box-sizing: border-box;
    flex-shrink: 0;
    width: var(--a-toggle-dot-size, var(--dot-size));
    height: var(--a-toggle-dot-size, var(--dot-size));
    background: var(--a-toggle-dot-bg, var(--dot-bg));
    border: 1px solid var(--a-toggle-dot-border, var(--dot-border));
    border-width: var(--a-toggle-bar-border-width, var(--dot-border-width));
    border-radius: var(--lens-semantic-radius-full);
    transform: translateX(var(--a-toggle-bar-padding-x, var(--bar-padding-x)));
    transition-property: background, border-color, transform;
    transition-duration: var(--a-transition-duration);
    transition-timing-function: var(--a-transition-easing);
  }
  &:checked,
  &.a-toggle--checked {
    --bar-bg: var(--lens-semantic-color-action-form-default-selected);
    --bar-border: var(--lens-semantic-color-action-form-outline-selected);
    --dot-bg: var(--lens-semantic-color-action-form-indicator);
    --dot-border: var(--lens-core-color-transparent);
    &::after {
      transform: translateX(
        calc(
          var(--a-toggle-bar-width, var(--bar-width)) - var(--a-toggle-dot-size, var(--dot-size)) -
            var(--a-toggle-bar-border-width, var(--bar-border-width)) * 2 -
            var(--a-toggle-bar-padding-x, var(--bar-padding-x))
        )
      );
    }
  }
  &:not([disabled], .a-toggle--disabled) {
    cursor: pointer;
    &:focus-visible {
      outline: var(--lens-semantic-border-width-focus-width) solid
        var(--lens-semantic-color-ui-focus-ring);
      outline-offset: var(--lens-semantic-border-width-focus-offset);
    }
    &:not(:checked, .a-toggle--checked) {
      &:hover {
        --bar-bg: var(--lens-semantic-color-action-form-hover);
      }
      &:active {
        --bar-bg: var(--lens-semantic-color-action-form-active);
      }
    }
    &:checked,
    &.a-toggle--checked {
      &:hover {
        --bar-bg: var(--lens-semantic-color-action-form-hover-selected);
      }
      &:active {
        --bar-bg: var(--lens-semantic-color-action-form-active-selected);
      }
    }
  }
  &[disabled],
  &.a-toggle--disabled {
    cursor: not-allowed;
    --dot-bg: var(--lens-semantic-color-action-form-indicator-disabled);
    --dot-border: var(--lens-core-color-transparent);
    &:not(:checked) {
      --bar-bg: var(--lens-semantic-color-action-form-disabled);
      --bar-border: var(--lens-semantic-color-action-form-outline-disabled);
    }
    &:checked,
    &.a-toggle--checked {
      --bar-bg: var(--lens-semantic-color-action-form-disabled-selected);
      --bar-border: var(--lens-core-color-transparent);
    }
  }
  &.a-toggle--lg {
    --bar-height: var(--lens-core-spacing-3);
    --bar-width: var(--lens-core-spacing-6);
    --bar-padding-x: var(--lens-core-spacing-0-5);
    --dot-size: var(--lens-core-spacing-2);
  }
}

.a-toggle-label {
  --font-size: var(--a-toggle-label-font-size, var(--lens-semantic-font-label-sm-font-size));
  --line-height: var(--a-toggle-label-line-height, var(--lens-semantic-font-label-sm-line-height));
  --letter-spacing: var(
    --a-toggle-label-letter-spacing,
    var(--lens-semantic-font-label-sm-letter-spacing)
  );
  --color: var(--a-toggle-label-color, var(--lens-semantic-color-type-default));
  --gap: var(--a-toggle-label-gap, var(--lens-core-spacing-1-5));
  --cursor: var(--a-toggle-label-cursor, pointer);
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  color: var(--color);
  cursor: var(--cursor);
  transition: color var(--a-transition-duration) var(--a-transition-easing);
  &:has(> .a-toggle) {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lens-core-spacing-1-5);
  }
  &:has(> .a-toggle[disabled], > .a-toggle.a-toggle--disabled) {
    --cursor: not-allowed;
    --color: var(--lens-semantic-color-type-disabled);
  }
  &:has(> .a-toggle.a-toggle--lg) {
    --font-size: var(--lens-semantic-font-label-xl-font-size);
    --line-height: var(--lens-semantic-font-label-xl-line-height);
    --letter-spacing: var(--lens-semantic-font-label-xl-letter-spacing);
  }
}