.search-form {
  display: flex;

  .form-item {
    margin: 0;
  }

  /* Hide the extra fields - these need to be here for the advanced search to work */
  .form-item-exact-phrase,
  .form-composite {
    display: none;
  }
}


/* Form submit for both the basic variant of this form form and the advanced search form */

.search-form,
.advanced-search-form {
  .form-submit {
    background: var(--color-raspberry) no-repeat center center;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='15' viewBox='0 0 16 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.7071 8.07112C16.0976 7.6806 16.0976 7.04743 15.7071 6.65691L9.34315 0.292946C8.95262 -0.0975785 8.31946 -0.0975785 7.92893 0.292946C7.53841 0.68347 7.53841 1.31664 7.92893 1.70716L13.5858 7.36401L7.92893 13.0209C7.53841 13.4114 7.53841 14.0446 7.92893 14.4351C8.31946 14.8256 8.95262 14.8256 9.34315 14.4351L15.7071 8.07112ZM0 7.36401V8.36401H15V7.36401V6.36401H0V7.36401Z' fill='white'/%3E%3C/svg%3E");
    border-radius: .2rem;
    height: 2.2rem;
    width: 2.2rem;
    padding: .2rem;
    color: transparent;
    overflow: hidden;

    &:is(:hover,:active,:focus, :focus-visible) {
      color: transparent;
    }
  }
}

/* Basic variant */

.search-form--basic {
  align-items: end;
  gap: 1rem;

  margin: 1.5rem 0;
  label {
    font-weight: normal;
  }
}

/* Header variant */

.search-form--header {
  display: flex;
  align-items: center;

  label {
    display: block;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    margin: -1px 0 0 -1px;
  }

  .form-control {
    background: var(--color-lt-blue);
    border-radius: 2rem;
    font-size: .8rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
  }

  .form-submit {
    background: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath style='fill: %23fff' d='M16.6 18L10.3 11.7C9.8 12.1 9.225 12.4167 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13C4.68333 13 3.14583 12.3708 1.8875 11.1125C0.629167 9.85417 0 8.31667 0 6.5C0 4.68333 0.629167 3.14583 1.8875 1.8875C3.14583 0.629167 4.68333 0 6.5 0C8.31667 0 9.85417 0.629167 11.1125 1.8875C12.3708 3.14583 13 4.68333 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.4167 9.225 12.1 9.8 11.7 10.3L18 16.6L16.6 18ZM6.5 11C7.75 11 8.8125 10.5625 9.6875 9.6875C10.5625 8.8125 11 7.75 11 6.5C11 5.25 10.5625 4.1875 9.6875 3.3125C8.8125 2.4375 7.75 2 6.5 2C5.25 2 4.1875 2.4375 3.3125 3.3125C2.4375 4.1875 2 5.25 2 6.5C2 7.75 2.4375 8.8125 3.3125 9.6875C4.1875 10.5625 5.25 11 6.5 11Z' fill='%2349454F'/%3E%3C/svg%3E") var(--color-raspberry) no-repeat center center;
    border-radius: 3rem;
    height: 100%;
    width: 2.2rem;
    padding: .5rem;
    color: transparent;
    overflow: hidden;
    margin-left: -2rem;

    &:is(:hover,:focus) {
      background-color: var(--color-dk-raspberry);
    }

    &:is(:focus, :focus-visible) {
      outline-color: var(--color-dk-raspberry);
      outline-offset: 2px;
      outline-style: dashed;
      outline-width: 2px !important;
    }
  }
}