$progressHeight: 0.5em;
$progressHatchAngle: -45deg;
$progressHatchSpeed: 1s;
$progressHatchColor: rgba(white, 0.5);
$progressHatchSize: 1em;

@keyframes progress {
  0% {
    background-position: $progressHatchSize 0;
  }
  100% {
    background-position: 0 0;
  }
}

@keyframes scale-in {
  0% {
    opacity: 0;
    transform: scale(0.3)
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scale-out {
  0% {
    opacity: 0;
    transform: scale(1.3)
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rotate-in {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(360deg);
  }
  60% {
    transform: scale(1.3) rotate(#{360 * 0.4}deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes diagonal-slide-in {
  0% {
    opacity: 0;
    transform: translate3d(100%, -100%, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes drop-in {
  0% {
    opacity: 0;
    transform: translateY(-300%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.reacticon {
  position: relative;
  display: inline-block;
}

.reacticon__type {
  path,
  rect {
    transform-origin: 50%;
  }
}


.reacticon__label {
  bottom: 0.6em;
  display: inline-block;
  font-weight: bold;
  left: 0;
  line-height: 1;
  position: absolute;
  right: 0;
  text-align: center;
  text-transform: uppercase;
}

.reacticon__progress {
  $width: 60%;
  $margin: -($width / 2);
  border-radius: $progressHeight / 2;
  bottom: 0.9em;
  height: $progressHeight;
  left: 50%;
  margin: 0 0 0 $margin;
  overflow: hidden;
  position: absolute;
  width: $width;
}

.reacticon__progress__fill {
  border-radius: inherit;
  height: inherit;

  .is-processing & {
    animation: progress $progressHatchSpeed linear infinite;
    background-image: linear-gradient($progressHatchAngle, $progressHatchColor 25%, transparent 25%, transparent 50%, $progressHatchColor 50%, $progressHatchColor 75%, transparent 75%, transparent);
    background-size: $progressHatchSize $progressHatchSize;
    width: 100%;
  }
}

// Animations
.is-animated {
  // type label
  .reacticon__label {
    opacity: 0;
    animation: scale-out 0.2s ease-in 0.3s forwards;
  }

  // text
  @for $i from 1 through 4 {
    .reacticon__text_row-#{$i} {
      $interval: 0.1s;
      animation: scale-in #{($i * $interval)} ease-in;
    }
  }

  // table
  @for $i from 1 through 7 {
    .reacticon__table_row-#{$i} {
      $interval: 0.05s;
      animation: drop-in #{($i * $interval + $interval)} ease-in;
    }
  }

  // code
  @for $i from 1 through 7 {
    .reacticon__code_row-#{$i} {
      $interval: 0.05s;
      animation: diagonal-slide-in #{($i * $interval + $interval)} ease-in;
    }
  }

  .reacticon__code_sidebar {
    animation: scale-in 0.2s ease-in;
    transform-origin: 50%;
  }

  .reacticon__code_numbers {
    animation: scale-in 0.4s ease-in;
    transform-origin: 50%;
  }


  // image
  .reacticon__image_bg {
    animation: scale-in 0.1s ease-in;
  }

  .reacticon__image_front-mtn {
    animation: scale-in 0.3s ease-in;
  }

  .reacticon__image_rear-mtn {
    animation: scale-in 0.2s ease-in;
  }

  .reacticon__image_sun {
    animation: scale-in 0.4s ease-in;
  }

  // slides
  .reacticon__slides_bg {
    animation: scale-in 0.1s ease-in;
  }

  .reacticon__slides_pie {
    animation: rotate-in 0.35s ease-out;
  }

  .reacticon__slides_slice {
    opacity: 0;
    animation: diagonal-slide-in 0.2s ease-out 0.2s forwards;
  }
}

