ujiro99/tlt

@import '../css/mixin.css';

.autocomplete {
  $this: .autocomplete;

  position: absolute;
  z-index: var(--z-index-autocomplete);

  &__menu {
    background: white;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    padding: 0 0 6px;
  }

  &__list {
    overflow: hidden;

    &--focus {
      background: var(--bg-gray-100);
      $(this)__value {
        color: var(--text-600);
        font-weight: bold;
      }
    }
  }

  &__item {
    @mixin interactable;
    font-size: 12px;
    min-width: 160px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
  }

  &__value {
    margin-right: 1em;
  }

  &__name {
    color: var(--text-400);
  }
}