.field {
  margin-bottom: calc(var(--spacer) * var(--line-height));
  position: relative;
}

.field[data-is-submitting] {
  pointer-events: none;
  opacity: 0.4;
}

.field .field {
  margin-bottom: calc(var(--spacer) / 2);
}

.required {
  font-size: var(--font-size-base);
  color: var(--color-secondary);
  display: inline-block;
  margin-left: 0.1rem;
}

.error {
  display: inline-block;
  font-size: var(--font-size-mini);
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
  color: var(--brand-white);
  background: var(--brand-alert-red);
  border-radius: var(--border-radius);
  padding: 0.2rem 0.4rem;
  position: absolute;
  right: 0;
  z-index: 1;
}

.hasError label {
  color: var(--brand-alert-red);
}

.hasError input,
.hasError input:focus,
.hasError select,
.hasError textarea,
.hasError [class*='prefix'],
.hasError [class*='postfix'] {
  border-color: var(--brand-alert-red);
}