/*-----------------------------------------------------
  BackToTop CSS
-----------------------------------------------------*/
.progress-wrap {
  @extend %d-block;
  position: fixed;
  right: 20px;
  bottom: 20px;
  height: 46px;
  width: 46px;
  cursor: pointer;
  border-radius: 50px;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  @include transform(translateY(15px));
  @include transition(all 200ms linear);

  &::after {
    @extend %p-absolute, %d-block;
    content: "\f062";
    font: var(--fa-font-solid);
    text-align: center;
    line-height: 46px;
    font-size: 20px;
    color: $color-5;
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    z-index: 1;
    border-radius: 50px;
    @include transition(all 200ms linear);
  }
  svg {
    path {
      fill: $color-7;
    }

    &.progress-circle {
      path {
        fill: $color-7;
        stroke: $color-primary;
        stroke-width: 5;
        box-sizing: border-box;
        @include transition(all 200ms linear);
      }
    }
  }

  &.active-progress {
    opacity: 1;
    visibility: visible;
    @include transform(translateY(0px));
  }
}
