/**
 * @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 10.04.2026
 * @@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-default-background-contextual, #DFE1EA);
            color: var(--kern-color-feedback-default-contextual, #454B6B);
        }

        &[value]::-webkit-progress-bar {
            background: var(--kern-color-feedback-default-background-contextual, #DFE1EA);
            border-radius: var(--kern-metric-border-radius-small, 2px);
        }

        &[value]::-webkit-progress-value {
            background-color: var(--kern-color-feedback-default-contextual, #454B6B);
            border-radius: var(--kern-metric-border-radius-small, 2px);
        }

        &[value]::-moz-progress-bar {
            background-color: var(--kern-color-feedback-default-contextual, #454B6B);
            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 */
            // }

        }
    }
}