.combobox-view {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  width: 100%;
  min-width: 0;
}

.combobox-view .combobox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

.combobox-view .combobox-label-text {
  font-family: var(--typography-font-sans);
  font-size: var(--font-size-medium-16);
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-base);
}

.combobox-view .combobox-optional-flag {
  font-family: var(--typography-font-sans);
  font-size: var(--font-size-medium-16);
  font-weight: var(--font-weight-normal);
  color: var(--color-subtle);
}

.combobox-view .combobox-input-wrapper {
  position: relative;
  min-width: 0;
}

.combobox-view .combobox-input-wrapper .text-input-input {
  padding-inline-end: calc((var(--spacing-12) + var(--size-icon-medium)) + var(--spacing-8));
}

.combobox-view .combobox-toggle {
  position: absolute;
  inset-block-start: 0;
  inset-block-end: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(((var(--border-width-base) + var(--spacing-12)) + var(--size-icon-medium)) + var(--spacing-12));
  padding: 0;
  color: var(--color-subtle);
  background-color: var(--background-color-transparent);
  border: none;
  cursor: var(--cursor-base-hover);
}

.combobox-view .combobox-toggle:disabled {
  color: var(--color-disabled);
  cursor: var(--cursor-not-allowed);
}

.combobox-view .combobox-menu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  inset-inline-end: 0;
  margin-block-start: var(--spacing-4);
  background-color: var(--background-color-base);
  border: var(--border-width-base) solid var(--border-color-subtle);
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-medium);
  z-index: var(--z-index-dropdown);
  display: none;
  overflow: hidden;
}

.combobox-view .combobox-menu[data-open='true'] {
  display: block;
}

.combobox-view .combobox-listbox {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
}

.combobox-view .combobox-option {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-2);
  min-height: var(--min-size-interactive-touch);
  padding: var(--spacing-8);
  font-family: var(--typography-font-sans);
  font-size: var(--font-size-medium-16);
  line-height: var(--line-height-small-22);
  color: var(--color-base);
  background-color: var(--background-color-transparent);
  cursor: var(--cursor-base-hover);
  box-sizing: border-box;
}

.combobox-view .combobox-option-display-text {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.combobox-view .combobox-option-alt-text {
  font-size: var(--font-size-medium-16);
  color: var(--color-subtle);
  white-space: normal;
  overflow-wrap: anywhere;
}

.combobox-view .combobox-option[data-depth='0'] .combobox-option-display-text {
  font-weight: var(--font-weight-semi-bold);
}

.combobox-view .combobox-option[data-depth='1'] {
  padding-inline-start: var(--spacing-32);
}

.combobox-view .combobox-option[data-hidden='true'] {
  display: none;
}

.combobox-view .combobox-option[data-chosen='true'], .combobox-view .combobox-option[aria-selected='true'], .combobox-view .combobox-option:hover {
  background-color: var(--background-color-blue);
  color: var(--color-on-solid);
}

.combobox-view .combobox-option[data-chosen='true'] *, .combobox-view .combobox-option[aria-selected='true'] *, .combobox-view .combobox-option:hover * {
  color: var(--color-on-solid) !important;
}

.combobox-view .combobox-note {
  padding: var(--spacing-8);
  min-height: var(--min-size-interactive-touch);
  box-sizing: border-box;
  font-family: var(--typography-font-sans);
  font-size: var(--font-size-medium-16);
  line-height: var(--line-height-small-22);
  color: var(--color-subtle);
  border-block-start: var(--border-width-base) solid var(--border-color-subtle);
}