.typeahead-container {
  position: relative;

  input {
    width: 100%;
  }

  .typeahead-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 2px;
    padding: 0;
    list-style: none;
    border: 1px solid var(--color-border-secondary);
    border-radius: var(--border-radius-xs);
    background: var(--color-bg-primary);
    box-shadow: 0 4px 12px var(--color-shadow-sm-01);

    li {
      padding: 8px 12px;
      color: var(--color-text-secondary);
      font-size: var(--font-size-sm);
      line-height: 16px;
      cursor: pointer;

      strong {
        display: block;
        font-weight: var(--weight-medium);
      }

      .meta {
        color: var(--color-text-tertiary);
        font-size: var(--font-size-xs);
        font-weight: var(--weight-regular);
        line-height: 14px;
      }

      &.empty {
        color: var(--color-text-quaternary);
        font-weight: var(--weight-regular);
      }

      &.is-active,
      &:hover {
        background: var(--color-bg-primary_hover);
      }
    }
  }
}