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

  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

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

.navds-combobox--disabled {
  opacity: 0.3;
}

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

.navds-combobox--disabled .navds-text-field__input {
  border: 1px solid var(--a-border-default);
}

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

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

.navds-combobox--readonly .navds-combobox__button-toggle-list {
  color: var(--a-gray-500);
}

.navds-combobox--readonly .navds-text-field__input,
.navds-combobox--readonly .navds-combobox__input {
  background-color: var(--a-surface-subtle);
  border-color: var(--a-border-subtle);
}

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

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

.navds-combobox__wrapper-inner > :first-child {
  flex: 2;
}

.navds-combobox__wrapper-inner > :last-child {
  display: flex;
  flex-flow: row nowrap;
}

.navds-combobox__wrapper-inner:hover {
  cursor: text;
}

.navds-combobox--error .navds-text-field__input:not(:hover, :disabled) {
  border-color: var(--ac-combobox-error-border, var(--a-border-danger));
  box-shadow: 0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger));
}

.navds-combobox--error
  .navds-text-field__input:not(:hover, :disabled, .navds-combobox__wrapper-inner--virtually-unfocused):focus-within {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow:
    0 0 0 1px var(--ac-combobox-error-border, var(--a-border-danger)),
    var(--a-shadow-focus);
}

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

.navds-combobox__selected-options > li {
  margin: auto 0;
  border-radius: var(--a-border-radius-full);
}

.navds-combobox__selected-options > li:last-of-type {
  display: flex;
  flex: 1;
}

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

.navds-combobox__selected-options[data-type="multiple"] {
  gap: var(--__ac-combobox-wrapper-inner-padding);
}

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

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

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

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

.navds-combobox__input:focus-visible {
  outline: none;
  border: none;
  box-shadow: none;
}

.navds-combobox__wrapper-inner:has(.navds-combobox__input:focus-visible) {
  box-shadow: var(--a-shadow-focus);
  outline: 3px solid transparent;
  outline-offset: 2px;
}

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

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

  .navds-combobox__wrapper-inner:has(.navds-combobox__input:focus) {
    box-shadow: var(--a-shadow-focus);
    outline: 3px solid transparent;
    outline-offset: 2px;
  }

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

@supports not selector(:has) {
  .navds-combobox--focused .navds-combobox__wrapper-inner {
    box-shadow: var(--a-shadow-focus);
    outline: 3px solid transparent;
    outline-offset: 2px;
  }

  .navds-combobox--focused .navds-combobox__wrapper-inner.navds-combobox__wrapper-inner--virtually-unfocused {
    box-shadow: none;
    outline: none;
  }
}

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

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

.navds-combobox__button-toggle-list:active:hover {
  color: var(--a-text-action);
}

.navds-combobox__button-toggle-list:hover {
  color: var(--a-text-action-selected);
}

.navds-combobox__button-toggle-list:focus-visible {
  box-shadow:
    0 0 0 1px var(--a-surface-default) inset,
    var(--a-shadow-focus);
  box-shadow: var(--a-shadow-focus);
  outline: none;
}

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

/* dropdown & non selectable dropdown items */

.navds-combobox__list {
  max-height: 290px;
  overflow-y: auto;
  position: absolute;
  left: 0;
  right: 0;
  z-index: var(--a-z-index-popover);
  top: calc(100% + var(--a-spacing-2));
  border: 1px solid var(--ac-combobox-list-border-color, var(--a-border-divider));
  display: flex;
  flex-direction: column;
  box-shadow: var(--a-shadow-small);
  border-radius: var(--a-border-radius-medium);
  background-color: var(--ac-combobox-list-bg, var(--a-surface-default));
  color: var(--ac-combobox-list-text, var(--a-text-default));
  overscroll-behavior: contain;
}

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

.navds-combobox__list_non-selectables {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.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;
  flex-direction: row;
  justify-content: space-between;
  padding-block: var(--__ac-combobox-list-item-padding-block);
  padding-inline: var(--__ac-combobox-list-item-padding-inline);
  width: 100%;
  background-color: var(--ac-combobox-list-item-bg, var(--a-surface-default));
}

.navds-combobox__list:has(.navds-combobox__list_non-selectables) .navds-combobox__list-item {
  scroll-margin-top: 48px;
}

.navds-combobox__list-item--loading {
  justify-content: center;
  background-color: var(--ac-combobox-list-item-loading-bg, var(--a-surface-default));
}

.navds-combobox__list-item--max-selected {
  background: var(--ac-combobox-list-item-max-selected-bg, var(--a-surface-info-subtle));
  border-start-start-radius: calc(var(--a-border-radius-medium) - 1px);
  border-start-end-radius: calc(var(--a-border-radius-medium) - 1px);
  border: 1px solid var(--ac-combobox-list-item-max-selected-border, var(--a-border-info));
}

.navds-combobox__list_non-selectables:hover {
  cursor: default;
}

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

.navds-combobox__list-options {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: inherit;
  flex-direction: inherit;
  gap: inherit;
  background-color: inherit;
  align-items: flex-start;
}

.navds-combobox__list-item--focus,
.navds-combobox__list--with-hover
  .navds-combobox__list-item:where(:not([data-no-focus="true"], .navds-combobox__list-item--new-option)):hover {
  background-color: var(--ac-combobox-list-item-hover-bg, var(--a-surface-hover));
  cursor: pointer;
  border-left: 4px solid var(--ac-combobox-list-item-hover-border-left, var(--a-border-strong));
  padding-inline-start: calc(var(--__ac-combobox-list-item-padding-inline) - 4px);
}

.navds-combobox__list-item[data-no-focus="true"] {
  cursor: not-allowed;
  opacity: 0.4;
}

.navds-combobox__list-item--selected {
  background-color: var(--ac-combobox-list-item-selected-bg, var(--a-surface-selected));
}

.navds-combobox__list-item--selected p {
  font-weight: var(--a-font-weight-bold);
}

.navds-combobox__list-item--selected.navds-combobox__list-item--focus,
.navds-combobox__list--with-hover .navds-combobox__list-item--selected:hover {
  background-color: var(--ac-combobox-list-item-selected-hover-bg, var(--a-surface-action-subtle-hover));
  border-left: 4px solid var(--ac-combobox-list-item-selected-hover-border-left, var(--a-border-focus));
}

.navds-combobox__list-item--new-option {
  border-bottom: 1px solid var(--a-border-divider);
  background: var(--a-surface-neutral-subtle);
  cursor: pointer;
  justify-content: flex-start;
  gap: 0.25rem;
}

.navds-combobox__list--with-hover .navds-combobox__list-item--new-option:hover {
  border-bottom: 1px solid var(--a-border-divider);
  background: var(--a-surface-neutral-subtle-hover);
}

.navds-combobox__list-item--new-option--focus {
  box-shadow:
    var(--a-shadow-focus) inset,
    var(--a-border-action) 0 0 0 5px inset;
  border-radius: calc(var(--a-border-radius-medium) - 1px);
}

.navds-combobox__list-item mark {
  background-color: transparent;
  font-weight: bold;
}

/* 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(--a-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: selecteditem;
    color: selecteditemtext;
  }

  .navds-combobox__list-item--selected > * {
    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: -3px;
  }
}
