@use "@angular/material" as mat;

.sc-semi-circle-progress {
  
  &__wrapper {
    --sc-semi-circle-progress-value: 0;
    --sc-semi-circle-progress-diameter: 200px;
    --sc-semi-circle-progress-stroke-width: 8;
    --sc-semi-circle-label-font-size: 16px;
    --sc-semi-circle-label-line-height: 24px;
    --sc-semi-circle-label-height: var(--sc-semi-circle-label-line-height);
    
    position: relative;
    width: var(--sc-semi-circle-progress-diameter);
    margin: 0 auto;
  }

  &__label {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    column-gap: 4px;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: var(--sc-semi-circle-label-font-size);
    line-height: var(--sc-semi-circle-label-line-height);
    padding-top: calc(var(--sc-semi-circle-label-height) / 2);

    &.--headline {
      --sc-semi-circle-label-font-size: 24px;
      --sc-semi-circle-label-line-height: 32px;
    }

    &.--title {
      --sc-semi-circle-label-font-size: 20px;
      --sc-semi-circle-label-line-height: 32px;
    }

    &.--body-1 {
      --sc-semi-circle-label-font-size: 14px;
      --sc-semi-circle-label-line-height: 20px;
    }

    &.--body-2 {
      --sc-semi-circle-label-font-size: 16px;
      --sc-semi-circle-label-line-height: 24px;
    }

    &.--caption {
      --sc-semi-circle-label-font-size: 12px;
      --sc-semi-circle-label-line-height: 20px;
    }
    
    &.--wrap {
      --sc-semi-circle-label-height: 42px;
      flex-direction: column;
    }
  }

  svg {
    width: var(--sc-semi-circle-progress-diameter);
    margin: auto;
    display: block;

    path {
      stroke-linecap: round;
      stroke-width: var(--sc-semi-circle-progress-stroke-width);
    }

    path.background {
      // stroke: #e7e7e8;
      fill: none;
    }

    path.foreground {
      // stroke: lightblue;
      fill: none;
      stroke-dasharray: 247;
      stroke-dashoffset: calc(247 * (1 - (var(--sc-semi-circle-progress-value) / 100)));
      transition: stroke-dashoffset 300ms ease-in-out;
    }
  }
}