.navds-combobox__wrapper {
  --__axc-combobox-icon-size: 1.5rem;
  --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-2);
  --__axc-combobox-list-item-padding-block: var(--ax-spacing-3);
  --__axc-combobox-list-item-padding-inline: var(--ax-spacing-3);
  --__axc-combobox-border-width: 1px;
  --__axc-combobox-input-height: 2rem;

  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  border-radius: var(--ax-border-radius-medium);
}

.navds-form-field:not(:is(.navds-combobox--disabled, .navds-combobox--readonly)) {
  & .navds-combobox__wrapper:hover {
    border-color: var(--ax-border-focus);
  }
}

.navds-form-field--small .navds-combobox__wrapper {
  --__axc-combobox-icon-size: 1.25rem;
  --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-1);
  --__axc-combobox-list-item-padding-block: var(--ax-spacing-1-alt);
  --__axc-combobox-list-item-padding-inline: var(--ax-spacing-2);
  --__axc-combobox-input-height: 1.5rem;
}

.navds-combobox--disabled {
  opacity: var(--ax-opacity-disabled);

  & .navds-combobox__wrapper {
    & *:hover {
      cursor: not-allowed;
    }
  }

  & .navds-combobox__selected-options {
    pointer-events: none;
  }

  & .navds-combobox--readonly {
    pointer-events: none;
  }
}

.navds-combobox--readonly {
  pointer-events: none;

  & .navds-combobox__selected-options {
    & .navds-chips__chip {
      background-color: var(--ax-bg-neutral-moderateA);
    }
  }

  & .navds-combobox__button-toggle-list {
    color: var(--ax-bg-neutral-moderate);
  }

  & .navds-combobox__wrapper {
    border-color: var(--ax-border-subtle);
    overflow: clip;
  }

  & .navds-text-field__input,
  & .navds-combobox__input {
    background-color: var(--ax-bg-neutral-moderate);
  }
}

.navds-combobox__button-toggle-list svg,
.navds-combobox__list svg {
  width: var(--__axc-combobox-icon-size);
  height: var(--__axc-combobox-icon-size);
}

.navds-combobox__wrapper-inner {
  border: 1px solid var(--ax-border-default);
  border-radius: var(--ax-border-radius-medium);

  &:has(.navds-combobox__input:focus-visible) {
    outline: 2px solid var(--ax-border-focus);
    outline-offset: 2px;
    border-color: var(--ax-border-focus);
  }

  &:has(.navds-combobox__input:focus-visible).navds-combobox__wrapper-inner--virtually-unfocused {
    outline: none;
    border-color: var(--ax-border-default);
  }

  &.navds-text-field__input {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-block: calc(var(--__axc-combobox-wrapper-inner-padding) - var(--__axc-combobox-border-width));
    padding-inline: var(--__axc-combobox-wrapper-inner-padding);
  }

  & > :first-child {
    flex: 2;
  }

  & > :last-child {
    display: flex;
    flex-flow: row nowrap;
  }

  &:hover {
    cursor: text;
  }
}

.navds-combobox--error {
  & .navds-combobox__wrapper-inner {
    border-color: var(--ax-border-danger);
    box-shadow: 0 0 0 1px var(--ax-border-danger);

    &:has(.navds-combobox__input:focus-visible) {
      border-color: var(--ax-border-danger);
    }
  }
}

.navds-combobox__selected-options {
  gap: 0;
  align-items: center;

  & > li {
    margin: auto 0;
    border-radius: var(--ax-border-radius-full);
  }

  & > li:last-of-type {
    display: flex;
    flex: 1;
  }

  &[data-type="multiple"] {
    gap: var(--__axc-combobox-wrapper-inner-padding);
  }
}

.navds-combobox__selected-options--no-bg {
  font-family: inherit;
  font-size: var(--ax-font-size-large);
  font-weight: var(--ax-font-weight-regular);
  letter-spacing: 0;
  line-height: var(--ax-font-line-height-large);
  margin: 0;
  padding-left: 0.25rem;
}

.navds-combobox__input-wrapper {
  width: 100%;
}

.navds-combobox__input {
  flex: 1;
  border: none;
  padding: 0;
  margin: 0;
  min-width: 10ch;
  width: 100%;
  height: var(--__axc-combobox-input-height);
  background: var(--ax-bg-input);

  &:focus-visible {
    outline: 0;
    border: none;
  }

  .navds-combobox__selected-options > li:only-child > & {
    margin-left: var(--ax-spacing-1);
  }
}

.navds-combobox__input--hide-caret {
  caret-color: transparent;
}

@supports not selector(:focus-visible) {
  .navds-combobox__input {
    &:focus {
      outline: none;
      border: none;
    }
  }

  .navds-combobox__wrapper-inner {
    &:has(.navds-combobox__input:focus) {
      outline: none;
    }

    &:has(.navds-combobox__input:focus).navds-combobox__wrapper-inner--virtually-unfocused {
      outline: none;
    }
  }
}

.navds-combobox__input::-webkit-search-cancel-button {
  display: none;
}

.navds-combobox__button-toggle-list {
  border-radius: var(--ax-border-radius-medium);
  color: var(--ax-text-default);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 1rem;
  padding: 0;

  &:hover {
    color: var(--ax-text-accent);

    &:active {
      color: var(--ax-text-accent-strong);
    }
  }
}

