.base-input {
  --base-input-height: 48px;
  --base-input-padding: 12px 16px 12px 12px;
  --base-input-radius: 12px;
  --base-input-gap: 8px;
  --base-input-icon-size: 24px;
  --base-input-bg: var(--surface-surface);
  --base-input-color: var(--text-primary);
  --base-input-placeholder-color: var(--text-tertiary);
  --base-input-border: var(--border-secondary);
  --base-input-font: var(--text-b2-r);

  position: relative;
  display: block;
}

input.base-input,
textarea.base-input,
select.base-input,
.base-input input:not([type="submit"]):not([type="button"]),
.base-input textarea,
.base-input select {
  display: block;
  width: 100%;
  height: var(--base-input-height);
  padding: var(--base-input-padding);
  color: var(--base-input-color);
  font: var(--base-input-font);
  letter-spacing: 0;
  background: var(--base-input-bg);
  border: 1px solid var(--base-input-border);
  border-radius: var(--base-input-radius);
  box-shadow: none;
  box-sizing: border-box;
  outline: none;
  appearance: none;
}

textarea.base-input,
.base-input textarea {
  min-height: var(--base-input-height);
  resize: vertical;
}

input.base-input::placeholder,
textarea.base-input::placeholder,
.base-input input::placeholder,
.base-input textarea::placeholder,
.base-input .grunion-field::placeholder {
  color: var(--base-input-placeholder-color) !important;
  opacity: 1 !important;
}

input.base-input::-webkit-input-placeholder,
textarea.base-input::-webkit-input-placeholder,
.base-input input::-webkit-input-placeholder,
.base-input textarea::-webkit-input-placeholder,
.base-input .grunion-field::-webkit-input-placeholder {
  color: var(--base-input-placeholder-color) !important;
  opacity: 1 !important;
}

input.base-input::-moz-placeholder,
textarea.base-input::-moz-placeholder,
.base-input input::-moz-placeholder,
.base-input textarea::-moz-placeholder,
.base-input .grunion-field::-moz-placeholder {
  color: var(--base-input-placeholder-color) !important;
  opacity: 1 !important;
}

input.base-input[type="search"],
.base-input input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

input.base-input[type="search"]::-webkit-search-decoration,
.base-input input[type="search"]::-webkit-search-decoration {
  display: none;
}

input.base-input[type="search"]::-webkit-search-cancel-button,
.base-input input[type="search"]::-webkit-search-cancel-button {
  width: var(--base-input-icon-size);
  height: var(--base-input-icon-size);
  margin-left: var(--base-input-gap);
  background: var(--base-input-placeholder-color);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 6L18 18M18 6L6 18' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

input.base-input:focus,
textarea.base-input:focus,
select.base-input:focus,
.base-input input:focus,
.base-input textarea:focus,
.base-input select:focus {
  border-color: var(--base-input-border);
  outline: none;
}

input.base-input:disabled,
textarea.base-input:disabled,
select.base-input:disabled,
.base-input input:disabled,
.base-input textarea:disabled,
.base-input select:disabled {
  color: var(--base-input-placeholder-color);
  cursor: not-allowed;
}

.base-input--with-icon input:not([type="submit"]):not([type="button"]),
.base-input--with-icon input.base-input {
  padding-left: calc(12px + var(--base-input-icon-size) + var(--base-input-gap));
}

.base-input__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  width: var(--base-input-icon-size);
  height: var(--base-input-icon-size);
  color: var(--base-input-placeholder-color);
  pointer-events: none;
  transform: translateY(-50%);
}

.base-input__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  color: currentColor;
  stroke: currentColor;
}