@utrecht/web-component-library-stencil/dist/collection/components/alert.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
 */
/* stylelint-disable-next-line block-no-empty */
.utrecht-alert {
  background-color: var(--_utrecht-alert-background-color, var(--utrecht-alert-background-color));
  border-color: var(--_utrecht-alert-border-color, var(--utrecht-alert-border-color));
  border-radius: var(--utrecht-alert-border-radius, 0);
  border-style: solid;
  border-width: var(--_utrecht-alert-border-width, var(--utrecht-alert-border-width, 0));
  color: var(--_utrecht-alert-color, var(--utrecht-alert-color));
  column-gap: var(--utrecht-alert-column-gap);
  display: flex;
  flex-direction: row;
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-alert-margin-block-start, 0));
  padding-block-end: var(--utrecht-alert-padding-block-end);
  padding-block-start: var(--utrecht-alert-padding-block-start);
  padding-inline-end: var(--utrecht-alert-padding-inline-end);
  padding-inline-start: var(--utrecht-alert-padding-inline-start);
}

.utrecht-alert__icon {
  --utrecht-icon-color: var(--_utrecht-alert-icon-color, var(--utrecht-alert-icon-color));
  --utrecht-icon-size: var(--utrecht-alert-icon-size);
  --utrecht-icon-inset-block-start: var(--utrecht-alert-icon-inset-block-start);
}

.utrecht-alert__content {
  row-gap: var(--utrecht-alert-content-row-gap);
}

.utrecht-alert__message {
  row-gap: var(--utrecht-alert-message-row-gap);
}

.utrecht-alert--info {
  --_utrecht-alert-icon-color: var(--utrecht-alert-icon-info-color);
  --_utrecht-alert-background-color: var(--utrecht-alert-info-background-color);
  --_utrecht-alert-border-color: var(--utrecht-alert-info-border-color);
  --_utrecht-alert-border-width: var(--utrecht-alert-info-border-width);
  --_utrecht-alert-color: var(--utrecht-alert-info-color);
}

.utrecht-alert--ok {
  --_utrecht-alert-icon-color: var(--utrecht-alert-icon-ok-color);
  --_utrecht-alert-background-color: var(--utrecht-alert-ok-background-color);
  --_utrecht-alert-border-color: var(--utrecht-alert-ok-border-color);
  --_utrecht-alert-border-width: var(--utrecht-alert-ok-border-width);
  --_utrecht-alert-color: var(--utrecht-alert-ok-color);
}

.utrecht-alert--warning {
  --_utrecht-alert-icon-color: var(--utrecht-alert-icon-warning-color);
  --_utrecht-alert-background-color: var(--utrecht-alert-warning-background-color);
  --_utrecht-alert-border-color: var(--utrecht-alert-warning-border-color);
  --_utrecht-alert-border-width: var(--utrecht-alert-warning-border-width);
  --_utrecht-alert-color: var(--utrecht-alert-warning-color);
}

.utrecht-alert--error {
  --_utrecht-alert-icon-color: var(--utrecht-alert-icon-error-color);
  --_utrecht-alert-background-color: var(--utrecht-alert-error-background-color);
  --_utrecht-alert-border-color: var(--utrecht-alert-error-border-color);
  --_utrecht-alert-border-width: var(--utrecht-alert-error-border-width);
  --_utrecht-alert-color: var(--utrecht-alert-error-color);
}

:host {
  display: block;
}

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