{"version":3,"file":"IndicatorIcon.module.cjs","names":[],"sources":["../../../../src/components/Icon/IndicatorIcon/IndicatorIcon.module.css"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\n/*\n * Note this is very closely coupled to the indicator mask SVG as this masks out\n * the icon behind to draw the 'stroke' around the indicator dot.\n *\n * The SVG is a 24x24px black square with a circle of radius 6 positioned\n * 4px above and to the right of the canvas. This is the size of the indicator\n * dot plus the stroke (dimensions calculated from the figma).\n */\n\n.indicator-icon {\n  /* This is called 'button size' but the docs say 'icon size' */\n  inline-size: var(--cpd-icon-button-size);\n  block-size: var(--cpd-icon-button-size);\n  aspect-ratio: 1 / 1;\n  color: var(--cpd-color-icon-tertiary);\n  position: relative;\n}\n\n.indicator-icon svg {\n  inline-size: 100%;\n  block-size: 100%;\n}\n\n.indicator-icon[data-indicator] svg {\n  mask-image: url(\"./indicator-mask.svg\");\n  mask-position: center center;\n  mask-repeat: no-repeat;\n  mask-size: 100%;\n}\n\n.indicator-icon[data-indicator]::before {\n  content: \"\";\n  position: absolute;\n\n  /* The dot is 1/12th above & to the right of the canvas */\n  inset-block-start: -8.3333%;\n  inset-inline-end: -8.3333%;\n\n  /* and is 1/3rd the size of the canvas */\n  inline-size: 33.3333%;\n  block-size: 33.333%;\n  border-radius: 50%;\n  box-sizing: border-box;\n\n  --background-color: var(--cpd-color-icon-primary);\n\n  background-color: var(--background-color);\n}\n\n.indicator-icon[data-indicator=\"success\"]::before {\n  --background-color: var(--cpd-color-icon-success-primary);\n}\n\n.indicator-icon[data-indicator=\"critical\"]::before {\n  --background-color: var(--cpd-color-icon-critical-primary);\n}\n\n@media (forced-colors: active) {\n  .indicator-icon[data-indicator]::before {\n    border: 1px solid var(--background-color);\n  }\n}\n"],"mappings":""}