/* ---- Search box / Header search box ---- */

/* Block styles */
.wp-block-search {
  width: 240px;

  p {
    margin: 0;
    height: 0;
  }
}

.wp-block-search.wp-block-search__button-inside,
.wp-block-search.wp-block-search__button-outside {
  width: 280px;
}

.wp-block-search__input {
  color: var(--wp--preset--color--black);
  border: 2px solid var(--wp--preset--color--contrast);
  padding: 0.25em 0.5em;
}

.wp-block-search__label {
  color: var(--wp--preset--color--contrast);
  display: inline-block;
  margin-bottom: 0.25em;

  .is-style-card & {
    color: var(--wp--preset--color--black);
  }
}

.wp-block-search__button {
  background: var(--white-to-black-gradient);
  border-radius: 0.5em;
  color: var(--wp--preset--color--black);
  border-color: var(--almost-black);
  margin: 0.5em;
  padding: 0.5em;
}

.wp-block-search__button.wp-element-button {
  background-color: var(--wp--preset--color--tertiary);
}

.wp-block-search__button-inside {
  .wp-block-search__inside-wrapper {
    background: var(--gray-gradient-reversed);
    border: 1px solid var(--almost-white);
    border-radius: 0.5em;
    padding: 0.25em 0.5em;
  }

  .wp-block-search__input,
  .wp-block-search__button {
    margin: 0;
  }

  .wp-block-search__input {
    background: transparent;
    border-color: transparent;
    padding: 0.25em 0;
  }

  .wp-block-search__button {
    padding: 0.25em 0.5em;
  }
}

.mxs-light-bg .wp-block-search__button-inside .wp-block-search__inside-wrapper,
.is-style-search-header.wp-block-search__button-inside .wp-block-search__inside-wrapper {
  border-color: var(--wp--preset--color--primary-semitransparent);
}

.is-style-search-header,
.is-style-search-header-dark-bg {
  border-bottom-right-radius: 16px;
  height: fit-content;
  padding-bottom: 6px;
  text-align: center;

  .wp-block-search__label {
    color: var(--wp--preset--color--card-text);
  }

  .wp-block-search__input,
  .wp-block-search__button {
    margin: 0 0.5em;
  }

  .wp-block-search__button {
    background: linear-gradient(to bottom, rgb(255 255 255 / 0.5) 0%, var(--wp--preset--color--complementary-semitransparent) 100%);
    background-color: var(--almost-white);
    color: var(--wp--preset--color--black);
    font-size: 1rem;
  }

  .wp-block-search__inside-wrapper {
    align-items: stretch;
    min-height: 64px;
  }

  &.wp-block-search__button-inside .wp-block-search__input {
    border: transparent;
  }

  &.wp-block-search__button-inside .wp-block-search__inside-wrapper {
    margin: 36px 0.5em 0.5em;
    min-height: 32px;
  }

  .wp-block-search__label ~ .wp-block-search__inside-wrapper {
    margin-top: 12px;
    min-height: auto;
  }

  &.wp-block-search__button-inside .wp-block-search__label ~ .wp-block-search__inside-wrapper {
    margin-top: 0;
  }

  &.wp-block-search__button-inside {
    padding: 0.25em 0.5em;
  }
}

.is-style-search-header {
  background: url(../../../images/spyglass-clipped.svg) top left no-repeat;
  background-color: var(--wp--preset--color--card);

  .wp-block-search__input:focus-visible {
    outline-color: var(--wp--preset--color--primary);
  }

  .wp-block-search__input,
  .wp-block-search__button {
    border-color: var(--wp--preset--color--primary-semitransparent);
  }

  &-dark-bg {
    background: url(../../../images/spyglass-clipped-white.svg) top left no-repeat;
    background-color: var(--wp--preset--color--card) !important;

    .wp-block-search__input:focus-visible {
      outline-color: var(--almost-white);
    }

    .wp-block-search__input,
    .wp-block-search__button {
      border-color: var(--wp--preset--color--white);
    }
  }
}

/* Alignments */
.is-style-search-header.alignright,
.is-style-search-header-dark-bg.alignright {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 0px;
}

.is-layout-flow,
.is-layout-constrained {
  > .wp-block-search.alignleft {
    margin-inline-start: 1.5em;
  }

  > .is-style-search-header.alignleft,
  > .is-style-search-header-dark-bg.alignleft {
    margin-inline-start: 0;
  }

  > .wp-block-search.alignright {
    justify-self: end;
    margin-inline-end: 1.5em;
  }

  > .is-style-search-header.alignright,
  > .wp-block-search.is-style-search-header-dark-bg.alignright {
    margin-inline-end: 0 !important;
  }
}

.is-style-search-header.aligncenter,
.is-style-search-header-dark-bg.aligncenter {
  border-bottom-left-radius: 16px;
}
