Inputs: Search

body {
  font-family: 'Helvetica Neue';
  font-size: 18px;
}
*, *::before, *::after {
  box-sizing: border-box;
}

label {
  color: var(--gray-800);
  font-size: 16px;
  margin-bottom: .25em;
}

input {
  font-family: inherit;
  border-radius: 6px;
  border: 1px solid var(--text-color);
  padding: .33em;
  color: var(--text-color);
  font-size: 18px;
  margin-bottom: .33em;
}

input:hover {
  border-color: var(--gray-800);
}

input:active, input:focus, input:focus-visible {
  border-color: var(--purple-800-brand);
  outline: none;
}

input:disabled {
  border: none;
  background-color: var(--disabled-color);
  opacity: 75%;
}

.input-icon {
  position: relative;
  margin-bottom: .33em;
}

.input-icon[data-error] input {
  border-color: var(--error-color);
  margin-bottom: 0;
}

.input-icon[data-error]::after {
  content: attr(data-error);
  color: var(--error-color);
  font-size: 14px;
  display: block;
  /* padding: .25em 0; */
}

.input-icon > span {
  position: absolute;
  left: 6px;
  top: 2.15em;
}

input[type="email"] {
  padding-left: 1.35em;
}

.icon {
  font-size: .85em;
  color: var(--text-color);
}

.input-hint {
  margin-bottom: .33em;
}

.input-hint[data-hint] input {
  margin-bottom: 0;
}

.input-hint[data-hint]::after {
  content: attr(data-hint);
  color: var(--gray-600);
  font-size: 14px;
  display: block;
}

.search {
  position: relative;
}

.search-field {
  position: relative;
  z-index: 2;
}


.search-submit {
  position: static;
    top: 0;
    bottom: 0;
  color: var(--text-color);
  background: none;
  /* border-top: 1px solid var(--gray-700-brand);
  border-right: 1px solid var(--gray-700-brand);
  border-bottom: 1px solid var(--gray-700-brand);
  border-left: none;
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px; */
  border: 1px solid var(--text-color);
  border-radius: 6px;
  font-size: 18px;
  height: 35.475px;
  padding: .385em .33em .385em .95em;
  margin: 0 0 0 -20px;
  z-index: 1;
}

.search-submit:hover {
  border-color: var(--gray-800);
  background-color: var(--gray-100);
  color: var(--gray-800);
}

.search-submit:active {
  border-color: var(--purple-800-brand);
}