---
const { site } = Astro;
---

<search
  itemprop="potentialAction"
  itemscope
  itemtype="https://schema.org/SearchAction"
>
  <link
    rel="dns-prefetch"
    href="https://www.google.com/search"
    itemprop="target"
  >
  <form
    action="https://www.google.com/search"
    target="_blank"
    rel="external noreferrer search"
    role="search"
    autocomplete="on"
    name="search"
  >
    <details>
      <summary itemprop="description">Pesquisar no website</summary>
      <div class="details">
        <p>
          <label>Barra de pesquisa <input
              name="q"
              type="search"
              placeholder={`site:${site} consulta de pesquisa`}
              value={`site:${site} `}
              required
              title={`"site:${site} " é usado para que os resultados da pesquisa fiquem restritos a este website`}
              pattern={`site:${site} .+`}
              size={`site:${site} .+`.length}
              itemprop="query"
            /></label>
        </p>
        <p class="mute">
          <small>Esta pesquisa é efectuada pelo Google e <strong>utiliza
              software proprietário.</strong></small>
        </p>
        <p><button type="submit">🔍 Pesquisar</button></p>
      </div>
    </details>
  </form>
</search>

<style>
  search {
    padding-block-end: calc(var(--size-4) * 1em);
  }

  summary {
    font-size: calc(var(--size-3) * 1rem);
    font-weight: bolder;
  }

  .details {
    border-radius: calc(var(--size-1) * 1em);
    border: 1px solid var(--color-light);
    margin-block-start: calc(var(--size-1) * 1em);
    font-size: calc(var(--size-3) * 1rem);
    padding-inline: calc(var(--size-4) * 1em);
    padding-block: calc(var(--size-2) * 1em);

    & > p {
      margin-block: calc(var(--size-2) * 1em);
      line-height: calc(var(--size-8) * 1rem);
    }

    & input[type="search"] {
      width: 100%;
    }
  }
</style>