@import "./../variable.scss";
@mixin breatheKeyframe($animationName, $color) {
  @keyframes #{$animationName} {
    0% { box-shadow: 0 0 8px #{$color}; }
    50% { box-shadow: 0 0 18px #{$color}; }
    100% { box-shadow: 0 0 8px #{$color};  }
  }
}
@include breatheKeyframe(breatheGreen, $color-green);
@include breatheKeyframe(breatheMain, $color-main);

.hx-progress-modal {
  z-index: 101;
  top: -100%;
  left: 0;
  display: block;
  text-align: center;
  background-color: white;
  box-shadow: 0 0 40px rgba(0, 0, 0, .2);
  font-size: $font-sm;
  transition: all .4s;
  &.show {
    top: 0;
  }
  .bar {
    height: $pm-sm;
    width: 100%;
    display: block;
    border-radius: $pm-sm;
    background-color: $color-gray;
    margin-bottom: $pm-sm;
    .progress {
      height: 100%;
      display: block;
      max-width: 100%;
      background-color: $color-main;
      border-radius: $pm-sm;
      box-shadow: 0 0 $pm-sm $color-main;
      transition: box-shadow .4s, background-color .4s;
      animation: breatheMain .8s infinite;
      &.done {
        background-color: $color-green;
        animation: breatheGreen .8s infinite;
        box-shadow: 0 0 $pm-sm $color-green;
      }
    }
  }
  .pad-status {
    .btn-close {
      margin-left: $pm-sm;
      color: $color-gray-deep;
      cursor: default;
      &:hover {
        color: $color-red;
      }
    }
  }
}
@media screen and (min-width: 640px) {
  .hx-progress-modal {
    width: 50%;
    padding: $pm-sm $pm-md;
    @include centerHorizontal;
    position: fixed;
    @include borderRadiusBottom($pm-bg);
  }
}
@media screen and (max-width: 640px) {
  .hx-progress-modal {
    width: 100%;
    display: block;
    position: fixed;
    padding: $pm-sm;
    @include borderRadiusBottom($pm-sm/2);
  }
}