@import "govuk/components/input/input";
$search-icon-size: 40px;

.gem-c-input__search-icon {
  display: block;
  position: relative;
  z-index: 1;
  margin-bottom: -$search-icon-size;
  margin-bottom: -(govuk-px-to-rem($search-icon-size));
  width: $search-icon-size;
  height: $search-icon-size;
  height: govuk-px-to-rem($search-icon-size);
  background: image-url("govuk_publishing_components/icon-search.svg") no-repeat -3px center;
}

// this overrides styles from static that break the look of the component
// unfortunately we then need to override the override for the search icon variant
// TODO: remove these styles once static is made less aggressive
.gem-c-input.govuk-input {
  margin: 0;
  min-width: 0;
  padding: govuk-spacing(1);
  box-sizing: border-box;

  &.gem-c-input--with-search-icon {
    padding-left: govuk-spacing(6);
  }
}