@use "sass:color";
@use "../../vars" as *;

.header-search {
  max-width: 100%;

  .search-widget {
    margin: 0 auto;
    max-width: 20rem;
    position: relative;
    width: 100%;

    @media (min-width: $screen-md) {
      align-items: center;
      display: flex;
      gap: 0.5rem;
    }
  }

  .search-widget:focus-within .search-input-field,
  .search-input-field:focus,
  .search-input-field:valid {
    width: inherit;

    /* When the search input has focus or has content,
          show the clear search button */
    ~ .button.clear-search-button {
      display: block;
      right: 2.8rem;
    }
  }

  .search-input-field {
    // make webkit play nice with search input types
    -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
    background-color: var(--background-primary);
    border: 1px solid var(--border-primary);
    border-radius: 100px;
    caret-color: var(--text-link);
    color: var(--text-primary);
    height: var(--form-elem-height);
    min-width: 5rem;
    padding-left: 1rem;
    padding-right: 2rem;
    width: 100%;

    @keyframes blink {
      from,
      to {
        text-decoration-line: none;
      }

      50% {
        text-decoration-line: underline;
      }
    }

    @media (min-width: $screen-lg) {
      &:invalid {
        width: 1rem;
      }
    }

    &:invalid,
    &:invalid::placeholder {
      animation: blink 2s step-end infinite;
      caret-color: transparent;

      @media (prefers-reduced-motion: reduce) {
        caret-color: initial;
      }
    }

    &:valid,
    &:valid::placeholder {
      animation: none;
    }

    &:not(:focus):valid,
    &:not(:focus):valid::placeholder {
      text-decoration-line: none;
    }

    &:not(:focus),
    &:not(:focus)::placeholder {
      animation: none;
      text-decoration-line: underline;
    }

    &:not(:focus)::placeholder {
      animation: none;
      text-decoration-line: underline;
    }

    &:focus {
      border-color: var(--category-color);
      box-shadow:
        0 0 0 3px var(--blend-color),
        0 0 0 3px var(--category-color);
      outline: 0 none;
    }

    &,
    &::placeholder {
      font: var(--type-body-l);
      opacity: 1;
      text-decoration-color: var(--text-link);
      text-decoration-thickness: 0.15rem;
      text-underline-offset: 0.1em;
    }
  }

  .server-error {
    color: var(--icon-critical);
    margin: 0;
  }
}

.header-search,
.homepage-hero-search {
  .search-results {
    border: 1px solid var(--border-secondary);
    border-radius: var(--elem-radius);
    box-shadow: var(--shadow-01);
    left: 0;
    position: absolute;
    top: 42px;
    width: 100%;
    z-index: var(--z-index-search-results);

    &,
    a[href],
    mark {
      color: var(--text-primary);
    }

    .indexing-warning {
      color: var(--icon-warning);
    }

    .nothing-found {
      font-style: italic;
      font-variation-settings: "slnt" -10;
    }

    .result-item {
      background: var(--background-secondary);
      border-bottom: 1px solid var(--border-secondary);
      font-size: var(--type-smaller-font-size);
      word-break: break-word;

      &:first-child {
        border-radius: var(--elem-radius) var(--elem-radius) 0 0;
      }

      &:last-child {
        border-radius: 0 0 var(--elem-radius) var(--elem-radius);
      }

      &.nothing-found {
        code {
          font-size: 0.8125rem;
        }
      }

      > * {
        display: block;
        padding: 0.5rem;
      }
    }

    .result-item:hover,
    .result-item.highlight {
      background-color: var(--border-secondary);
    }

    .result-item.qs-collection {
      b::after {
        border: 1px solid var(--text-primary-red);
        border-radius: 0.5rem;
        content: "collection";
        font-size: 0.5rem;
        line-height: 0.5rem;
        margin-bottom: 0.5rem;
        margin-left: 0.5rem;
        padding: 0.125rem;
        vertical-align: super;
      }
    }

    .result-item:hover,
    .result-item:focus {
      cursor: pointer;
    }

    div:last-child {
      border-bottom: 0;
    }

    mark {
      background-color: var(--mark-color);
    }

    small {
      overflow-wrap: break-word;
    }

    a {
      text-overflow: ellipsis;
    }

    div.searchindex-error {
      color: var(--icon-critical);
    }
  }
}

.search-form {
  display: flex;
  position: relative;
}

.button.search-button,
.button.clear-search-button {
  --button-color: var(--icon-secondary);
  --button-height: 1.5rem;
  --button-padding: 0;
  position: absolute;
  right: 0.75rem;
  top: 0.25rem;
  width: 1.5rem;

  &:hover {
    background: transparent;
  }

  @media (min-width: $screen-md) {
    right: 1.2rem;
    width: 1.5rem;
  }
}

.button.clear-search-button {
  display: none;
}