lila/ui/cli/css/_clinput.scss

#clinput {
  display: flex;
  height: $site-header-height;

  input {
    @extend %page-text;

    line-height: $site-header-height;
    background: none;
    padding: 0;
    border: 0;
    width: 0;

    @media (min-width: at-least($x-large)) {
      @include transition(width);
    }

    body.clinput & {
      width: 20ch;
    }
  }

  input:focus {
    outline: none;
  }

  &:has(input:focus) {
    > a {
      color: $c-primary;
    }
  }
}

body.clinput #top {
  @media (max-width: at-most($x-large)) {
    #topnav {
      display: none;
    }
  }

  @media (max-width: at-most($x-small)) {
    .site-title,
    .site-title-nav__donate {
      display: none;
    }
  }

  @media (max-width: at-most($xx-small)) {
    .site-buttons > *:not(#clinput) {
      display: none;
    }

    #clinput {
      width: 75vw;
    }
  }
}

#clinput {
  .complete-result--menu {
    &::before {
      @extend %data-icon;

      content: $licon-GreaterThan;
      display: inline-block;
      text-align: center;
      width: 1.5em;
      color: $c-link;
      opacity: 0.5;
    }

    &:has(+ .user-link) {
      border-bottom: $border;
    }
  }
}