.root {
  cursor: pointer;
  user-select: none;

  &:not(.disabled):hover,
  &.open {
    .downIcon {
      color: var(--color-neutral-100);
    }
  }
  &:not(.disabled):hover:not(.open) {
    .arrow {
      padding-top: 4px;
    }
  }

  &.open:not(.ghost) {
    --text-field-bg: var(--color-neutral-20);
    --text-field-hover-bg: var(--color-neutral-20);
    --text-field-focus-border-color: transparent;
  }

  .placeholder,
  &.disabled [data-input] {
    color: var(--text-field-disabled-placeholder-color);
    font-size: var(--text-field-font-size);
  }

  &.disabled * {
    cursor: not-allowed;
  }

  &.variable {
    [data-input] {
      color: var(--color-support-tertiary-40);
    }
  }
  &.open.variable {
    --current-border-color: var(--color-support-tertiary-40);
    --text-field-border-color: var(--color-support-tertiary-40);
  }
}

.autocompleteItem {
  cursor: pointer;
}

.downIcon {
  background: transparent;
  outline: none;
  border: none;
  font-size: 0.845em;
  color: var(--color-neutral-70);
  // opacity: 0;
  transform: translateY(0);
  // color: var(--text-field-placeholder-color);
  transition:
    opacity 0.5s ease-in-out,
    transform 0.3s ease-out;
}

.hiddenSearch {
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

.arrow {
  transition:
    padding-top 0.2s ease-out,
    color 0.2s ease-out;
  height: 100%;
  width: 16px;
  i {
    font-size: 10px !important;
  }
}