@use 'sass:math';
@import '../style/base.scss';
// #variables
$sar-progress-circle-size: 100px !default;
$sar-progress-circle-track-color: $sar-secondary-bg-color !default;
$sar-progress-circle-trail-color: $sar-primary !default;
$sar-progress-circle-trail-transition-duration: $sar-duration !default;

// 暗黑模式
$sar-progress-circle-track-dark-color: $sar-dark-secondary-bg-color !default;
// #endvariables

@include bem(progress-circle) {
  @include b() {
    @include universal;
    justify-content: center;
    align-items: center;
    width: $sar-progress-circle-size;
    height: $sar-progress-circle-size;
  }

  @include e(graph) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  @include e(track) {
    stroke: $sar-progress-circle-track-color;
  }

  @include e(trail) {
    stroke: $sar-progress-circle-trail-color;
    transition: stroke-dasharray $sar-progress-circle-trail-transition-duration
      ease;
  }

  @include e(outer) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: $sar-progress-circle-track-color;
  }

  @include e(inner) {
    width: 100%;
    height: 100%;
    color: $sar-progress-circle-trail-color;
  }

  @include e(cap) {
    position: absolute;
    top: 0;
    left: 50%;
    background-color: currentColor;
    border-radius: 50%;
  }

  @include e(cap-start) {
    transform: translate(-50%, 0);
  }

  @include e(cap-end) {
    transform: translate(-50%, -50%);
  }
}

@include theme(dark) {
  @include bem(progress-circle) {
    @include e(track) {
      stroke: $sar-progress-circle-track-dark-color;
    }

    @include e(outer) {
      background-color: $sar-progress-circle-track-dark-color;
    }
  }
}