@layer components {
  .search-form {
    position: relative;
  }

  .search-icon {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 1rem;
    
    color: var(--color-neutral-600);
    
    translate: 0 -50%;
    pointer-events: none;
  }

  .search-input {
    inline-size: 100%;
    block-size: 3rem;
    padding-inline: 2.75rem 1rem;

    font-size: var(--font-size-base);
    color: var(--color-neutral);

    background-color: var(--color-white);
    
    border: none;
    border-block-end: 1px solid var(--color-neutral-200);
    
    appearance: none;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);

    &::placeholder {
      color: var(--color-neutral-600);
    }
  }

  .search-results {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: 10;
    margin: unset;
    padding: unset;
    max-block-size: 24rem;
    overflow-y: auto;

    list-style: none;
    
    background-color: var(--color-white);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }

  .search-result {
    display: block;
    padding: 0.5rem 1rem;

    border-block-end: 1px solid var(--color-neutral-200);
    
    cursor: pointer;
    transition: background-color var(--transition-speed);

    &:hover, &[aria-selected="true"] {
      background-color: var(--color-neutral-100);
    }
  }

  .search-result-title {
    display: block;
    
    font-weight: 700;

    color: var(--color-primary);
    
    transition: color var(--transition-speed);
  }

  .search-result-category {
    display: block;

    font-size: var(--font-size-sm);
  }

  .search-no-results {
    padding: 1rem;
  }
}