@import './theme/default';
@import './theme/font';
@import './theme/timing-functions';

$transition-spec: 160ms $timing-fn-ease-in;
$mask-opacity: 0.2;

$state-color-type-map: (
  normal: primary,
  success: success,
  exception: error,
);

$state-color-depth-map: (
  normal: 4,
  success: 2,
  exception: 2,
);

.zent-progress {
  &-info {
    @include font-normal;
    @include theme-color(color, stroke, 3);
    font-weight: $font-weight-medium;
    display: inline-block;

    & > .zenticon {
      font-size: 20px;
    }
  }

  &-type__line {
    .zent-progress-container {
      display: flex;
      align-items: center;
    }

    .zent-progress-wrapper {
      display: inline-block;
      vertical-align: middle;
      border-radius: 100px;
      background-color: rgba(0, 0, 0, 0.05);
    }

    .zent-progress-wrapper--round .zent-progress-inner {
      border-top-right-radius: 100px;
      border-bottom-right-radius: 100px;
    }

    .zent-progress-wrapper--square:not(.zent-progress-wrapper--finished)
      .zent-progress-inner {
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px;
    }

    .zent-progress-inner {
      transition: all $transition-spec;
      position: relative;
      border-radius: 100px;

      &:after {
        display: block;
        position: absolute;
        top: 0;
        content: ' ';
        width: 20%;
        height: 100%;
        transform: translateX(-100%);
        background: linear-gradient(
          to right,
          rgba($theme-stroke-9, 0),
          $theme-stroke-9
        );
        background: linear-gradient(
          to right,
          theme-rgba(stroke, 9, 0),
          theme-rgb(stroke, 9)
        );
        animation: 1400ms $timing-fn-linear 0s infinite normal both running
          zent-ani-progress-mask-move;
      }
    }

    .zent-progress-info {
      margin-left: 8px;
      white-space: nowrap;
      vertical-align: middle;
      height: 20px;
      line-height: 20px;
    }

    @mixin line-state-style($state, $no-animation) {
      $color-type: map-get($state-color-type-map, $state);
      $color-depth: map-get($state-color-depth-map, $state);

      &.zent-progress-state__#{$state} {
        .zent-progress-inner {
          @include theme-color(background-color, $color-type, $color-depth);

          @if $no-animation {
            &:after {
              display: none;
            }
          }
        }

        .zent-progress-info {
          @include theme-color(color, stroke, 1);

          & > .zenticon {
            @include theme-color(color, $color-type, $color-depth);
          }
        }
      }
    }

    @include line-state-style(normal, false);
    @include line-state-style(success, true);
    @include line-state-style(exception, true);
  }

  &-type__circle {
    position: relative;
    display: inline-block;

    .zent-progress-wrapper,
    .zent-progress-inner {
      display: inline-block;
      position: absolute;
      top: 0;
      left: 0;
    }

    .zent-progress-wrapper {
      @include theme-color(border-color, stroke, 8);
      border-style: solid;
      box-sizing: border-box;
      border-radius: 50%;
    }

    .zent-progress-info {
      display: flex;
      height: 100%;
      justify-content: center;
      align-items: center;
    }

    .zent-progress-inner-path,
    .zent-progress-path-mask {
      stroke-linecap: round;
      fill: none;
      transform-origin: center;

      &--square {
        stroke-linecap: square;
      }
    }

    .zent-progress-inner-path {
      transition: stroke-dashoffset $transition-spec;
    }

    .zent-progress-path-mask {
      transition: transform 400ms $timing-fn-linear;
    }

    @mixin circle-state-style($state) {
      $color-type: map-get($state-color-type-map, $state);
      $color-depth: map-get($state-color-depth-map, $state);

      &.zent-progress-state__#{$state} {
        .zent-progress-inner-path {
          @include theme-color(stroke, $color-type, $color-depth);
        }

        .zent-progress-info {
          @include theme-color(color, stroke, 1);

          & > .zenticon {
            @include theme-color(color, $color-type, $color-depth);
          }
        }
      }
    }

    @include circle-state-style(normal);
    @include circle-state-style(success);
    @include circle-state-style(exception);
  }
}

@keyframes zent-ani-progress-mask-move {
  0% {
    left: 0;
    opacity: $mask-opacity;
  }

  28% {
    left: 100%;
    opacity: $mask-opacity;
  }

  29% {
    left: 100%;
    opacity: 0;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}