angular/adev/shared-docs/components/search-dialog/search-dialog.component.scss

dialog {
  background-color: transparent;
  border: none;
  padding-block-end: 3rem;
  margin: 0 auto;
  top: 15vh;

  &::backdrop {
    backdrop-filter: blur(5px);
  }
}

.docs-search-container {
  width: 750px;
  max-width: 90vw;
  background-color: var(--page-background);
  border: 1px solid var(--senary-contrast);
  border-radius: 0.25rem;
  box-sizing: border-box;

  .docs-search-input {
    border-radius: 0.25rem 0.25rem 0 0;
    border: none;
    border-block-end: 1px solid var(--senary-contrast);
    height: 2.6875rem; // 43px;
    padding-inline-start: 1rem;
    position: relative;
  }

  .docs-search-results {
    max-height: 50vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style-type: none;
    padding-inline: 0;
    padding-block-start: 1rem;
    padding-block-end: 1rem;
    margin: 0;
    border-block-end: 1px solid var(--senary-contrast);

    .docs-search-result {
      border-inline-start: 2px solid var(--senary-contrast);
      margin-inline-start: 1rem;
      display: block;
      font-size: 0.875rem;

      .docs-search-result-icon {
        display: inline-block;
        flex-shrink: 0;

        i {
          display: flex;
          align-items: center;
          font-size: 1.2rem;
        }
      }

      /**
      * This rule needs ng-deep to be applied to elements that are created via a [innerHTML] binding
      */
      ::ng-deep {
        mark {
          background: #e62600;
          background: var(--red-to-orange-horizontal-gradient);
          background-clip: text;
          -webkit-background-clip: text;
          color: transparent;
        }
      }

      a {
        color: var(--secondary-contrast);
        display: flex;
        justify-content: space-between;
        padding: 1rem;
        gap: 0.5rem;
      }

      &__label,
      &__sub-label,
      &__content {
        transition: color 0.3s ease;
      }

      &__label,
      &__sub-label {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin: 0;
      }

      &__label {
        font-weight: 600;

        &__text {
          display: flex;
          flex-wrap: wrap;
          align-items: baseline;
          gap: 0.25rem 0.5rem;
          flex: 1;
          min-width: 0;
          overflow-wrap: break-word;

          > * {
            min-width: 0;
          }
        }

        &__package {
          font-size: 0.75rem;
        }
      }

      &__content,
      &__category {
        margin: 0;
      }

      &__sub-label,
      &__content {
        margin-block-start: 0.375rem;
        margin-inline-start: 2rem;
        color: var(--quaternary-contrast);
      }

      &__category {
        font-weight: 400;
        color: var(--quaternary-contrast);
      }

      &.active {
        background-color: var(--septenary-contrast); // stylelint-disable-line
      }

      &:hover,
      &.active {
        background-color: var(--octonary-contrast); // stylelint-disable-line
        border-inline-start: 2px solid var(--primary-contrast);

        .docs-search-result__label,
        .docs-search-result__sub-label,
        .docs-search-result__content {
          color: var(--primary-contrast);
        }
      }
    }
  }
}

.docs-search-results__start-typing,
.docs-search-results__no-results {
  padding: 0.75rem;
  color: var(--quaternary-contrast);
}

.docs-search-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--quaternary-contrast);
  padding: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: var(--page-background);
  border-radius: 0 0 0.25rem 0.25rem;
  container-type: inline-size;
  container-name: footer;

  .docs-search-commands {
    display: flex;
    list-style: none;
    gap: 1rem;
    margin: 0;
    padding: 0;

    li {
      display: flex;
      gap: 0.25rem;
    }

    .docs-search-commands-key {
      display: flex;
      align-items: center;
    }
  }

  @container footer (max-width: 600px) {
    .docs-search-commands li {
      display: none;
    }
  }

  .docs-algolia {
    display: flex;
    gap: 0.25rem;
    align-items: center;
  }

  docs-algolia-icon {
    display: block;
    margin-block-start: 5px;
    margin-inline-start: 0.15rem;
    width: 4rem;
  }
}