@import './abstracts/variable';
@import './abstracts/mixin';

@include b(progress) {
  width: 100%;
  height: $-progress-height;
  display: flex;
  align-items: center;
  padding: $-progress-padding;

  @include e(outer) {
    display: block;
    flex: 1;
    position: relative;
    height: $-progress-height;
    border-radius: $-progress-height / 2;
    background: $-progress-bg;
  }
  @include e(inner) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: $-progress-height / 2;
    background: $-progress-color;
    transition: background .2s, width .3s;
    font-size: $-progress-icon-fs;

    @include when(danger) {
      background: $-progress-linear-danger-color;
    }
    @include when(success) {
      background: $-progress-linear-success-color;
    }
  }
  @include e(label) {
    width: 30px;
    margin-left: 9px;
    color: $-progress-label-color;
    font-size: $-progress-label-fs;
  }
  @include e(icon) {
    font-size: $-progress-icon-fs;

    @include when(danger) {
      color: $-progress-danger-color;
    }
    @include when(success) {
      color: $-progress-success-color;
    }
  }
}