@import '~normalize.css/normalize.css';
@import '~@amber-ds/visual/src/_variables.scss';

$stroke: 7px;

.info-progress {
  font-size: 12px;
  padding-top: 8px;
  display: flex;
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow: hidden;
  justify-content: space-between;
  color: rgba(0,0,0,0.5);
  .label {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.info-progress:not([disabled]) {
  color: #1F1F1F;
}

.progress-bar {
  background: $grey-50;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
 

  .bar-background {
    width: 100%;
    height: $stroke;
    border-radius: $stroke;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    
    .bar-track {
      background: $grey-500;
      transition: width 0.3s ease;
      height: $stroke;
      border-radius: $stroke;
    }
    .bar-track:not([disabled]) {
      background: $orange-500;
    }
  }
}