@use "@angular/material" as mat;
@mixin sc-semi-circle-progress-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $success: map-get($theme, success);
  $warning: map-get($theme, warning);
  $danger: map-get($theme, danger);
  $foreground: map-get($theme, foreground);
  $background: map-get($theme, background);
  $is-dark-theme: map-get($theme, is-dark);

  $bg-primary: if(
    $is-dark-theme,
    desaturate(mat.get-color-from-palette($primary, 900), 30%),
    mat.get-color-from-palette($primary, 100)
  );
  $bg-accent: if(
    $is-dark-theme,
    desaturate(mat.get-color-from-palette($accent, 900), 30%),
    mat.get-color-from-palette($accent, 100)
  );
  $bg-success: if(
    $is-dark-theme,
    desaturate(mat.get-color-from-palette($success, 900), 30%),
    mat.get-color-from-palette($success, 100)
  );
  $bg-warning: if(
    $is-dark-theme,
    desaturate(mat.get-color-from-palette($warning, 900), 30%),
    mat.get-color-from-palette($warning, 100)
  );
  $bg-danger: if(
    $is-dark-theme,
    desaturate(mat.get-color-from-palette($danger, 900), 30%),
    mat.get-color-from-palette($danger, 100)
  );

  .sc-semi-circle-progress {
    // &__label {
    //   color: mat.get-color-from-palette($foreground, text);
    // }

    &__label {
      &.--wrap {

        .sc-semi-circle-progress {
          &__value {
            font-size: 32px;
            line-height: 32px;
            font-weight: 400;
          }

          &__suffix {
            font-size: 12px;
            font-weight: 400;
            color: mat.get-color-from-palette($foreground, secondary-text);
            text-transform: uppercase;
          }
        }
      }
    }

    svg {
      path.background {
        stroke: mat.get-color-from-palette($foreground, divider);
      }

      path.foreground {
        stroke: mat.get-color-from-palette($foreground, text);
      }
    }

    &__wrapper {
      &.--primary {
        svg {
          path.foreground {
            stroke: mat.get-color-from-palette($primary, 500);
          }

          path.background {
            stroke: $bg-primary;
          }
        }
      }

      &.--accent {
        svg {
          path.foreground {
            stroke: mat.get-color-from-palette($accent, 500);
          }

          path.background {
            stroke: $bg-accent;
          }
        }
      }

      &.--success {
        svg {
          path.foreground {
            stroke: mat.get-color-from-palette($success, 500);
          }

          path.background {
            stroke: $bg-success;
          }
        }
      }

      &.--warning {
        svg {
          path.foreground {
            stroke: mat.get-color-from-palette($warning, 500);
          }

          path.background {
            stroke: $bg-warning;
          }
        }
      }

      &.--danger {
        svg {
          path.foreground {
            stroke: mat.get-color-from-palette($danger, 500);
          }

          path.background {
            stroke: $bg-danger;
          }
        }
      }
    }
  }
}