.site-header--search {
  position: relative;
}

.site-header--search {
  --search-toggle-size: 42px;
  --search-expanded-width: 100%;
  position: absolute;
  right: 0;
  width: var(--search-toggle-size);
  transition: width 0.4s cubic-bezier(0.46, 0.03, 0.12, 1.15);
}
.site-header--search input.form-search {
  color: rgb(255, 255, 255) !important;
  transition: color 0.2s 0s cubic-bezier(0.46, 0.03, 0.12, 1.15);
}
.site-header--search input[data-drupal-selector=edit-keys]::placeholder {
  color: rgba(255, 255, 255, 0) !important;
  transition: color 0.2s 0s cubic-bezier(0.46, 0.03, 0.12, 1.15);
}
.site-header--search.is-expanded {
  width: var(--search-expanded-width);
}
.site-header--search.is-expanded input[data-drupal-selector=edit-keys]::placeholder {
  transition: color 0.4s 0.3s cubic-bezier(0.46, 0.03, 0.12, 1.15);
  color: var(--Backgrounds-Dark-Placeholder) !important;
}
.site-header--search.is-expanded input.form-search {
  color: black !important;
  transition: color 0.4s 0.3s cubic-bezier(0.46, 0.03, 0.12, 1.15);
}
.site-header--search .search-block-form {
  border-radius: 50px;
  background-color: var(--Primary-Light-Highlight);
  border-color: var(--Primary-Light-Highlight);
}
.site-header--search .form-actions {
  margin: 0;
  display: flex;
  align-items: stretch;
  gap: var(--xs);
  position: absolute;
  right: 0;
  top: 0;
}
.site-header--search .form-actions [type=submit],
.site-header--search .form-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--search-toggle-size);
  min-width: var(--search-toggle-size);
  min-height: var(--search-toggle-size);
  padding: var(--xs);
  background-color: transparent;
  background-image: url("./search-icon.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  color: transparent;
  font-size: 0;
  line-height: 1;
  gap: 0;
  cursor: pointer;
}
.site-header--search .form-actions [type=submit] {
  appearance: none;
  border: none;
}
@media screen and (width < 768px) {
  .site-header--search .search-block-form {
    --search-expanded-width: 200px;
  }
}

.search-form .form-item input[type=search]::placeholder {
  color: var(--Neutral-Light-Highlight);
  opacity: 1;
}