@import "../settings/colors";
@import "../settings/core";
@import "../settings/fonts";

@import "../tools/mixins/core";

//
// @variables
//

// We use this to set the progress bar height
$progress-bar-height: rem-calc(4) !default;
$progress-bar-color: $gray-7;

// We use these to control the border styles
$progress-bar-border-color: scale-color($white, $lightness: 20%) !default;
$progress-bar-border-size: 1px !default;
$progress-bar-border-style: solid !default;
$progress-bar-border-radius: $global-radius !default;

// We use these to control the margin & padding
$progress-bar-pad: 0 !default;
$progress-bar-margin-bottom: rem-calc(10) !default;

// We use these to set the meter colors
$progress-meter-color: $blue-base !default;
$progress-meter-secondary-color: $secondary-color !default;
$progress-meter-success-color: $green-base !default;
$progress-meter-alert-color: $red-base !default;
$progress-meter-warning-color: $yellow-base;
$progress-meter-info-color: $mint-base;

$progress-bg: $gray-6;
$progress-bar-color: $brand-white;
$progress-border-radius: $border-radius-base;
$progress-bar-bg: $blue-base;
$progress-bar-success-bg: $green-base;
$progress-bar-warning-bg: $yellow-base;
$progress-bar-danger-bg: $red-base;
$progress-bar-info-bg: $mint-base;

// @mixins
//
// We use this to set up the progress bar container
@mixin progress-container {
  background-color: $progress-bg;
  border: $progress-bar-border-size $progress-bar-border-style $progress-bar-border-color;
  height: $progress-bar-height;
  margin-bottom: $progress-bar-margin-bottom;
  padding: $progress-bar-pad;
}

// @mixins
//
// $bg - Default: $progress-meter-color || $blue-base
@mixin progress-meter($bg:$progress-meter-color) {
  background: $bg;
  display: block;
  height: 100%;
}


@include exports("progress-bar") {
  /* Progress Bar */
  .progress {
    @include progress-container;

    // Meter
    .meter {
      @include progress-meter;
    }
    &.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); }
    &.success .meter { @include progress-meter($bg:$progress-meter-success-color); }
    &.alert .meter { @include progress-meter($bg:$progress-meter-alert-color); }

    &.radius { @include radius($progress-bar-border-radius);
      .meter { @include radius($progress-bar-border-radius - 1); }
    }

    &.round { @include radius(1000px);
      .meter { @include radius(999px); }
    }
  }
}

/* begin progress-bars override */

@include exports("progress-bar-ui") {
  .progressbar-label {
    text-align: left;
  }
  .progressbar-progress {
    float: right;
  }
  .progressbar-label, .progressbar-progress {
    font-family: $font-family-sans-serif;
    font-size: rem-calc(11);
    color: $black;
  }
  /* Progress Bar */
  .progress {
    @include progress-container;
    border: none;

    // Meter
    .meter {
      @include progress-meter;
    }
    &.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); }
    &.success .meter { @include progress-meter($bg:$progress-meter-success-color); }
    &.danger .meter { @include progress-meter($bg:$progress-meter-alert-color); }
    &.warning .meter { @include progress-meter($bg:$progress-meter-warning-color); }
    &.info .meter { @include progress-meter($bg:$progress-meter-info-color); }

  }

}

/**
* @component progress
* @section default
* @html

<div class="columns small-6">
    <span>
      <div class="progressbar-info">
        <span class="progressbar-label">ProgressBar Default</span>
        <span class="progressbar-progress">50 / 100</span>
      </div>
      <div class="progress ">
        <span
          class="meter"
          role="progressbar"
          aria-labelledby="progressbar"
          aria-valuenow="50"
          aria-valuemin="0"
          aria-valuemax="100"
          aria-valuetext="50%"
          style="width: 50%;"
        >
        </span>
      </div>
    </span>
</div>


**/