.comp-searchform {
  display: flex;
  font-size: 1rem;
  width: 100%;
  max-width: 15em;
  justify-content: flex-end;
  align-items: center;
}
.comp-searchform.comp-searchform-open form {
  -webkit-transform: scaleX(1);
  -ms-transform: scaleX(1);
  transform: scaleX(1);
  transition: transform 150ms;
}
.comp-searchform.comp-searchform-closed form {
  transition: transform 150ms;
}
.comp-searchform button {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-size: inherit;
}
.comp-searchform button svg {
  height: 1em;
}
.comp-searchform > button svg {
  height: 1.1em;
  margin-top: 0.25em;
}
.comp-searchform form {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  -webkit-transform: scaleX(0);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: right;
  -ms-transform-origin: right;
  transform-origin: right;
  font-size: inherit;
  width: 100%;
}
.comp-searchform form input {
  padding-right: 2em;
  font-size: inherit;
  background: none;
  border: none;
  border-bottom: solid 1px var(--wp--preset--color--black);
  width: 100%;
  height: 100%;
  outline: none;
  max-height: 1.5em;
}
.comp-searchform form input::-webkit-input-placeholder {
  color: var(--wp--preset--color--black);
}
.comp-searchform form input:-moz-placeholder {
  color: var(--wp--preset--color--black);
}
.comp-searchform form input::-moz-placeholder {
  color: var(--wp--preset--color--black);
}
.comp-searchform form input:-ms-input-placeholder {
  color: var(--wp--preset--color--black);
}
.comp-searchform form button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 1.5em;
  height: 100%;
  fill: var(--wp--preset--color--black);
}