.field {
  margin-bottom: var(--spacer);
  position: relative;
}

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

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

.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;
  top: 85%;
  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);
}
