@utrecht/web-component-library-stencil/dist/collection/components/icon/generated-direction-inherit.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
 */
:host {
  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;
}

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%;
}

/* This is the ideal implementation: */
/*
:host([direction="inherit"]) {
  --utrecht-icon-rtl-scale-x: -1;
}

svg:dir(rtl) {
  transform: scaleX(var(--utrecht-icon-rtl-scale-x, 1));
}
*/
/* This is a workaround for Safari not supporting :dir(rtl) in Shadow DOM.
 * Match `:dir(rtl)` outside the shadow DOM.
 */
:host([direction=inherit]:dir(rtl)) {
  --utrecht-icon-scale-x: -1;
}

svg {
  transform: scaleX(var(--utrecht-icon-scale-x, 1));
}