.search-form {
  .form-item,
  .form-actions {
    display: inline-block;
    margin-bottom: 0;
  }

  .views-exposed-form {
    gap: 0;
    margin: 0;
  }

  .form-actions {
    margin-top: 0;
  }

  .form-submit {
    background-position: center center;
    background-repeat: no-repeat;
    /* This is the white version */
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 11C5 7.691 7.691 5 11 5C14.309 5 17 7.691 17 11C17 14.309 14.309 17 11 17C7.691 17 5 14.309 5 11ZM20.707 19.293L17.312 15.897C18.365 14.543 19 12.846 19 11C19 6.589 15.411 3 11 3C6.589 3 3 6.589 3 11C3 15.411 6.589 19 11 19C12.846 19 14.543 18.365 15.897 17.312L19.293 20.707C19.488 20.902 19.744 21 20 21C20.256 21 20.512 20.902 20.707 20.707C21.098 20.316 21.098 19.684 20.707 19.293Z' fill='%23ffffff'/%3E%3Cmask id='mask0_238_1456' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='3' y='3' width='19' height='18'%3E%3C/mask%3E%3Cg mask='url(%23mask0_238_1456)'%3E%3Crect width='24' height='24' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-size: 70%;
    clip-path: none;
    border: none;
    color: transparent;
    padding: 0;
    height: 2.5rem;
    width: 2.5rem;

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

/* Toggle/slide open option */
.toggle-search {
  display: flex;
  align-items: center;

  svg {
    height: 1.3rem;
    width: 1.3rem;
  }
}

.site-header:not(.header-reversed) {
  .form-text {
    background-color: var(--color-grey-lt);
  }
  .form-submit {
    /* This is the black version */
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 11C5 7.691 7.691 5 11 5C14.309 5 17 7.691 17 11C17 14.309 14.309 17 11 17C7.691 17 5 14.309 5 11ZM20.707 19.293L17.312 15.897C18.365 14.543 19 12.846 19 11C19 6.589 15.411 3 11 3C6.589 3 3 6.589 3 11C3 15.411 6.589 19 11 19C12.846 19 14.543 18.365 15.897 17.312L19.293 20.707C19.488 20.902 19.744 21 20 21C20.256 21 20.512 20.902 20.707 20.707C21.098 20.316 21.098 19.684 20.707 19.293Z' fill='%232D2D2D'/%3E%3Cmask id='mask0_238_1456' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='3' y='3' width='19' height='18'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 11C5 7.691 7.691 5 11 5C14.309 5 17 7.691 17 11C17 14.309 14.309 17 11 17C7.691 17 5 14.309 5 11ZM20.707 19.293L17.312 15.897C18.365 14.543 19 12.846 19 11C19 6.589 15.411 3 11 3C6.589 3 3 6.589 3 11C3 15.411 6.589 19 11 19C12.846 19 14.543 18.365 15.897 17.312L19.293 20.707C19.488 20.902 19.744 21 20 21C20.256 21 20.512 20.902 20.707 20.707C21.098 20.316 21.098 19.684 20.707 19.293Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_238_1456)'%3E%3Crect width='24' height='24' fill='%232D2D2D'/%3E%3C/g%3E%3C/svg%3E%0A");
  }
}

/* In the site header, in expanded (larger screen) display */
.mobile-menu-wrapper:not(.open) {
  .search-form {
    margin-bottom: 0;

    .form-text {
      font-size: .8rem;
      padding: .5rem 1rem;
      outline: 0;
      padding: 0.3rem 0.7rem;
    }

    .form-submit {
      background-color: transparent;
      background-size: 82%;
      height: 1.5rem;
      width: 1.5rem;
      cursor: pointer;
    }

    /* Expand/collpse toggle behaviour */
    #search-form-wrapper {
      display: none;
      width: 0;

      &.search-open {
        display: block;
        width: 12.5rem;
        & + .toggle-search {
          display: none;
        }
      }
    }
  }


  /* Reversed variant */
  &.header-reversed {
    .form-text {
      background-color: rgba(255,255,255,0.8);
    }
  }

}

/* When in small screen menu */
.mobile-menu-wrapper.open {
  .search-form {
    .views-exposed-form{
      flex-direction: row;
    }

    .form-text {
      background: var(--color-grey-lt);
      font-size: 1rem;
      height: 2.8rem;
      width: calc(var(--mobile-menu-width) - (var(--responsive-padding) * 2) - 2rem);
    }

    .form-submit {
      background-color: transparent;
      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 11C5 7.691 7.691 5 11 5C14.309 5 17 7.691 17 11C17 14.309 14.309 17 11 17C7.691 17 5 14.309 5 11ZM20.707 19.293L17.312 15.897C18.365 14.543 19 12.846 19 11C19 6.589 15.411 3 11 3C6.589 3 3 6.589 3 11C3 15.411 6.589 19 11 19C12.846 19 14.543 18.365 15.897 17.312L19.293 20.707C19.488 20.902 19.744 21 20 21C20.256 21 20.512 20.902 20.707 20.707C21.098 20.316 21.098 19.684 20.707 19.293Z' fill='%232D2D2D'/%3E%3Cmask id='mask0_238_1456' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='3' y='3' width='19' height='18'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5 11C5 7.691 7.691 5 11 5C14.309 5 17 7.691 17 11C17 14.309 14.309 17 11 17C7.691 17 5 14.309 5 11ZM20.707 19.293L17.312 15.897C18.365 14.543 19 12.846 19 11C19 6.589 15.411 3 11 3C6.589 3 3 6.589 3 11C3 15.411 6.589 19 11 19C12.846 19 14.543 18.365 15.897 17.312L19.293 20.707C19.488 20.902 19.744 21 20 21C20.256 21 20.512 20.902 20.707 20.707C21.098 20.316 21.098 19.684 20.707 19.293Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_238_1456)'%3E%3Crect width='24' height='24' fill='%232D2D2D'/%3E%3C/g%3E%3C/svg%3E%0A");
    }
  }
}