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

/**
 * Progress Ring component
 */
.slds-progress-ring {
  position: relative;
  display: inline-block;
  height: var(--slds-g-sizing-7);
  width: var(--slds-g-sizing-7);
  border-radius: var(--slds-g-sizing-7);
  background-color: var(--slds-g-color-surface-container-3);

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

/**
 * Progress indicator
 */
.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__path {
  fill: var(--slds-g-color-success-1);
}

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

/**
 * Progress ring content area
 */
.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-g-sizing-7);
  background-color: var(--slds-g-color-surface-container-1);

  .slds-icon {
    width: var(--slds-g-sizing-4);
  }
}

/**
 * Warning colors
 */
.slds-progress-ring_warning {
  .slds-progress-ring__content {
    background-color: var(--slds-g-color-surface-container-1);
  }

  .slds-icon,
  .slds-progress-ring__path {
    fill: var(--slds-g-color-warning-1);
  }
}

/**
 * Expired colors
 */
.slds-progress-ring_expired {
  .slds-progress-ring__content {
    background-color: var(--slds-g-color-surface-container-1);
  }

  .slds-icon,
  .slds-progress-ring__path {
    fill: var(--slds-g-color-error-1);
  }
}

/**
 * Complete colors
 */
.slds-progress-ring_complete {
  .slds-icon {
    fill: var(--slds-g-color-surface-container-1);
  }

  .slds-progress-ring__path {
    fill: var(--slds-g-color-success-1);
  }

  .slds-progress-ring__content {
    background-color: var(--slds-g-color-success-1);
  }
}

/**
 * Larger ring size
 */
.slds-progress-ring_large {
  height: var(--slds-g-sizing-9);
  width: var(--slds-g-sizing-9);

  .slds-icon {
    width: var(--slds-g-sizing-5);
  }
}

/**
 * Blue progress ring
 */
.slds-progress-ring_active-step {
  .slds-progress-ring__path {
    fill: var(--slds-g-color-accent-1);
  }
}