@reference 'tailwindcss';

:host {
  margin-top: calc(var(--spacing) * 1);
  display: block;

  --mat-progress-bar-track-height: calc(var(--spacing) * 2);
  --mat-progress-bar-active-indicator-height: calc(var(--spacing) * 2);

  ::ng-deep .mdc-linear-progress__bar-inner {
    --mat-progress-bar-active-indicator-color: transparent;
  }

  &.low {
    ::ng-deep .mdc-linear-progress__bar-inner {
      --mat-progress-bar-active-indicator-color: theme(--color-red-400);
    }
  }

  &.weak {
    ::ng-deep .mdc-linear-progress__bar-inner {
      --mat-progress-bar-active-indicator-color: theme(--color-amber-400);
    }
  }

  &.medium {
    ::ng-deep .mdc-linear-progress__bar-inner {
      --mat-progress-bar-active-indicator-color: var(--color-green-500);
    }
  }

  &.strong {
    ::ng-deep .mdc-linear-progress__bar-inner {
      --mat-progress-bar-active-indicator-color: var(--color-green-500);
    }
  }

  &.very-strong {
    ::ng-deep .mdc-linear-progress__bar-inner {
      --mat-progress-bar-active-indicator-color: var(--color-green-500);
    }
  }
}
