.navds-chips {
  display: flex;
  gap: var(--a-spacing-2);
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.navds-chips :where(li) {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}

.navds-chips__chip {
  all: unset;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: var(--a-spacing-05);
  margin: 0;
  padding: 0 var(--a-spacing-3);
  text-decoration: none;
  border-radius: var(--a-border-radius-full);
  min-height: 2rem;
}

.navds-chips--small .navds-chips__chip {
  min-height: 1.5rem;
  padding: 0 var(--a-spacing-2);
}

.navds-chips__toggle {
  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-subtle));
  background-color: var(--ac-chip-toggle-bg, var(--a-surface-action-subtle));
  color: var(--ac-chip-toggle-text, var(--a-text-default));
}

.navds-chips__toggle:hover {
  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-subtle-hover));
  background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-action-subtle-hover));
}

.navds-chips__toggle[aria-pressed="true"] {
  box-shadow: none;
  background-color: var(--ac-chip-toggle-pressed-bg, var(--a-surface-action-selected));
  color: var(--ac-chip-toggle-pressed-text, var(--a-text-on-action));
}

.navds-chips__toggle[aria-pressed="true"]:hover {
  background-color: var(--ac-chip-toggle-pressed-hover-bg, var(--a-surface-action-selected-hover));
}

/* Toggle variant neutral */
.navds-chips__toggle--neutral {
  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-border, var(--a-border-subtle));
  background-color: var(--ac-chip-toggle-neutral-bg, var(--a-surface-neutral-subtle));
  color: var(--ac-chip-toggle-neutral-text, var(--a-text-default));
}

.navds-chips__toggle--neutral:hover {
  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-hover-border, var(--a-border-subtle-hover));
  background-color: var(--ac-chip-toggle-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
}

.navds-chips__toggle--neutral[aria-pressed="true"] {
  box-shadow: none;
  background-color: var(--ac-chip-toggle-neutral-pressed-bg, var(--a-surface-neutral-selected));
  color: var(--ac-chip-toggle-neutral-pressed-text, var(--a-text-on-neutral));
}

.navds-chips__toggle--neutral[aria-pressed="true"]:hover {
  background-color: var(--ac-chip-toggle-neutral-pressed-hover-bg, var(--a-surface-neutral-selected));
}

.navds-chips__toggle:focus-visible {
  box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
}

.navds-chips__toggle[aria-pressed="true"]:focus-visible,
.navds-chips__toggle:active:focus-visible {
  box-shadow:
    inset 0 0 0 1px var(--a-surface-default),
    0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
}

@supports not selector(:focus-visible) {
  .navds-chips__toggle:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
  }

  .navds-chips__toggle[aria-pressed="true"]:focus,
  .navds-chips__toggle:active:focus {
    box-shadow:
      inset 0 0 0 1px var(--a-surface-default),
      0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
  }
}

.navds-chips--medium .navds-chips__toggle--with-checkmark {
  padding-left: var(--a-spacing-1-alt);
}

.navds-chips--small .navds-chips__toggle--with-checkmark {
  padding-left: var(--a-spacing-1);
}

.navds-chips--small .navds-chips__toggle-icon {
  width: 1rem;
  height: 1rem;
}

.navds-chips__removable {
  gap: 0;
}

.navds-chips__removable--action {
  background-color: var(--ac-chip-removable-action-bg, var(--a-surface-action-selected));
  color: var(--ac-chip-removable-action-text, var(--a-text-on-action));
}

.navds-chips__removable--neutral {
  background-color: var(--ac-chip-removable-neutral-bg, var(--a-surface-neutral-subtle));
  color: var(--ac-chip-removable-neutral-text, var(--a-text-default));
  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--a-border-default));
}

.navds-chips__removable-icon {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 1.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--a-border-radius-full);
}

.navds-chips--small .navds-chips__removable-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.navds-chips--small .navds-chips__removable-icon > svg {
  width: 1rem;
}

.navds-chips__removable--action:focus-visible {
  box-shadow:
    inset 0 0 0 1px var(--a-surface-default),
    0 0 0 2px var(--a-border-focus);
}

.navds-chips__removable--neutral:focus-visible {
  box-shadow: 0 0 0 2px var(--a-border-focus);
}

@supports not selector(:focus-visible) {
  .navds-chips__removable--action:focus {
    outline: none;
    box-shadow:
      inset 0 0 0 1px var(--a-surface-default),
      0 0 0 2px var(--a-border-focus);
  }

  .navds-chips__removable--neutral:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--a-border-focus);
  }
}

.navds-chips__removable--action:hover {
  background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
}

.navds-chips__removable--neutral:hover {
  background-color: var(--ac-chip-removable-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-hover-border, var(--a-border-strong));
}

.navds-chips--icon-left {
  padding-left: var(--a-spacing-1-alt);
}

.navds-chips--icon-right {
  padding-right: var(--a-spacing-1-alt);
}

.navds-chips--small .navds-chips--icon-right {
  padding-right: var(--a-spacing-05);
}

@media (forced-colors: active) {
  .navds-chips__chip {
    border: 1px solid transparent;
  }

  .navds-chips__chip:hover {
    background-color: highlighttext;
    color: highlight;
  }

  .navds-chips__chip:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  .navds-chips__chip:where([aria-pressed="true"], :active, :hover) > span {
    forced-color-adjust: none;
  }

  .navds-chips__toggle:active {
    background-color: highlight;
    color: highlighttext;
  }

  .navds-chips__toggle[aria-pressed="true"] {
    background-color: selecteditem;
    color: selecteditemtext;
    border: 1px solid selecteditem;
  }

  .navds-chips__toggle[aria-pressed="true"]:hover {
    background-color: selecteditemtext;
    color: selecteditem;
  }

  .navds-chips__toggle[aria-pressed="true"]:active {
    background-color: highlight;
    color: highlighttext;
  }
}