/* dropdown & non selectable dropdown items */

.navds-combobox__list {
  max-height: 290px;
  overflow: clip;
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  top: calc(100% + var(--ax-spacing-2));
  border: 1px solid var(--ax-border-subtleA);
  display: flex;
  flex-direction: column;
  border-radius: var(--ax-border-radius-large);
  background-color: var(--ax-bg-raised);
  color: var(--ax-text-default);
  overscroll-behavior: contain;
  box-shadow: var(--ax-shadow-dialog);

  & .navds-combobox__list-options {
    overflow-y: auto;
  }
}

.navds-combobox__list--closed {
  display: none;
}

.navds-combobox__list-item,
.navds-combobox__list-item--loading,
.navds-combobox__list-item--no-options,
.navds-combobox__list-item--new-option,
.navds-combobox__list-item--max-selected {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-block: var(--__axc-combobox-list-item-padding-block);
  padding-inline: var(--__axc-combobox-list-item-padding-inline);
  border-radius: var(--ax-border-radius-medium);
  border: 0;
  margin-inline: var(--ax-spacing-2);
  margin-block: var(--ax-spacing-1);
  scroll-margin-block: 8px; /* outline + outline-offset + margin-block */
}

.navds-combobox__list-item--no-options {
  margin: 0;
}

.navds-combobox__list-item--loading {
  justify-content: center;
  margin: 0;
}

.navds-combobox__list-item--max-selected {
  background-color: var(--ax-bg-neutral-moderateA);
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--ax-border-neutral-subtle);
  padding-block: var(--ax-spacing-2);
  line-height: var(--ax-font-line-height-large);
}

/* ul-list and selectable li-items */

.navds-combobox__list-options {
  list-style: none;
  margin: 0;
  display: inherit;
  flex-direction: inherit;
  gap: inherit;
  background-color: inherit;
  align-items: stretch;
  padding: 0;
  padding-block: var(--ax-spacing-1);
}

.navds-combobox__list-item--focus {
  cursor: pointer;
  outline: 2px solid var(--ax-border-focus);
  outline-offset: 2px;
}

.navds-combobox__list-item {
  user-select: none;

  &[data-no-focus="true"] {
    cursor: not-allowed;
    opacity: 0.4;
  }

  & mark {
    background-color: transparent;
    font-weight: var(--ax-font-weight-bold);
  }

  & svg {
    color: var(--ax-text-accent);
  }
}

.navds-combobox__list-item--selected {
  background-color: var(--ax-bg-accent-moderate-pressedA);

  & p {
    font-weight: var(--ax-font-weight-bold);
  }
}

.navds-combobox__list-item--new-option {
  border-bottom: 1px solid var(--ax-border-accent-subtleA);
  border-radius: 0;
  background: var(--ax-bg-accent-moderateA);
  cursor: pointer;
  justify-content: flex-start;
  gap: 0.25rem;
  margin: 0;
  margin-block: calc(var(--ax-spacing-1) * -1);
  padding-block: var(--ax-spacing-4);

  & svg {
    color: var(--ax-text-default);
  }

  &:only-child {
    border: none;
  }
}

.navds-combobox__list-item--new-option--focus {
  border-radius: calc(var(--ax-border-radius-large) - 1px) calc(var(--ax-border-radius-large) - 1px) 0 0;

  /* TODO: new option should get a wrapper div later to
* style it properly with a nice rounded border radius
* */
  outline: 2px solid var(--ax-border-focus);
  outline-offset: -2px;

  &:only-child {
    border-radius: calc(var(--ax-border-radius-large) - 1px);
  }
}

/* Mobile */
@media (max-width: 479px) {
  .navds-combobox__button-toggle-list {
    right: 0.5rem;
  }

  /* add bigger click area for input */
  .navds-combobox__input {
    min-width: min-content;
    padding: 0.75rem 0;
  }

  .navds-combobox__selected-options {
    gap: var(--ax-spacing-1);
  }
}

@media (forced-colors: active) {
  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
    outline-color: highlight;
  }

  .navds-combobox__list-item--focus,
  .navds-combobox__list--with-hover
    .navds-combobox__list-item:not([data-no-focus="true"], .navds-combobox__list-item--new-option):hover {
    border-left-color: highlight;
    color: highlight;
  }

  .navds-combobox__list-item[data-no-focus="true"] {
    opacity: 1;
    color: graytext;
  }

  .navds-combobox__list-item--selected {
    background-color: highlight;
    color: selecteditemtext;

    & * {
      color: black;
    }

    & > * {
      forced-color-adjust: none;
    }
  }

  .navds-combobox__list-item--selected.navds-combobox__list-item--focus,
  .navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
    border-left-color: highlight;
    color: highlight;
  }

  .navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
    color: highlight;
  }

  .navds-combobox__list-item--new-option--focus {
    outline: 2px solid highlight;
    outline-offset: 0;
  }

  .navds-combobox--disabled {
    opacity: 1;

    & * {
      border-color: graytext;
      color: graytext;
      opacity: 1;
    }
  }

  .navds-combobox__list-item--new-option {
    svg {
      color: canvastext;
    }

    &:hover {
      color: highlight;

      svg {
        color: highlight;
      }
    }
  }
}
