/*
 * @file
 * Styles for the header search.
 */

.header-search {
  --header-search-background: transparent;
  --header-search-text-color: var(--theme-text-color-medium);
  --header-search-padding-block: var(--spacing-xs) var(--spacing-s);
  --header-search-font-size: var(--h5-size);

  @media (width > 700px) {
    --header-search-font-size: var(--h2-size);
  }
}

.header-search__trigger {
  position: relative;
  width: 24px;
  height: 44px;
  padding: 0;
  color: inherit;

  &[aria-expanded="true"] {
    background-color: var(--header-search-background);
    color: var(--header-search-text-color);
    box-shadow: 0 var(--header-padding-block) 0 var(--header-search-background);
  }
}

.header-search__search-icon {
  display: flex;
  justify-content: center;

  .header-search__trigger[aria-expanded="true"] & {
    display: none;
  }
}

.header-search__close-icon {
  --line-width: 3px;
  --icon-size: 20px;

  display: none;
  width: 100%;
  height: 100%;

  &::before,
  &::after {
    position: absolute;
    top: calc(50% - var(--line-width) / 2);
    left: calc(50% - var(--icon-size) / 2);
    width: var(--icon-size);
    height: 0;
    border-top: solid var(--line-width) currentColor;
    content: "";
    transition: all 0.2s;
  }

  &::before {
    rotate: -45deg;
  }

  &::after {
    rotate: 45deg;
  }

  .header-search__trigger[aria-expanded="true"] & {
    display: block;
  }
}

.header-search__content {
  --header-search-popover-background-color: var(--theme-surface);
  --header-search-popover-top-height: 74px;
  --header-search-popover-border-color: color-mix(in oklch, var(--white) 30%, transparent);
  --header-search-input-height: 80px;
  --header-search-input-background-color: oklch(from var(--header-search-popover-background-color) 50% c h);
  --header-search-input-text-color: var(--white);

  position: fixed;
  top: var(--drupal-displace-offset-top, 0);
  inset-inline-start: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  background-color: var(--header-search-popover-background-color);
  margin: 0;
  padding: 0;
  color: var(--theme-text-color-loud);
  transition: visibility 0.2s, opacity 0.2s;

  @media (width > 600px) {
    --header-search-input-height: 120px;
  }

  &:not([open]) {
    display: block;
    visibility: hidden;
    opacity: 0;
  }

  form {
    display: flex;
    align-items: stretch;
    flex-basis: 100%;
    margin-bottom: 10vh;
    border: solid 1px var(--header-search-input-background-color);

    .form-item,
    .form-actions {
      display: contents;
    }

    [type="text"],
    [type="search"] {
      flex-grow: 1;
      height: var(--header-search-input-height);
      padding: 20px;
      font-size: var(--header-search-font-size);
      border: solid 1px transparent;
      background-color: var(--header-search-input-background-color);
      color: var(--header-search-input-text-color);

      &::-webkit-search-cancel-button {
        -webkit-appearance: none;
        width: 0.5em;
        height: 0.5em;
        background: color-mix(in oklch, currentColor 75%, transparent);

        /* Renders an "X" */
        clip-path: polygon(10% 0%, 0% 10%, 40% 50%, 0% 90%, 10% 100%, 50% 60%, 90% 100%, 100% 90%, 60% 50%, 100% 10%, 90% 0%, 50% 40%);
      }

      @media (width > 600px) {
        padding: 40px;
      }

      &:focus {
        outline: 1px solid transparent;
      }
    }

    [type="submit"],
    button {
      width: 80px;
      height: var(--header-search-input-height);
      margin: 0;
      padding: 0;
      border-radius: 0;
      background-color: transparent;
      background-image: url('images/search-white.svg');
      background-repeat: no-repeat;
      background-position: center;
      text-indent: -999px;
      overflow: clip;
      outline-offset: -2px;

      @media (width > 600px) {
        width: 100px;
      }

      &:hover,
      &:focus {
        background-color: transparent;
      }

      .theme--light &,
      .theme--secondary & {
        background-image: url('images/search-dark.svg');
      }

      .theme--dark & {
        background-image: url('images/search-white.svg');
      }

      @media (width < 1000px) {
        [class] & {
          background-image: url('images/search-white.svg');
        }
      }

      @media (forced-colors: active) {
        background: none !important;
        aspect-ratio: revert;
        text-indent: revert;
      }
    }
  }
}

.header-search__content-container {
  position: relative; /* Anchor close button. */
  display: flex;
  align-items: center;
  height: 100%;
}

/*
 * Override for Drupal CMS's advanced search recipe.
 */
.search-api-autocomplete-search .ui-menu-item-wrapper.ui-state-active .search-api-autocomplete-suggestion[class] {
  background: transparent;
  color: inherit;
}


.header-search__popover-close {
  position: absolute;
  inset-block-start: 20px;
  inset-inline-end: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  aspect-ratio: 1;
  border: 0;
  margin: 0;
  padding: 0;
  appearance: none;
}

.header-search__popover-close-icon {
  &::before,
  &::after {
    position: absolute;
    top: 50%;
    inset-inline: 0;
    width: 30px;
    height: 0;
    margin-inline: auto;
    content: "";
    border: 1px solid currentColor;
    rotate: -45deg;
  }

  &::after {
    rotate: 45deg;
  }
}