/**
 * @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-icon {
  block-size: var(--utrecht-icon-size);
  color: var(--utrecht-icon-color);
  display: inline-block;
  font-size: var(--utrecht-icon-size);
  inline-size: var(--utrecht-icon-size);
  inset-block-start: var(--utrecht-icon-inset-block-start, 0);
  position: relative;
}

.utrecht-icon svg {
  /*
   * Override the width of SVGs when they are hardcoded, and avoid oversized SVG icons.
   * For example:
   * 
   *   <svg width="128px" height="128px">
   */
  /* stylelint-disable-next-line property-disallowed-list */
  height: 100%;
  /* Remove tooltip from SVG `<title>` element using `pointer-events: none` */
  pointer-events: none;
  /* stylelint-disable-next-line property-disallowed-list */
  width: 100%;
}

:host {
  display: inline;
  /* A black icon can become invisible on a forced black background.
   * Add a contrasting border color */
}
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
  :host {
    border-color: currentColor;
    border-radius: 5px;
    border-style: solid;
    /* Warning: there layout difference because of the added 1px border */
    border-width: 1px;
  }
}

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