@import '../../global';
@import '../../mixins/typography';

.progress {
  @include action_small;
  width: 100%;

  &_inner {
    width: 100%;
    height: $font-size-small / 2;

    border-radius: $border-radius;

    background-color: color('gray', 0.75);

    display: flex;
    justify-content: flex-start;
    align-items: center;

    box-sizing: border-box;

    overflow: hidden;

    &_bar {
      height: inherit;

      border-top-right-radius: $border-radius * 2;
      border-bottom-right-radius: $border-radius * 2;

      &__primary {
        background-color: color('primary');
      }

      &__success {
        background-color: color('success');
      }

      &__success {
        background-color: color('success');
      }

      &__warning {
        background-color: color('warning');
      }

      &__danger {
        background-color: color('danger');
      }

      &__secondary {
        background-color: color('secondary');
      }
    }
  }
}