// Lightning Design System 2.29.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
 * @summary Progress Ring component
 *
 * @variant
 * @name base
 * @selector .slds-progress-ring
 * @support prototype
 * @restrict div
 */
.slds-progress-ring {
  position: relative;
  display: inline-block;
  height: $square-icon-utility-large;
  width: $square-icon-utility-large;
  border-radius: $square-icon-utility-large;
  background: var(--slds-g-color-border-base-1, #{$color-border});

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

/**
 * @summary Progress indicator
 *
 * @selector .slds-progress-ring__progress
 * @restrict .slds-progress-ring div
 */
.slds-progress-ring__progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: scale(-1, 1) rotate(-90deg);

  svg {
    width: 100%;
  }
}

/**
 *
 * @selector .slds-progress-ring__path
 * @restrict .slds-progress-ring__progress path, .slds-progress-ring__progress circle
 */
.slds-progress-ring__path {
  fill: var(--slds-g-color-success-base-50, #{$color-background-success-dark});
}

/**
 *
 * @selector .slds-progress-ring__progress-head
 * @restrict .slds-progress-ring__progress div
 */
.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
  top: -0.1875rem;
  left: -0.1875rem;
  transform: scale(-1, 1) rotate(-90deg);

  svg {
    width: 100%;
  }
}

/**
 * @summary Progress ring content area
 *
 * @selector .slds-progress-ring__content
 * @restrict .slds-progress-ring > div
 */
.slds-progress-ring__content {
  position: absolute;
  top: $progress-ring-width;
  right: $progress-ring-width;
  bottom: $progress-ring-width;
  left: $progress-ring-width;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: $square-icon-utility-large;
  background: var(--slds-g-color-neutral-base-100, #{$color-background-progress-ring-content});

  .slds-icon {
    width: $square-icon-small-content;
  }
}

/**
 * @summary Warning colors
 *
 * @selector .slds-progress-ring_warning
 * @restrict .slds-progress-ring
 * @modifier
 * @group theme
 */
.slds-progress-ring_warning {

  .slds-progress-ring__content {
    background: var(--slds-g-color-neutral-base-100, #{$color-background-progress-ring-content});
  }

  .slds-icon,
  .slds-progress-ring__path {
    fill: var(--slds-g-color-warning-base-60, #{$color-background-warning});
  }
}

/**
 * @summary Expired colors
 *
 * @selector .slds-progress-ring_expired
 * @restrict .slds-progress-ring
 * @modifier
 * @group theme
 */
.slds-progress-ring_expired {

  .slds-progress-ring__content {
    background: var(--slds-g-color-neutral-base-100, #{$color-background-progress-ring-content});
  }

  .slds-icon,
  .slds-progress-ring__path {
    fill: var(--slds-g-color-error-base-40, #{$color-background-error});
  }
}

/**
 * @summary Complete colors
 *
 * @selector .slds-progress-ring_complete
 * @restrict .slds-progress-ring
 * @modifier
 * @group theme
 */
.slds-progress-ring_complete {

  .slds-icon {
    fill: var(--slds-g-color-neutral-base-100, #{$color-background-progress-ring-content});
  }

  .slds-progress-ring__path {
    fill: var(--slds-g-color-success-base-50, #{$color-background-success-dark});
  }

  .slds-progress-ring__content {
    background: var(--slds-g-color-success-base-50, #{$color-background-success-dark});
  }
}

/**
 * @summary Larger ring size
 *
 * @selector .slds-progress-ring_large
 * @restrict .slds-progress-ring
 * @modifier
 * @group size
 */
.slds-progress-ring_large {
  height: $square-icon-large-content;
  width: $square-icon-large-content;

  .slds-icon {
    width: $square-icon-medium-content;
  }
}

/**
 * @summary Blue progress ring
 *
 * @selector .slds-progress-ring_active-step
 * @restrict .slds-progress-ring
 * @modifier
 * @group color
 */
.slds-progress-ring_active-step {

  .slds-progress-ring__path {
    fill: var(--slds-g-color-brand-base-60, #{$progress-color-border-active});
  }
}