/* Autocomplete */
.form-autocomplete {
  & .form-autocomplete-input {
    box-sizing: border-box;
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    background: var(--input-bg-color);
    height: var(--control-size);
    min-height: var(--control-size);
    padding: 0;

    &.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;
      line-height: var(--unit-4);
      width: 100%;
      height: 100%;
      margin: 0;
      border: none;

      &:focus {
        outline: none;
      }
    }
  }

  &.small {
    .form-autocomplete-input {
      height: var(--control-size-sm);
      min-height: var(--control-size-sm);
    }

    .form-autocomplete-input input {
      padding: 0.05rem 0.3rem;
      font-size: var(--font-size-sm);
    }

    .menu .menu-item {
      font-size: var(--font-size-sm);
    }
  }

  & .menu {
    display: none;
    position: fixed;
    max-height: var(--menu-max-height, 200px);
    overflow: auto;

    & .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;
    }
  }

  & .menu.open {
    display: block;
  }
}