@utrecht/web-component-library-stencil/dist/collection/components/form-field-error-message.css

Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture

/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
/**
 * @license EUPL-1.2
 * Copyright (c) 2020-2024 Frameless B.V.
 * Copyright (c) 2021-2024 Gemeente Utrecht
 */
.utrecht-form-field-error-message {
  --utrecht-document-color: currentColor;
  background-color: var(--utrecht-form-field-error-message-background-color);
  color: var(--utrecht-form-field-error-message-color);
  display: block;
  font-family: var(--utrecht-document-font-family, inherit);
  font-size: var(--utrecht-form-field-error-message-font-size, inherit);
  font-style: var(--utrecht-form-field-error-message-font-style);
  line-height: var(--utrecht-form-field-error-message-line-height);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-error-message-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-error-message-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
  padding-block-end: var(--utrecht-form-field-error-message-padding-block-end);
  padding-block-start: var(--utrecht-form-field-error-message-padding-block-start);
  padding-inline-end: var(--utrecht-form-field-error-message-padding-inline-end);
  padding-inline-start: var(--utrecht-form-field-error-message-padding-inline-start);
}
.utrecht-form-field-error-message > * {
  --utrecht-space-around: 1;
}

:host {
  --utrecht-document-color: currentColor;
  background-color: var(--utrecht-form-field-error-message-background-color);
  color: var(--utrecht-form-field-error-message-color);
  display: block;
  font-family: var(--utrecht-document-font-family, inherit);
  font-size: var(--utrecht-form-field-error-message-font-size, inherit);
  font-style: var(--utrecht-form-field-error-message-font-style);
  line-height: var(--utrecht-form-field-error-message-line-height);
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-error-message-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-error-message-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)));
  padding-block-end: var(--utrecht-form-field-error-message-padding-block-end);
  padding-block-start: var(--utrecht-form-field-error-message-padding-block-start);
  padding-inline-end: var(--utrecht-form-field-error-message-padding-inline-end);
  padding-inline-start: var(--utrecht-form-field-error-message-padding-inline-start);
}
:host > * {
  --utrecht-space-around: 1;
}

:host([hidden]) {
  display: none !important;
}