/**
 * @file _progress.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * @@VERSION@@
 * @brief Styles für die Progress Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Progress Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen.
 */

.kern-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kern-metric-space-small, 8px);

  progress {
    /* Determinate: */
    &[value] {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: none;

      width: 100%;
      height: var(--kern-metric-dimension-2x-small, 8px);
      border-radius: var(--kern-metric-border-radius-small, 2px);
      background: var(--kern-color-feedback-loader-background, #DFE1EA);
      color: var(--kern-color-feedback-loader);
    }
    &[value]::-webkit-progress-bar {
      background: var(--kern-color-feedback-loader-background, #DFE1EA);
      border-radius: var(--kern-metric-border-radius-small, 2px);
    }
    &[value]::-webkit-progress-value {
      background-color: var(--kern-color-feedback-loader);
      border-radius: var(--kern-metric-border-radius-small, 2px);
    }
    &[value]::-moz-progress-bar {
      background-color: var(--kern-color-feedback-loader);
      border-radius: var(--kern-metric-border-radius-small, 2px);
    }

     @media (forced-colors: active) {
      &[value] {
        background-color: var(--kern-color-layout-background-default);
        border: 1px solid var(--kern-color-layout-background-inverted);
        color: var(--kern-color-layout-background-inverted);
        forced-color-adjust: none;
      }
      &[value]::-webkit-progress-bar {
        background-color: var(--kern-color-layout-background-default);
      }
      &[value]::-webkit-progress-value {
        background-color: var(--kern-color-layout-background-inverted);
      }
      &[value]::-moz-progress-bar {
        background-color: var(--kern-color-layout-background-inverted);
      }

    // /* Indeterminate: */
    // &:not([value]) {
    //   /* style rules */
    // }
    // &:not([value])::-webkit-progress-bar {
    //   /* style rules */
    // }
    // &:not([value])::-webkit-progress-value {
    //   /* style rules */
    // }
    // &:not([value])::-moz-progress-bar {
    //   /* style rules */
    // }

  }
}
}