:root {
  --mdc-typography-font-family: 'Rubik KALO', sans-serif;
  --mdc-theme-primary: var(--primary-color);
  --mdc-theme-error: var(--error-color);
}

.mdc-text-field + .mdc-text-field-helper-line {
  margin-top: 0.25rem;
  padding-left: calc(var(--spacing-4) + var(--spacing-1));
  padding-right: calc(var(--spacing-4) + var(--spacing-1));
}

.mdc-text-field--focused {
  --mdc-theme-primary: var(--tertiary-color);
}

.mdc-text-field--focused:not(.mdc-text-field--disabled):not(.mdc-text-field--invalid) .mdc-floating-label {
  color: var(--primary-color);
}

.mdc-text-field-helper-text {
  position: relative;
}

.mdc-text-field-helper-text::before {
  display: block;
  position: absolute;
  left: calc((var(--spacing-4) + var(--spacing-1)) * -1);
  width: 1rem;
  content: '';
  -webkit-mask: url('../img/Error_S.svg') no-repeat 50% 50%;
  mask: url('../img/Error_S.svg') no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: currentColor;
}

/* Client-side email validation (see js/emailValidation.js). Uses a custom
   class so MDC's own validity handling does not strip it on blur/input. */
.mdc-text-field.kalo-email-invalid .mdc-notched-outline__leading,
.mdc-text-field.kalo-email-invalid .mdc-notched-outline__notch,
.mdc-text-field.kalo-email-invalid .mdc-notched-outline__trailing {
  border-color: var(--error-color) !important;
}

.mdc-text-field.kalo-email-invalid .mdc-floating-label {
  color: var(--error-color) !important;
}

.mdc-text-field.kalo-email-invalid + .mdc-text-field-helper-line .input-error {
  color: var(--error-color);
}