.component {
  margin-bottom: 1rem;
  position: relative;
}

.component input[type="search"] {
  width: 100%;
  background: var(--search-form-background, green);
  margin: var(--search-form-margin, 0);
  padding: var(--search-form-padding, 0.5rem 0.5rem 0.5rem 2rem);
  border-radius: var(--search-form-border-radius, 2rem);
  border: 1px solid var(--search-form-border, red);
  color: var(--search-form-color, purple);
}

.component input[type="search"]::-webkit-input-placeholder {
  color: var(--search-form-placeholder-color, brown);
}
.component input[type="search"]:-moz-placeholder {
  color: var(--search-form-placeholder-color, brown);
  opacity: 1;
}
.component input[type="search"]::-moz-placeholder {
  color: var(--search-form-placeholder-color, brown);
  opacity: 1;
}
.component input[type="search"]:-ms-input-placeholder {
  color: var(--search-form-placeholder-color, brown);
}

.component input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
  -webkit-appearance: none;
  background: var(
    --search-form-cancel-button-icon,
    url(/icons/close-circle--filled.svg)
  );
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
  height: var(--search-form-cancel-button-size, 1rem);
  width: var(--search-form-cancel-button-size, 1rem);
}

.label {
}

.icon {
  position: absolute;
  left: calc(var(--search-form-icon-left, 0.75rem));
  top: 50%;
  transform: translateY(-50%);
}