@import '../../scss/variables.scss';

// #variables
$s-progress-circle-size: 100px !default;
$s-progress-circle-track-color: $s-gray-300 !default;
$s-progress-circle-trail-color: $s-primary !default;
// #endvariables

.s-progress-circle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: $s-progress-circle-size;
  height: $s-progress-circle-size;

  @at-root {
    .s-progress-circle-track {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      background-color: $s-progress-circle-track-color;

      @at-root {
        .s-progress-circle-trail {
          width: 100%;
          height: 100%;
          color: $s-progress-circle-trail-color;

          @at-root {
            .s-progress-circle-cap {
              position: absolute;
              top: 0;
              left: 50%;
              background-color: currentColor;
              border-radius: 50%;

              .s-progress-circle-percent-zero & {
                display: none;
              }
            }
            .s-progress-circle-cap-start {
              transform: translate(-50%, 0);
            }
            .s-progress-circle-cap-end {
              transform: translate(-50%, -50%);
            }
          }
        }
      }
    }
  }
}