/* Form controls on dark surfaces. */
.gu-input {
  background: var(--gu-bg-raised);
  border: 1px solid var(--gu-border-4);
  border-radius: 9px;
  padding: 14px 16px;
  color: var(--gu-text);
  font-size: 14px;
  font-family: var(--gu-font-sans);
  width: 100%;
}

.gu-input:focus {
  border-color: var(--gu-accent);
  outline: none;
  background: var(--gu-bg-raised);
  color: var(--gu-text);
  box-shadow: none;
}

.gu-input--select {
  color: var(--gu-text-dim);
  appearance: auto;
}

.gu-input--error {
  border-color: var(--gu-danger);
}

.gu-form-alert {
  border-radius: 9px;
  padding: 13px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
}

.gu-form-alert--success {
  background: var(--gu-accent-tint);
  border: 1px solid rgba(79, 195, 161, 0.4);
  color: var(--gu-accent);
}

.gu-form-alert--error {
  background: rgba(224, 93, 93, 0.12);
  border: 1px solid rgba(224, 93, 93, 0.4);
  color: var(--gu-danger);
}