/*--------------------**
|  Layout: Firewarning  |
**--------------------*/
/* Info: API - Agentschap natuur & Bos - https://natuurenbos.be/waarschuwingen */
/*--------------------**
|  Layout: Firewarning  |
**--------------------*/
/* Info: API - Agentschap natuur & Bos - https://natuurenbos.be/waarschuwingen */
html {
  font-size: 62.5%;
}

.fire-warning {
  background-color: var(--fire-warning-background, rgba(0, 0, 0, 0.05));
  border: 0.3rem solid var(--fire-warning-status-color, rgb(0, 0, 0));
  padding: 1rem;
  border-radius: 3.2rem;
  position: relative;
  line-height: 1.6em;
  font-size: 1em;
  margin-bottom: 2rem;
}
.fire-warning__container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.fire-warning__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 4rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: var(--fire-warning-status-color, rgb(0, 0, 0));
  display: inline-flex;
  column-gap: var(--icon-column-gap);
}
.fire-warning__icon::before {
  content: "";
  display: inline-flex;
  flex-shrink: 0;
  background-image: none !important;
  -webkit-mask-image: url("data:image/svg+xml;utf8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M8,5c0-2.2,1.8-4,4-4s4,1.8,4,4v5.3c1.8,1.3,3,3.4,3,5.7,0,3.9-3.1,7-7,7s-7-3.1-7-7,1.2-4.5,3-5.7v-5.3ZM9.1,11.9c-1.3.9-2.1,2.4-2.1,4.1,0,2.8,2.2,5,5,5s5-2.2,5-5-.8-3.2-2.1-4.1l-.9-.6v-6.3c0-1.1-.9-2-2-2s-2,.9-2,2v6.3l-.9.6ZM8,16h8c0,2.2-1.8,4-4,4s-4-1.8-4-4Z'/%3e%3c/svg%3e");
  mask-image: url("data:image/svg+xml;utf8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M8,5c0-2.2,1.8-4,4-4s4,1.8,4,4v5.3c1.8,1.3,3,3.4,3,5.7,0,3.9-3.1,7-7,7s-7-3.1-7-7,1.2-4.5,3-5.7v-5.3ZM9.1,11.9c-1.3.9-2.1,2.4-2.1,4.1,0,2.8,2.2,5,5,5s5-2.2,5-5-.8-3.2-2.1-4.1l-.9-.6v-6.3c0-1.1-.9-2-2-2s-2,.9-2,2v6.3l-.9.6ZM8,16h8c0,2.2-1.8,4-4,4s-4-1.8-4-4Z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: contain;
  --icon-color: white;
  --icon-scale: 1;
  --icon-size: 2rem;
  background-color: var(--icon-color);
  aspect-ratio: var(--icon-aspect-ratio-width, 1)/var(--icon-aspect-ratio-height, 1);
  width: auto;
  height: calc(var(--icon-size, 1lh) * var(--icon-scale, 1));
}
.fire-warning__content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: center;
  text-align: center;
  text-wrap: pretty;
  gap: 0.1rem;
}
.fire-warning__title {
  color: inherit;
  font-size: 1.15em;
  font-weight: 700;
  text-transform: uppercase;
}
.fire-warning__link > span {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
}
.fire-warning__link::after {
  --icon-background-url: none;
  --icon-color-primary: none;
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  z-index: var(--linktag-zindex) !important;
  width: 100% !important;
  height: 100% !important;
}
.fire-warning.groen {
  --fire-warning-status-color: rgb(56, 165, 31);
  --fire-warning-background: rgba(56, 165, 31, 0.1);
  --fire-warning-background-hover: rgba(56, 165, 31, 0.15);
}
.fire-warning.geel {
  --fire-warning-status-color: rgb(214, 199, 32);
  --fire-warning-background: rgba(214, 199, 32, 0.1);
  --fire-warning-background-hover: rgba(214, 199, 32, 0.15);
}
.fire-warning.oranje {
  --fire-warning-status-color: rgb(195, 133, 26);
  --fire-warning-background: rgba(195, 133, 26, 0.1);
  --fire-warning-background-hover: rgba(195, 133, 26, 0.15);
}
.fire-warning.rood {
  --fire-warning-status-color: rgb(172, 52, 34);
  --fire-warning-background: rgba(172, 52, 34, 0.1);
  --fire-warning-background-hover: rgba(172, 52, 34, 0.15);
}
@media (hover: hover) {
  .fire-warning:hover {
    background-color: var(--fire-warning-background-hover, rgba(0, 0, 0, 0.1));
  }
}
.fire-warning:focus-visible, .fire-warning:focus-within {
  background-color: var(--fire-warning-background-hover, rgba(0, 0, 0, 0.1));
}
@media (width >= 48em) {
  .fire-warning {
    max-width: 50rem;
  }
  .fire-warning__container {
    flex-direction: row;
  }
  .fire-warning__content {
    text-align: left;
  }
}
@media (width <= 47.98em) {
  .fire-warning__info {
    max-width: 40ch;
  }
}
/*# sourceMappingURL=C:/development/core/intern/staticfiles/wwwroot/maps/alfa/layout/vlaanderen/fire-warning.css.map */