@use "@angular/material" as mat;

@mixin sc-gradient-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-grey: if($is-dark-theme, hsl(0, 0%, 32%), hsl(0, 0%, 90%));

  $gradient-success-stop: 25%;
  $gradient-warning-stop: 50%;
  $gradient-danger-stop: 75%;

  .sc-gradient-progress {
    .sc-gradient-progress {
      &__tick {
        &::after,
        &::before {
          background-color: mat.get-color-from-palette($foreground, divider) !important;
        }
      }
    }

    &__axis {
      &-label {
        // font-size: $font-size-sm;
        color: mat.get-color-from-palette($foreground, secondary-text);
      }
    }

    &__tick {
      // line-height: $sc-gradient-progress-tick-line-height;
      // font-size: $sc-gradient-progress-tick-font-size;
      color: mat.get-color-from-palette($foreground, secondary-text);
    }

    &__value {
      .value {
        &__bg {
          fill: $bg-grey;
        }

        &__content {
          font-size: 16px;
          line-height: 24px;
          // font-variation-settings: "wght" var(--font-weight-medium);
        }
      }
    }

    &__graph {
      border-bottom: 1px solid mat.get-color-from-palette($foreground, divider);
    }

    &__title {
      // font-size: $font-size-sm;
      // font-variation-settings: "wght" var(--font-weight-medium);
      // letter-spacing: 0.2em;
    }

    &__bar {
      background-color: $bg-grey;
    }

    &__bg-gradient {
      background: linear-gradient(
        mat.get-color-from-palette($success, 500) $gradient-success-stop,
        mat.get-color-from-palette($warning, 500) $gradient-warning-stop,
        mat.get-color-from-palette($danger, 500) $gradient-danger-stop
      );
    }

    &__warning {
      color: mat.get-color-from-palette($danger, 500);
    }

    &:not(.sc-gradient-progress--sm) &__warning {
      background-color: mat.get-color-from-palette($background, hover);
    }

    &--md {
      .sc-gradient-progress {
        &__value {
          .value {
            &__bg {
              fill: $bg-grey;
            }

            &__content {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}