/*
 * Copyright (c) 2026, Salesforce, Inc.,
 * All rights reserved.
 * For full license text, see the LICENSE.txt file
 */

/**
 * Progress Ring base — paint surface for the theme layer.
 *
 * Reads only canonical `--slds-c-progressring-*` hooks. Variant
 * modifiers (`_warning`, `_expired`, `_complete`, `_active-step`,
 * `_large`) reassign the canonical hooks under their root-anchored
 * Rule-5 compounds in the per-theme files. Concrete values live in
 * `themes/<theme>.css`.
 */

.slds-progress-ring {
  position: relative;
  display: inline-block;
  height: var(--slds-c-progressring-size);
  width: var(--slds-c-progressring-size);
  border-radius: var(--slds-c-progressring-radius-border);
  background-color: var(--slds-c-progressring-color-background);

  .slds-icon_container {
    line-height: 0;
  }
}

/**
 * Progress indicator — the SVG path that paints the progress arc.
 */
.slds-progress-ring .slds-progress-ring__progress {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  height: 100%;
  width: 100%;
  transform: scale(-1, 1) rotate(-90deg);

  svg {
    width: 100%;
  }
}

.slds-progress-ring .slds-progress-ring__path {
  fill: var(--slds-c-progressring-color-foreground);
}

.slds-progress-ring .slds-progress-ring__progress-head {
  position: absolute;
  /* the progress head SVG needs to be 3px outset from the ring SVG to prevent the head from being clipped */
  height: calc(100% + 0.375rem);
  width: calc(100% + 0.375rem);
  /* and the progress head SVG origin needs to be moved in by 3px to align with the ring's origin */
  inset-block-start: -0.1875rem;
  inset-inline-start: -0.1875rem;
  transform: scale(-1, 1) rotate(-90deg);

  svg {
    width: 100%;
  }
}

/**
 * Inner content area — sits inside the ring track and holds the icon
 * (or other content). Inset values are structural geometry (the ring
 * stroke is 3px wide, so content insets by 3px to clear it).
 */
.slds-progress-ring .slds-progress-ring__content {
  position: absolute;
  inset-block-start: 0.1875rem;
  inset-inline-end: 0.1875rem;
  inset-block-end: 0.1875rem;
  inset-inline-start: 0.1875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--slds-c-progressring-radius-border);
  background-color: var(--slds-c-progressring-content-color-background);

  .slds-icon {
    width: var(--slds-c-progressring-icon-size);
    fill: var(--slds-c-progressring-icon-color-foreground);
  }
}