/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

/*
 * Note this is very closely coupled to the indicator mask SVG as this masks out
 * the icon behind to draw the 'stroke' around the indicator dot.
 *
 * The SVG is a 24x24px black square with a circle of radius 6 positioned
 * 4px above and to the right of the canvas. This is the size of the indicator
 * dot plus the stroke (dimensions calculated from the figma).
 */

.indicator-icon {
  /* This is called 'button size' but the docs say 'icon size' */
  inline-size: var(--cpd-icon-button-size);
  block-size: var(--cpd-icon-button-size);
  aspect-ratio: 1 / 1;
  color: var(--cpd-color-icon-tertiary);
  position: relative;
}

.indicator-icon svg {
  inline-size: 100%;
  block-size: 100%;
}

.indicator-icon[data-indicator] svg {
  mask-image: url("./indicator-mask.svg");
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-size: 100%;
}

.indicator-icon[data-indicator]::before {
  content: "";
  position: absolute;

  /* The dot is 1/12th above & to the right of the canvas */
  inset-block-start: -8.3333%;
  inset-inline-end: -8.3333%;

  /* and is 1/3rd the size of the canvas */
  inline-size: 33.3333%;
  block-size: 33.333%;
  border-radius: 50%;
  box-sizing: border-box;

  --background-color: var(--cpd-color-icon-primary);

  background-color: var(--background-color);
}

.indicator-icon[data-indicator="success"]::before {
  --background-color: var(--cpd-color-icon-success-primary);
}

.indicator-icon[data-indicator="critical"]::before {
  --background-color: var(--cpd-color-icon-critical-primary);
}

@media (forced-colors: active) {
  .indicator-icon[data-indicator]::before {
    border: 1px solid var(--background-color);
  }
}