@utrecht/web-component-library-stencil/dist/collection/components/spotlight-section.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-spotlight-section {
  background-color: var(--_utrecht-spotlight-section-background-color, var(--utrecht-spotlight-section-background-color));
  border-color: var(--_utrecht-spotlight-section-border-color, var(--utrecht-spotlight-section-border-color));
  border-radius: var(--utrecht-spotlight-section-border-radius, 0);
  border-style: solid;
  border-width: var(--_utrecht-spotlight-section-border-width, var(--utrecht-spotlight-section-border-width, 0));
  color: var(--_utrecht-spotlight-section-color, var(--utrecht-spotlight-section-color));
  margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-spotlight-section-margin-block-end, 0));
  margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-spotlight-section-margin-block-start, 0));
  padding-block-end: var(--utrecht-spotlight-section-padding-block-end);
  padding-block-start: var(--utrecht-spotlight-section-padding-block-start);
  padding-inline-end: var(--utrecht-spotlight-section-padding-inline-end);
  padding-inline-start: var(--utrecht-spotlight-section-padding-inline-start);
}

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

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

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

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

:host {
  display: block;
}

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