/*
  sizes: .a-chip--xs, .a-chip--lg (small default)
  types: .a-chip--filled (outlined default)
  states: .a-chip--selected, .a-chip--disabled, .a-chip--error
*/

.a-chip {
  --bg: transparent;
  --color: var(--lens-semantic-color-action-secondary-on-secondary);
  --border-color: var(--lens-semantic-color-action-secondary-outline);
  --border-width: var(--lens-semantic-border-width-thin);
  --height: var(--lens-core-spacing-3);
  --radius: var(--lens-semantic-radius-full);
  --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);
  --label-pl: calc(var(--lens-core-spacing-0-5) + var(--lens-core-spacing-0-25));
  --label-pr: calc(var(--lens-core-spacing-0-5) + var(--lens-core-spacing-0-25));
  --icon-size: var(--lens-semantic-icon-size-md);
  --selected-icon-mr: var(--lens-core-spacing-1);
  --remove-focus-offset: var(--lens-semantic-border-width-focus-offset);
  display: inline-flex;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  background: var(--a-chip-bg, var(--bg));
  color: var(--a-chip-color, var(--color));
  box-shadow: inset 0 0 0 var(--a-chip-border-width, var(--border-width))
    var(--a-chip-border-color, var(--border-color));
  border-radius: var(--a-chip-radius, var(--radius));
  font-size: var(--a-chip-font-size, var(--font-size));
  line-height: var(--a-chip-line-height, var(--line-height));
  letter-spacing: var(--a-chip-letter-spacing, var(--letter-spacing));
  transition-property: background, color, border-color, box-shadow;
  transition-duration: var(--a-transition-duration);
  transition-timing-function: var(--a-transition-easing);
  &:is(li) {
    list-style: none;
    padding: 0;
  }
  &:not(.a-chip--disabled) {
    &:has(.a-chip-label:hover) {
      --bg: var(--lens-semantic-color-action-secondary-hover-fill);
    }
    &:has(.a-chip-label:active) {
      --bg: var(--lens-semantic-color-action-secondary-active-fill);
    }
  }
  &:has(.a-chip-label: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);
  }
  &.a-chip--disabled {
    --bg: var(--lens-semantic-color-surface-default);
    --color: var(--lens-semantic-color-action-secondary-on-secondary-disabled);
    --border-color: var(--lens-semantic-color-outline-disabled);
  }
  &.a-chip--filled {
    &:not(.a-chip--selected, .a-chip--error):not(:hover):not(:active) {
      --border-width: var(--lens-core-spacing-0);
      --border-color: transparent;
    }
    --bg: var(--lens-semantic-color-action-secondary-variant);
    &:not(.a-chip--disabled) {
      &:has(.a-chip-label:hover) {
        --bg: var(--lens-semantic-color-action-secondary-hover-fill);
      }
      &:has(.a-chip-label:active) {
        --bg: var(--lens-semantic-color-action-secondary-active-fill);
      }
    }
  }
  &.a-chip--selected {
    --bg: var(--lens-semantic-color-selection-secondary-default);
    &:not(.a-chip--disabled) {
      &:has(.a-chip-label:hover) {
        --bg: var(--lens-semantic-color-selection-secondary-hover);
      }
      &:has(.a-chip-label:active) {
        --bg: var(--lens-semantic-color-selection-secondary-active);
      }
    }
    &:has(.a-chip-selected-icon) {
      --label-pl: var(--lens-core-spacing-0-25);
      --selected-icon-mr: var(--lens-core-spacing-1);
    }
  }
  &:has(.a-chip-remove) {
    --label-pr: var(--lens-core-spacing-1);
    --remove-mr: var(--lens-core-spacing-0-25);
  }
  &.a-chip--error {
    --color: var(--lens-semantic-color-status-error-text);
    --border-color: var(--lens-semantic-color-status-error-default);
    &.a-chip--filled {
      --bg: var(--lens-semantic-color-action-secondary-active-fill);
    }
  }
  &.a-chip--xs {
    --height: var(--lens-core-spacing-2);
    --label-pl: var(--lens-core-spacing-0-5);
    --label-pr: var(--lens-core-spacing-0-5);
    --font-size: var(--lens-semantic-font-label-xs-font-size);
    --line-height: var(--lens-semantic-font-label-xs-line-height);
    --letter-spacing: var(--lens-semantic-font-label-xs-letter-spacing);
    --icon-size: var(--lens-core-spacing-2);
    --remove-focus-offset: calc(-1 * var(--lens-core-spacing-px));
    &:has(.a-chip-remove) {
      --label-pr: var(--lens-core-spacing-0-25);
      --remove-mr: var(--lens-core-spacing-px);
    }
    &.a-chip--selected:has(.a-chip-selected-icon) {
      --label-pl: var(--lens-core-spacing-0);
      --selected-icon-mr: var(--lens-core-spacing-0-25);
    }
  }
  &.a-chip--lg {
    --height: var(--lens-core-spacing-4-5);
    --label-pl: calc(var(--lens-core-spacing-1) + var(--lens-core-spacing-0-5));
    --label-pr: calc(var(--lens-core-spacing-1) + var(--lens-core-spacing-0-5));
    --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);
    --icon-size: var(--lens-semantic-icon-size-lg);
    &:has(.a-chip-remove) {
      --label-pr: var(--lens-core-spacing-1);
      --remove-mr: var(--lens-core-spacing-1);
    }
    &.a-chip--selected:has(.a-chip-selected-icon) {
      --label-pl: var(--lens-core-spacing-1);
      --selected-icon-mr: var(--lens-core-spacing-1);
    }
  }
}

.a-chip-label,
.a-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  &:is(button) {
    appearance: none;
    border: none;
    background: none;
    padding-block: 0;
  }
  & svg {
    fill: var(--a-chip-color, var(--color));
  }
}

.a-chip-label {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  height: var(--a-chip-height, var(--height));
  padding-inline-start: var(--a-chip-padding-start, var(--label-pl));
  padding-inline-end: var(--a-chip-padding-end, var(--label-pr));
  &:is(button):not([disabled]) {
    cursor: pointer;
  }
  &:focus-visible {
    outline: none;
  }
}

.a-chip-remove {
  padding-inline: 0;
  margin-inline-end: var(--remove-mr);
  border-radius: var(--lens-semantic-radius-full);
  &:focus-visible {
    outline: var(--lens-semantic-border-width-focus-width) solid
      var(--lens-semantic-color-ui-focus-ring);
    outline-offset: var(--remove-focus-offset);
  }
  &:not([disabled]) {
    cursor: pointer;
    &:hover svg {
      opacity: 0.65;
    }
    &:active svg {
      opacity: 0.85;
    }
  }
}

.a-chip-remove-icon,
.a-chip-selected-icon {
  width: var(--a-chip-remove-icon-size, var(--icon-size));
  height: var(--a-chip-remove-icon-size, var(--icon-size));
}

.a-chip-selected-icon {
  margin-inline-end: var(--selected-icon-mr);
}

.a-chip-list {
  --gap: var(--a-chip-list-gap, var(--lens-core-spacing-1));
  display: flex;
  padding: 0;
  margin: 0;
  gap: var(--gap);
  &:has(.a-chip.a-chip--xs + .a-chip.a-chip--xs) {
    --gap: var(--lens-core-spacing-0-5);
  }
}