.grit-autocomplete-component {
  display: block;
  border-radius: var(--grit-autocomplete-border-radius);
  border: var(--grit-autocomplete-border);
}
.grit-autocomplete-component.error {
  border: 1px solid var(--red500);
}
.grit-autocomplete-component.disabled,
.grit-autocomplete-component .invalid {
  border: none;
}

.listbox {
  overflow-y: auto;
  overflow-x: hidden;
  transition: max-height 0.3s;
  padding: 0;
  margin: 0;
}

.autocomplete-message-wrapper {
  min-height: 24px;
}
.autocomplete-message-wrapper grit-wc-message .message-wrapper {
  color: var(--grit-field-message-active-error-color);
}

#autocomplete-field .grit-field-message-wrapper {
  display: none;
}
#autocomplete-field .grit-control__border {
  border: none;
}

.grit-autocomplete-component.disabled :hover#autocomplete-field .grit-field .grit-control__infix label {
  color: var(--grit-autocomplete-label-color);
}

.animate-in {
  -webkit-animation-name: slide-in;
          animation-name: slide-in;
}

.animate-out {
  opacity: 1;
  -webkit-animation-name: slide-out;
          animation-name: slide-out;
}

.autocomplete-item__spacing {
  margin-left: var(--grit-autocomplete-item-margin-left);
  overflow: hidden;
  box-sizing: border-box;
}

.show-item {
  opacity: 1;
}

grit-wc-autocomplete-item.animate-in.focused, grit-wc-autocomplete-item.show-item.focused, grit-wc-autocomplete-item:hover {
  background-color: var(--grit-autocomplete-background-focus);
}

.suggestions-help {
  position: absolute;
  left: 9999px;
  height: 0px;
  overflow: auto;
}

@-webkit-keyframes slide-in {
  from {
    opacity: 0;
    transform: translate(100px, 0px);
  }
  25% {
    opacity: 0.3;
  }
  to {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translate(100px, 0px);
  }
  25% {
    opacity: 0.3;
  }
  to {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
@-webkit-keyframes slide-out {
  from {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  25% {
    opacity: 0.3;
  }
  to {
    opacity: 0;
    transform: translate(100px, 0px);
  }
}
@keyframes slide-out {
  from {
    opacity: 1;
    transform: translate(0px, 0px);
  }
  25% {
    opacity: 0.3;
  }
  to {
    opacity: 0;
    transform: translate(100px, 0px);
  }
}