@use 'mixins/a11y';


.search-block--md:has(.search__toggle[aria-expanded="true"]) .exposed-form {
  @apply grid;
}

:where(.search-block--md) .exposed-form {
  @apply hidden xl:grid items-center text-sm w-full;

  --toggled-display-override: grid;

  grid-template-columns: 1fr auto;

  > .form-item {
    @apply col-span-2 col-start-1 row-start-1;
  }

  > .form-actions {
    @apply z-10 col-span-1 col-start-2 row-start-1 mr-[3px];
  }

  .form-textfield {
    @apply rounded-3xl bg-no-repeat ps-4 text-sm;
  }

  .form-item-query {
    @apply relative my-2 md:my-0;

    label {
      @apply absolute left-4 top-2 z-10 text-zinc-500 normal-case;
    }

    &:focus,
    &:hover,
    &:focus-within,
    &:has(input:focus, input:valid) {
      label {
        @apply top-1 text-white;

        @media (prefers-reduced-motion: no-preference) {
          @apply left-4 top-0 text-[4px] text-zinc-200 transition-all ease-in-out;
        }
      }
    }
  }

  .form-textfield.form-control {
    @apply w-full font-light text-black focus:border-sky-600 focus-visible:border-sky-600;

    &:valid,
    &:focus {
      // Firefox doesn't understand :has yet, so can't move label. Grief!!
      position: relative;
      z-index: 10;
    }
  }

  .btn--reset {
    @apply hidden;
  }

  .btn--submit {
    @apply h-8 w-8 rounded-full border-0 bg-transparent transition-all duration-300 ease-in-out hover:bg-transparent;

    background-position: center;
    background-image: svg-load('search.svg', 'fill:#aaa');
    text-indent: -5000em;
    background-size: 1.5rem;
    background-repeat: no-repeat;
    box-shadow: none;

    &:hover,
    &:focus,
    &:focus-visible {
      @apply outline outline-2 outline-zinc-300/50 transition duration-300 ease-in-out;

      background-image: svg-load('search.svg', 'fill:#000');
    }
  }
}

// Search Toggle with sibling Search form
.search__toggle {
  @apply flex xl:hidden;

  .material-symbols-sharp {
    margin-inline: auto;
  }
}

