#filter-and-search {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-block-start: 1rem;
  margin-block-end: 1rem;

  &.hidden {
    display: none;
  }

  .search-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 0.5rem;

    .search-wrapper {
      display: flex;
      align-items: center;
      width: 100%;

      border: 1px solid var(--site-outline);
      border-radius: 1rem;
      height: 3rem;
      padding: 0 .5rem;

      &:has(:focus-visible) {
        outline: 2px solid var(--site-primary-color);
        border-color: transparent;
      }

      .leading-icon {
        padding-left: 0.25rem;
        user-select: none;
      }

      input {
        background: none;
        width: 100%;
        font-size: 1rem;
        cursor: text;

        &:focus {
          outline: none;
        }

        &::-webkit-search-cancel-button {
          display: none;
        }
      }
    }
  }

  + section.content-search-results {
    margin-block-start: 0.5rem;
    margin-block-end: 1rem;
  }
}
