.search-bar {
  max-width: 70rem;

  input[type='text'] {
    background-color: var(--background-2);
    border: var(--border-size) solid var(--foreground-1);
    color: inherit;
    padding: 0.5rem;
    width: 100%;
  }

  ul {
    border: var(--border-size) solid var(--foreground-1);
    border-top: none;
    list-style: none;
    margin: 0;
    max-height: 50vh;
    overflow-y: auto;
    padding: 0;
  }

  li {
    &:nth-child(even) {
      background-color: var(--background-2);
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .search-result,
  .search-state {
    padding: 1rem;
  }

  .search-result {
    display: block;
    text-decoration: none;

    .display {
      font-weight: bold;
    }

    .disambiguation {
      font-size: 60%;
      vertical-align: middle;
    }
  }

  .load-more {
    background-color: var(--background-1);
    border: var(--border-size) solid var(--foreground-1);
    color: var(--foreground-1);
    cursor: pointer;
    padding: 0.5rem;

    &:hover {
      background-color: var(--foreground-1);
      color: var(--background-1);
    }
  }
}