@use "../../variables/index" as *;

/**
 * DLT C8Y Icons Stroke - SVG mask-image based (GENERATED FILE)
 *
 * Auto-generated by tools/generate-icon-scss.mjs
 * DO NOT EDIT MANUALLY
 *
 * Two-layer stroke effect:
 * - ::before (z-index: 1): colored icon on top, normal size
 * - ::after  (z-index: 0): same mask 4px larger, in stroke color, behind
 *
 * The slightly larger ::after peeks around the edges of ::before,
 * creating a visible outline in the stroke color.
 *
 * ::before references --_icon-mask (normal icon with holes).
 * ::after references --_icon-mask-filled (outer contour only, no holes),
 * falling back to --_icon-mask for icons without internal cutouts.
 * This ensures icon holes (e.g. exclamation mark in diamond) show stroke color.
 */

@if $use-svg-icons {
[class^='dlt-c8y-icon-'],
[class*=' dlt-c8y-icon-'] {
  &.stroked-icon {
    position: relative;
    z-index: 0;

    &::before {
      position: relative;
      z-index: 1;
    }

    &::after {
      content: "";
      position: absolute;
      top: -2px;
      left: -2px;
      width: calc(1.1em + 4px);
      height: calc(1.1em + 4px);
      background-color: var(--c8y-icon-stroke-color, $component-background-default);
      mask-image: var(--_icon-mask-filled, var(--_icon-mask));
      mask-size: contain;
      mask-repeat: no-repeat;
      mask-position: center;
      -webkit-mask-image: var(--_icon-mask-filled, var(--_icon-mask));
      -webkit-mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: center;
      z-index: 0;
    }
  }
}
} // @if $use-svg-icons