/*
  A single on/off toggle pill (aria-pressed). Matches the MUI/Angular
  ToggleButton components.
  types: .a-toggle-button--tertiary (secondary/outlined default)
  sizes: .a-toggle-button--sm, .a-toggle-button--xs (medium default)
  state: [aria-pressed="true"] (selected)
  All colours are driven by the Action.Form family (the shared form-control
  selection treatment): unselected hover/active/disabled and the selected state
  resolve to a subtle blue in Atlas Light/Dark and grayscale in Lens. Structure
  (radius, spacing, sizes) mirrors the Button component's low-emphasis variants.
*/

.a-toggle-button {
  --pt: var(--lens-core-spacing-1);
  --pb: var(--lens-core-spacing-1);
  --pl: var(--lens-core-spacing-1-5);
  --pr: var(--lens-core-spacing-1-5);
  --min-height: var(--lens-core-spacing-5);
  --radius: var(--lens-semantic-radius-lg);
  --gap: var(--lens-core-spacing-1);
  --icon-size: var(--lens-semantic-icon-size-lg);
  --font-family: var(--lens-semantic-font-family-label);
  --font-size: var(--lens-semantic-font-text-body-font-size);
  --font-weight: var(--lens-core-font-weight-semi-bold);
  --line-height: var(--lens-semantic-font-text-body-line-height);
  --letter-spacing: var(--lens-semantic-font-text-body-letter-spacing);
  --bg: var(--lens-core-color-transparent);
  --color: var(--lens-semantic-color-action-secondary-on-secondary);
  --border-color: var(--lens-semantic-color-action-form-outline);
  --border-width: var(--lens-semantic-border-width-thin);
  appearance: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-tbs-gap, var(--gap));
  min-height: var(--a-tbs-min-height, var(--min-height));
  padding: calc(var(--a-tbs-padding-top, var(--pt)) - var(--border-width))
    calc(var(--a-tbs-padding-right, var(--pr)) - var(--border-width))
    calc(var(--a-tbs-padding-bottom, var(--pb)) - var(--border-width))
    calc(var(--a-tbs-padding-left, var(--pl)) - var(--border-width));
  background: var(--bg);
  color: var(--color);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--a-tbs-radius, var(--radius));
  font-family: var(--a-tbs-font-family, var(--font-family));
  font-size: var(--a-tbs-font-size, var(--font-size));
  font-weight: var(--a-tbs-font-weight, var(--font-weight));
  line-height: var(--a-tbs-line-height, var(--line-height));
  letter-spacing: var(--a-tbs-letter-spacing, var(--letter-spacing));
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  transition-property: background, color, border-color, box-shadow;
  transition-duration: var(--a-transition-duration);
  transition-timing-function: var(--a-transition-easing);
  &:not([aria-pressed="true"]):not([disabled]):not([aria-disabled="true"]) {
    &:hover {
      --bg: var(--lens-semantic-color-action-form-hover);
    }
    &:active {
      --bg: var(--lens-semantic-color-action-form-active);
    }
  }
  &: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);
    z-index: 1;
  }
  &[disabled],
  &[aria-disabled="true"] {
    cursor: not-allowed;
    --bg: var(--lens-semantic-color-action-form-disabled);
    --color: var(--lens-semantic-color-action-form-indicator-disabled);
    --border-color: var(--lens-semantic-color-action-form-outline-disabled);
  }
  &.a-toggle-button--tertiary {
    --border-color: var(--lens-core-color-transparent);
    &[disabled],
    &[aria-disabled="true"] {
      --border-color: var(--lens-core-color-transparent);
    }
  }
  &[aria-pressed="true"] {
    --bg: var(--lens-semantic-color-action-form-default-selected);
    --color: var(--lens-semantic-color-action-form-indicator);
    &:not([disabled]):not([aria-disabled="true"]) {
      &:hover {
        --bg: var(--lens-semantic-color-action-form-hover-selected);
      }
      &:active {
        --bg: var(--lens-semantic-color-action-form-active-selected);
      }
    }
    &[disabled],
    &[aria-disabled="true"] {
      --bg: var(--lens-semantic-color-action-form-disabled-selected);
      --color: var(--lens-semantic-color-action-form-indicator-disabled);
    }
  }
  &[aria-pressed="true"]:not(.a-toggle-button--tertiary) {
    --border-color: var(--lens-semantic-color-action-form-outline-selected);
    &:not([disabled]):not([aria-disabled="true"]) {
      &:hover {
        --border-color: var(--lens-semantic-color-action-form-outline-hover-selected);
      }
      &:active {
        --border-color: var(--lens-semantic-color-action-form-outline-press-selected);
      }
    }
    &[disabled],
    &[aria-disabled="true"] {
      --border-color: var(--lens-semantic-color-action-form-outline-disabled);
    }
  }
  &.a-toggle-button--sm {
    --min-height: var(--lens-core-spacing-4);
    --radius: var(--lens-semantic-radius-md);
    --pt: var(--lens-core-spacing-0-5);
    --pb: var(--lens-core-spacing-0-5);
    --font-size: var(--lens-semantic-font-label-lg-font-size);
    --line-height: var(--lens-semantic-font-label-lg-line-height);
    --letter-spacing: var(--lens-semantic-font-label-lg-letter-spacing);
    --icon-size: var(--lens-semantic-icon-size-md);
  }
  &.a-toggle-button--xs {
    --min-height: var(--lens-core-spacing-3);
    --radius: var(--lens-semantic-radius-md);
    --pt: var(--lens-core-spacing-0-5);
    --pb: var(--lens-core-spacing-0-5);
    --pl: var(--lens-core-spacing-1);
    --pr: var(--lens-core-spacing-1);
    --gap: var(--lens-core-spacing-0-5);
    --font-size: var(--lens-semantic-font-label-sm-font-size);
    --line-height: var(--lens-semantic-font-label-sm-line-height);
    --letter-spacing: var(--lens-semantic-font-label-sm-letter-spacing);
    --icon-size: var(--lens-semantic-icon-size-md);
  }
  & .a-toggle-button-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--a-tbs-icon-size, var(--icon-size));
    height: var(--a-tbs-icon-size, var(--icon-size));
    &:is(svg),
    & svg {
      fill: currentColor;
      width: 100%;
      height: 100%;
    }
  }
}