/* stylelint-disable alpha-value-notation */
/* stylelint-disable max-line-length */
/* stylelint-disable color-function-notation */
@mixin linear-gradient($gradientLine, $colorStops...) {
  background-image: linear-gradient(convert-gradient-direction($gradientLine), $colorStops);
}

@mixin loader-stripe($color) {
  background: linear-gradient(135deg, $color 25%, darken($color, 10%) 25%, darken($color, 10%) 50%, $color 50%, $color 75%, darken($color, 10%) 75%);
  height: $progress-height;
  background-size: $progress-height+1 $progress-height+1;
  animation: stripes 3s linear infinite;
  border-radius: inherit;
}

@mixin progress-container {
  height: $progress-height;
  border-radius: $progress-radius;
  background-color: $progress-background;
  margin-bottom: $progress-margin-bottom;
}

/// Adds styles for the inner meter of a progress bar.
@mixin progress-meter {
  width: 0%;
  height: 100%;
  display: block;
  position: relative;
  border-radius: $progress-radius;
}

/// Adds styles for text in the progress meter.
@mixin progress-meter-text {
  @include absolute-center;

  margin: $space-0;
  font-weight: bold;
  color: $color-white;
  white-space: nowrap;
  font-size: $progress-font-size;
  border-radius: $progress-radius;
}

@mixin progress-size(
  $height: $progress-height,
  $font-size: $progress-font-size
) {
  height: $height;

  .c-progress-meter {
    height: $height;

    &-animated {
      height: $height;
      background-size: $height $height;
    }
  }

  .c-progress-meter-text {
    font-size: $font-size;
  }
}


@keyframes stripes {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 50px 50px;
  }
}


@mixin btn-in-progress() {
  &,
  &:hover,
  &:active,
  &:focus,
  &:visited,
  &[disabled],
  &.disabled {
    cursor: wait;
    box-shadow: none;
    text-shadow: none;
    white-space: nowrap;
    background: linear-gradient(-45deg, rgba(white, .6) 25%, transparent 25%, transparent 50%, rgba(white, .6) 50%, rgba(white, .6) 75%, transparent 75%, transparent), $color-gray-6;
    background-repeat: repeat;
    background-size: $progress-btn-animate-size $progress-btn-animate-size, 100% 100%;
    animation: btn-progress-bar-stripes 2s linear infinite;
  }
}

@mixin btn-in-progress-style($bg, $color) {
  &,
  &:hover,
  &:active,
  &:focus,
  &:visited,
  &[disabled],
  &.disabled {
    color: $color;
    background: $bg;
    background-image: linear-gradient(-45deg, $bg 25%, $progress-opaque-color 25%, $progress-opaque-color 50%, $bg 50%, $bg 75%, $progress-opaque-color 75%);
    background-size: $progress-btn-animate-size $progress-btn-animate-size, 100% 100%;
  }
}


@keyframes btn-progress-bar-stripes {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: $progress-btn-animate-size 0;
  }
}