/* Autocomplete */
.form-autocomplete {
  position: relative;

  & .form-autocomplete-input {
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    height: auto;
    min-height: var(--unit-8);
    padding: var(--unit-h);
    background: var(--input-bg-color);

    &.is-focused {
      outline: var(--focus-outline);
      outline-offset: calc(var(--focus-outline-offset) * -1);
    }

    & .form-input {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
      display: inline-block;
      flex: 1 0 auto;
      height: var(--unit-6);
      line-height: var(--unit-4);
      margin: var(--unit-h);
      width: auto;

      &:focus {
        outline: none;
      }
    }
  }

  & .menu {
    left: 0;
    position: absolute;
    top: 100%;
    width: 100%;

    & .menu-item.selected > a,
    & .menu-item > a:hover {
      background: var(--menu-item-hover-bg-color);
      color: var(--menu-item-hover-color);
    }

    & .group-item,
    & .group-item:hover {
      color: var(--tertiary-text-color);
      text-transform: uppercase;
      background: none;
      font-size: 0.6rem;
      font-weight: bold;
    }
  }
}