@import 'variable';

$class-prefix: 'cn-ui-m';
$sizes: small, medium, large;

.#{$hashClassName}.#{$class-prefix}-progress {
  margin-top: var(--cn-progress-margin);
  margin-bottom: var(--cn-progress-margin);

  display: flex;
  align-items: center;
  .#{$class-prefix}-progress {
    &-track {
      width: 100%;
    }
  }

  &-line {
    box-sizing: border-box;

    @each $size in $sizes {
      &--#{$size} {
        width: 100%;
        padding: var(--cn-progress-#{$size}-spacing) 0;
        .#{$class-prefix}-progress-line-show-border {
          border: 1px solid $m-color-bg-dark;
        }
        .#{$class-prefix}-progress-line-bar {
          transition: all 0.3s ease;
        }
        .#{$class-prefix}-progress-line-text {
          font-size: $m-font-size-body-1;
          color: $m-color-text;
          margin-left: $m-s-8;
          word-break: keep-all;
        }
        .#{$class-prefix}-progress-line-#{$size}-corner {
          border-radius: var(--cn-progress-bar-#{$size}-corner);
        }
      }
    }
  }

  &-circle {
    --track-width: #{$m-s-4};
    --size: #{$m-s-60};
    --track-color: #{$m-color-bg-disabled};
    --fill-color: #{$m-color-primary};

    --percent: 0;
    --pi: 3.14159265358979;
    --radius: calc(var(--size) / 2 - var(--track-width) / 2);
    --circumference: calc(var(--radius) * var(--pi) * 2);

    display: inline-block;
    width: var(--size);
    height: var(--size);

    @each $size in $sizes {
      &--#{$size} {
        --size: var(--cn-progress-circle-#{$size}-size);
        font-size: var(--cn-progress-circle-#{$size}-font-size);
      }
    }

    .#{$class-prefix}-progress-circle-svg {
      width: 100%;
      height: 100%;
      > .#{$class-prefix}-progress-circle-track,
      .#{$class-prefix}-progress-circle-fill {
        stroke-width: var(--track-width);
        r: var(--radius);
        cx: calc(var(--size) / 2);
        cy: calc(var(--size) / 2);
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
      }
      > .#{$class-prefix}-progress-circle-track {
        stroke: var(--track-color);
      }
      > .#{$class-prefix}-progress-circle-fill {
        transition: stroke-dashoffset 0.35s;
        stroke: var(--fill-color);
        stroke-dasharray: var(--circumference);
        stroke-dashoffset: calc(
          var(--circumference) * (1 - var(--percent) / 100)
        );
        stroke-linecap: round;
      }
    }

    .#{$class-prefix}-progress-circle-content {
      position: relative;
      margin: auto;
      width: 100%;
      height: 100%;
    }

    .#{$class-prefix}-progress-circle-info {
      position: absolute;
      width: 100%;
      top: 50%;
      left: 50%;
      text-align: center;
      transform: translate(-50%, -50%);
    }
  }
}