// ********************************************
// container definition
$progress-indicator: #{$prefix}-determinate-progress-indicator;
$progress-bar: #{$prefix}-progress-bar;
$status-bar: #{$prefix}-status-bar;
$segment-progress: #{$progress-bar}-segment-progress;

// ********************************************
// dimsum components
$dstruncatedtext: #{$prefix}-truncated-tooltip-text;

// ********************************************
// element definition
$title-el: #{$progress-indicator}__title;

.#{$progress-indicator} {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  grid-template-areas:
    'title counter'
    'progressbar progressbar';

  margin: space(s) space(m);

  &__title,
  &__counter {
    color: color(neutral, 500);
    @include body-micro-text-style();

    @at-root .#{$progress-indicator}--disabled {
      color: color(neutral, 400);
    }
  }

  .#{$dstruncatedtext} {
    width: initial;
  }

  &__title {
    padding-right: space(s);
    grid-area: title;
  }

  &__counter {
    white-space: nowrap;
    grid-area: counter;
    text-align: right;
  }

  .#{$progress-bar} {
    display: flex;
    grid-area: progressbar;
    height: space(xxs) * 0.5;
    position: relative;
    background: color(neutral, 100);
    border-radius: border-size();

    &__progress {
      &:not(:first-child) {
        margin-left: space(xxs) * 0.5;
      }
      transition: width duration(fast) easing(base);
      position: relative;
      height: 100%;
    }
  }
}

.#{$progress-indicator}--disabled {
  .#{$progress-indicator}__title {
    color: color(neutral, 400);
  }

  .#{$progress-indicator}__counter {
    color: color(neutral, 200);
  }

  .#{$progress-bar}__progress {
    background: color(neutral, 200);
  }
}

.#{$progress-bar}__progress {
  &--default {
    background-color: color(neutral, 500);
  }
  &--success {
    background-color: color(success, 900);
  }
  &--warning {
    background-color: color(warning, 900);
  }
  &--info {
    background-color: color(brand-primary, 500);
  }
  &--error {
    background-color: color(danger, 900);
  }
}