.cobalt-Autocomplete {
  @include form-field-container;

  position: relative;

  &:not(.cobalt-Autocomplete--empty) [data-state="open"] {
    border-radius: var(--cobalt-form-input-border-radius)
      var(--cobalt-form-input-border-radius) 0 0;
  }

  &__clear-button:not([hidden]) {
    position: absolute;
    right: 6px;
    top: 0;

    height: 100%;
    display: flex;

    padding: 4px 6px;

    border-width: 0;

    background-color: transparent;

    cursor: pointer;
  }

  &__clear-button:not([hidden]):hover .cobalt-Icon {
    @apply c-fill-onPrimaryContainer;
  }

  &__content:not([hidden]):not(:empty) {
    @apply c-bg-surface c-border-2 c-border-primary;

    z-index: zx(autocomplete-popover);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border-radius: 0 0 8px 8px;
    box-shadow:
      0 2px 2px 0 rgba(0, 0, 0, 0.06),
      0 6px 6px 0 rgba(0, 0, 0, 0.04),
      0 8px 8px 0 rgba(0, 0, 0, 0.06);
    border-top-width: 0;
  }

  &__content:is([open], [data-open], [data-state="open"]) {
    opacity: 1;

    transform: translateY(0);
  }

  &__content .cobalt-Autocomplete__item-icon {
    position: relative;

    top: -2px;

    margin: 0 0 0 -5px;
  }

  &__item:not([data-disabled]) {
    cursor: pointer;
  }

  &__item[data-disabled] {
    @apply c-text-onSurfaceDisabled;
  }

  &__item[data-highlighted] {
    @apply c-bg-surfaceContainerVariant;
  }

  &__item-value {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
  }

  &__item-wrapper {
    @apply c-gap-xs c-py-xs c-pr-2xs c-pl-[11px];

    display: flex;
    justify-content: space-between;

    width: 100%;
  }

  &__item-wrapper--disabled {
    @apply c-text-onSurfaceDisabled;

    cursor: auto;

    .cobalt-Icon {
      fill: theme("colors.onSurfaceDisabled") !important;
    }
  }

  &__item-label {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
  }

  &_selected-item-indicator {
    width: 22px;
  }

  .cobalt-TextField__Input[type] {
    padding-right: 36px;
  }

  .cobalt-TextField__Input[type][data-state="open"] {
    @apply c-border-onPrimaryContainer;
  }

  .cobalt-TextField__Icon {
    @apply c-fill-onSurfaceDisabled;
    opacity: 0.7;
  }

  .cobalt-TextField[data-focus] .cobalt-TextField__Icon {
    @apply c-fill-onPrimaryContainer;
  }

  .cobalt-TextField--withValue .cobalt-TextField__Icon {
    @apply c-fill-onPrimaryContainer;
    opacity: 1;
  }
}