.pagefind-ui__form {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-auto-flow: row;
  column-gap: 1rem;
  .pagefind-ui__search-input {
    border-radius: var(--space-xs);
    border: 2px solid color-mix(in srgb, var(--lavender) 50%, transparent);
    outline: transparent;
    /* For some reason pagefind applies a padding to the input, we override it here */
    padding-right: 2px !important;
    &:focus-visible,
    &:focus {
      border-color: var(--lavender);
    }
  }
  .pagefind-ui__search-clear {
    border-radius: var(--space-xs);
  }
  .pagefind-ui__drawer {
    grid-column: span 2;
    .pagefind-ui__results-area {
      .pagefind-ui__message {
        margin: var(--space-xs) 0;
        color: color-mix(in srgb, var(--text) 80%, transparent);
      }
      ol.pagefind-ui__results {
        padding-left: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: var(--space-m);

        li.pagefind-ui__result {
          background-color: var(--surface0);
          padding: var(--space-s);
          border-radius: var(--space-xs);
          div.pagefind-ui__result-inner {
            display: flex;
            flex-direction: column;
            gap: var(--space-s);
            p.pagefind-ui__result-title {
              margin: 0;
              a.pagefind-ui__result-link {
                font-size: 1.25em;
              }
            }
            p.pagefind-ui__result-excerpt {
              margin: 0;
              mark {
                background-color: transparent;
                color: var(--mauve);
              }
            }
          }
        }
      }
    }
  }
}