// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
// of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
// and https://github.com/palantir/blueprint/blob/master/PATENTS

@import "~bourbon/app/assets/stylesheets/bourbon";
@import "../../common/variables";
@import "../progress/common";

/*
Progress bars

Markup:
<div class="pt-progress-bar {{.modifier}}">
  <div class="pt-progress-meter" style="width: 25%"></div>
</div>
<div class="pt-progress-bar pt-intent-primary {{.modifier}}">
  <div class="pt-progress-meter" style="width: 50%"></div>
</div>
<div class="pt-progress-bar pt-intent-success {{.modifier}}">
  <div class="pt-progress-meter" style="width: 75%"></div>
</div>
<div class="pt-progress-bar pt-intent-danger {{.modifier}}">
  <div class="pt-progress-meter" style="width: 100%"></div>
</div>

.pt-no-stripes   - No stripes
.pt-no-animation - No animation

Styleguide pt-progress-bar
*/

$progress-bar-stripes-color: rgba($white, 0.2) !default;

$progress-bar-height: round($pt-grid-size * 0.8) !default;
$progress-bar-stripes-size: $pt-grid-size * 3 !default;
$progress-bar-border-radius: $pt-grid-size * 4 !default;

$progress-bar-gradient: linear-gradient(
  -45deg,
  $progress-bar-stripes-color 25%,
  transparent 25%,
  transparent 50%,
  $progress-bar-stripes-color 50%,
  $progress-bar-stripes-color 75%,
  transparent 75%
) !default;

@keyframes linear-progress-bar-stripes {
  from {
    background-position: 0 0;
  }

  to {
    background-position: $progress-bar-stripes-size 0;
  }
}

.pt-progress-bar {
  display: block;
  position: relative;
  border-radius: $progress-bar-border-radius;
  background: $progress-track-color;
  width: 100%;
  height: $progress-bar-height;
  overflow: hidden;

  .pt-progress-meter {
    display: inline-block;
    position: absolute;
    border-radius: $progress-bar-border-radius;
    background: $progress-bar-gradient;
    background-color: $progress-head-color;
    background-size: $progress-bar-stripes-size $progress-bar-stripes-size;
    // initial state is a full bar, a la "indeterminate"
    width: 100%;
    height: 100%;
    transition: width ($pt-transition-duration * 2) $pt-transition-ease;
  }

  &:not(.pt-no-animation):not(.pt-no-stripes) .pt-progress-meter {
    animation: linear-progress-bar-stripes ($pt-transition-duration * 3) linear infinite reverse;
  }

  &.pt-no-stripes .pt-progress-meter {
    background-image: none;
  }
}

.pt-dark .pt-progress-bar,
.pt-progress-bar.pt-dark {
  background: $dark-progress-track-color;

  .pt-progress-meter {
    background-color: $dark-progress-head-color;
  }
}

@each $intent, $color in $pt-intent-colors {
  .pt-progress-bar.pt-intent-#{$intent} .pt-progress-meter {
    background-color: $color;
  }
}