/// ----------------------------------------------------------------------

/// Progress Bar

/// ----------------------------------------------------------------------

@use 'colours';
@use 'transitions';
@use 'z-index';

/// -------------------
/// Progress Bar config
/// -------------------

$height: 0.75rem !default;

/// -------------------
/// Progress Bar selectors
/// -------------------

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: $height;
  transition: width 2s linear;

  &--info {
    border-color: colours.$state-info;
    background-color: colours.$state-info;
    color: colours.$state-info;

  }

  &--success {
    border-color: colours.$state-success;
    background-color: colours.$state-success;
    color: colours.$state-success;
  }

  &--warning {
    border-color: colours.$state-warning;
    background-color: colours.$state-warning;
    color: colours.$state-warning;
  }

  &--error {
    border-color: colours.$state-error;
    background-color: colours.$state-error;
    color: colours.$state-error;

  }
}

/// -------------------
/// Progress Bar container
/// -------------------

.progress-bar__container {
  position: relative;
  width: 100%;
  height: $height;
  background-color: #f2f2f2;
}
