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

/**
  * Initialize Progress Bar
 */
.slds-progress-bar {
  appearance: none;
  display: block;
  width: 100%;
  height: var(--slds-c-progressbar-sizing-block);
  background-color: var(
    --slds-c-progressbar-context-color-background,
    var(--slds-c-progressbar-color-background)
  );
  border: 0;
  position: relative;
}

/**
  * Adds a border radius to the progress bar to give it a circular look
*/
.slds-progress-bar_circular {
  border-radius: var(--slds-c-progressbar-radius-border);

  .slds-progress-bar__value {
    border-radius: var(--slds-c-progressbar-radius-border);
  }
}

/**
  * Fill up blue bar inside of the progress bar
*/
.slds-progress-bar__value {
  display: block;
  background-color: var(
    --slds-c-progressbar-context-color-foreground,
    var(--slds-c-progressbar-color-foreground)
  );
  height: 100%;
}

/**
 * Create a vertical progress bar
 */
.slds-progress-bar_vertical {
  height: 100%;
  width: var(--slds-c-progressbar-sizing-block);
}