// sass-lint:disable class-name-format
&.inline-search {
  position: relative;
  transition: margin-bottom $transition-duration-large $transition-timing-function-large;

  .ais-StateResults {
    position: absolute;
    top: calc(100% + 4px);
    width: 100%;
    z-index: 100;

    .ais-Hits {
      background: $darker;
      border-radius: $radius;
      box-shadow: $shadow;

      ul {
        list-style: none;
        margin: 0;
        padding: $whitespace;

        li {
          background: $dark;
          border-radius: $radius * .5;
          margin: 0;
          padding: $whitespace;

          a {
            display: block;
            margin: 0;
            padding: 0;
            text-decoration: none;

            &:hover,
            &:focus {
              p {
                &.name {
                  color: $primary-hover;
                }

                &.description {
                  color: $alt;
                }
              }
            }

            p {
              transition: color $transition-duration $transition-timing-function;

              &.name {
                @include font-regular;

                color: $primary;
                font-size: 20px;
                margin: 0 0 ($whitespace * .25);

                span {
                  &.version {
                    font-size: 16px;
                  }
                }
              }

              &.description {
                @include font-regular;

                color: $light;
                font-size: 16px;
                margin: 0;
              }
            }
          }

          + li {
            margin-top: $whitespace;
          }
        }
      }
    }
  }
}
