// ============================================================================
// :: Progress
// ============================================================================

// ============================================================================
// :: Root
// ============================================================================
.a-progress {
  --progress-bar-color: #{$secondary-color-base};

  position: relative;

  width: 100%;
  height: 0.7rem;
  overflow: hidden;

  background-color: $background-color-light;
}

// ============================================================================
// :: Elements
// ============================================================================
.a-progress__bar {
  top: 0;
  left: 0;

  height: 100%;

  border-radius: 0 $border-radius-base $border-radius-base 0;
  background-color: var(--progress-bar-color);
}

// ============================================================================
// :: Modifiers
// ============================================================================
.a-progress--green {
  .a-progress__bar {
    --progress-bar-color: #{$ui-success};
  }
}

.a-progress--rounded {
  border-radius: $border-radius-1x-large;
}