:root {
  --search-background-color: #000;
  --search-padding-block: 0.5rem;
  --search-border-color: var(--color-gray-80);
  --search-input-text-color: var(--color-white);
  --search-input-placeholder-color: rgba(255, 255, 255, 0.75);
  --search-input-border-color: var(--color-secondary);
  --search-input-focus-background-color: var(--color-gray-100);
}

.region-highlighted .spr-search {
  position: absolute;
  z-index: 11;
  right: 0;
  left: 0;
  transition: all 0.3s ease-in-out;
  transform: translateY(-100%);
  background-color: var(--color-gray-20);
  padding-block: var(--search-padding-block);

  @media (min-width: 992px) {
    --search-padding-block: 1rem;

    background-color: var(--search-background-color);
  }
}

.region-highlighted .spr-search.search-shown {
  transform: translateY(0%);
}

.region-highlighted .spr-search .grid {
  position: relative;
  row-gap: 0;
  column-gap: 0.875rem;

  @media (min-width: 992px) {
    &::before {
      position: relative;
      top: -1rem;
      display: block;
      grid-column: 1 / span 12;
      height: 0.125rem;
      content: "";
      background-color: var(--search-border-color);
    }
  }
}

.region-highlighted .spr-search form {
  display: flex;
  flex-wrap: nowrap;
  grid-column: 1 / span 4;
  gap: 0.875rem;

  @media (min-width: 768px) {
    grid-column: 2 / span 10;
  }
}

.region-highlighted .spr-search .form-type-textfield {
  width: 100%;

  > label {
    display: none;
  }
}

.region-highlighted .spr-search input {
  inline-size: 100%;
  height: 2.75rem;
  color: var(--color-black);
  border: 0;
  border-block-end: 0.125rem solid var(--search-input-border-color);
  background-color: transparent;
  font-size: 1rem;
  padding-block: var(--form-input-padding-block);
  padding-inline: var(--form-input-padding-inline);

  &:focus {
    background-color: #f1f2f4;

    @media (min-width: 992px) {
      background-color: var(--search-input-focus-background-color);
    }
  }

  @media (min-width: 992px) {
    color: var(--search-input-text-color);
    border-block-end: 0.125rem solid var(--search-input-border-color);
    font-size: 1.125rem;
  }
}

.region-highlighted .spr-search input::placeholder {
  color: var(--color-gray-100);

  @media (min-width: 992px) {
    color: var(--search-input-placeholder-color);
  }
}

.region-highlighted .spr-search .form-actions input {
  --button-line-height: 1rem;
  --button-background-color: var(--color-secondary);
  --button-hover-background-color: var(--color-secondary);
  --button-text-color: var(--color-black);
  --button-hover-text-color: #fff;
  --button-border-color: var(--color-secondary);
  --button-hover-border-color: var(--color-secondary);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  cursor: pointer;
  text-decoration: none;
  text-indent: -999rem;
  color: var(--button-text-color);
  border: 2px solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  background: var(--button-background-color) url("../../images/icons/icon-search-black.svg") no-repeat center center;
  background-size: 1.25rem;
  font-family: var(--font-alternate);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: var(--button-line-height);
  inline-size: 100%;
  padding-block: 0;
  padding-inline: 1rem;

  &:hover {
    color: var(--button-hover-text-color);
    border-color: var(--button-hover-border-color);
    background-color: var(--button-hover-background-color);
  }

  &:focus-visible {
    outline-offset: 0.1875rem;
  }

  @media (min-width: 992px) {
    width: auto;
    text-indent: 0;
    background-image: none;
    padding-inline: 2.25rem;
  }

  @media (max-width: 991px) {
    --button-font-size: 1rem;
    --button-padding-block: 0.5rem;
  }
}