//===========================================================

// Minovate - shortcodes/progress.scss

//===========================================================

.progress {
  background-color: lighten($slategray, 62%);
  @include box-shadow(none);

  .progress-bar {
    @include box-shadow(none);
    @include transition(width 1.1s linear);
    background-color: $theme-color;
  }

  &.progress-xxs {
    height: 2px;
    border-radius: 0;
  }

  &.progress-xs {
    height: 4px;
    border-radius: 2px;
  }

  &.progress-sm {
    height: 12px;
    border-radius: 3px;

    .progress-bar {
      font-size: $font-size-xs;
      line-height: 12px;
    }
  }

  &.not-rounded {
    border-radius: 0;
  }
}

.progress-list {
  position: relative;

  .label {
    color: $font-color;
    font-size: 12px;
    line-height: 24px;
    padding: 0;
    text-transform: uppercase;
  }

  .progress {
    position: relative;
    overflow: visible;
  }

  .progress-bar {
    position: absolute;
    border-radius: 2px;

    .progress-percent {
      position: absolute;
      top: -30px;
      right: 0;
      background-color: $font-color;
      color: #F9F9F9;
      height: 24px;
      line-height: 24px;
      padding: 0 5px;
      border-radius: 2px;

      &:after {
        content: '';
        @include triangle(12px, $font-color, down);
      }

      .counter {
        font-size: 11px;
        font-family: $font-lato;
        font-weight: $font-weight-normal;
        margin: 0;
      }
    }
  }
}

.progress-chart {
  position: relative;
  padding-bottom: 15px;

  &:before {
    content: '';
    position: absolute;
    height: 100%;
    border-left: 1px solid #eee;
    z-index: -1;
  }

  .label,
  .label .counter {
    font-family: $font-raleway;
    color: $font-color;
    font-weight: $font-weight-bold;
    font-size: 13px;
    line-height: 30px;
    padding: 0;
    text-transform: uppercase;
  }

  .label {
    padding-left: 10px;
  }

  .progress{
    background: transparent;
    border-radius: 0;
    margin-bottom: 0;
  }

  .progress-bar {
    border-radius: 0;
  }

  &.align-right {
    text-align: right;

    &:before {
      right: 0;
    }

    .label {
      padding-left: 0;
      padding-right: 10px;
    }

    .progress-bar {
      float: right;
    }
  }
}

//bar colors
.progress-bar-cyan {
  background-color: $cyan;
}
.progress-bar-amethyst {
  background-color: $amethyst;
}
.progress-bar-green {
  background-color: $green;
}
.progress-bar-orange {
  background-color: $orange;
}
.progress-bar-red {
  background-color: $red;
}
.progress-bar-greensea {
  background-color: $greensea;
}
.progress-bar-dutch {
  background-color: $dutch;
}
.progress-bar-hotpink {
  background-color: $hotpink;
}
.progress-bar-drank {
  background-color: $drank;
}
.progress-bar-blue {
  background-color: $blue;
}
.progress-bar-lightred {
  background-color: $lightred;
}
.progress-bar-slategray {
  background-color: $slategray;
}
.progress-bar-darkgray {
  background-color: $darkgray;
}