/* Progress bars + — i2t3 component styles
 * Richer horizontal bars (vs. the Bootstrap "progressbar"): style, size and
 * radius selectors plus an optional icon per bar. The circular variant is the
 * separate "Circular progress" element.
 */

.i2t3-progressbar-plus__item { margin-bottom: 1rem; }
.i2t3-progressbar-plus__item:last-child { margin-bottom: 0; }
.i2t3-progressbar-plus__head {
    display: flex;
    justify-content: space-between;
    margin-bottom: .25rem;
    font-size: .9rem;
}
.i2t3-progressbar-plus__title { font-weight: 600; }

/* Animated fill — the bar grows from 0 to its set width on load.
 * (The plain CSS transition never fired because the width is final at render.) */
.i2t3-progressbar-plus .progress-bar {
    transition: width .6s ease;
    animation: i2t3-pb-grow 1.1s ease-out both;
}
@keyframes i2t3-pb-grow {
    from { width: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
    .i2t3-progressbar-plus .progress-bar { animation: none; }
}

/* Sizes (bar height) */
.i2t3-progressbar-plus--xs .progress { height: 4px; }
.i2t3-progressbar-plus--sm .progress { height: 8px; }
.i2t3-progressbar-plus--md .progress { height: 16px; }
.i2t3-progressbar-plus--lg .progress { height: 28px; }

/* Radius */
.i2t3-progressbar-plus--radius-pill .progress,
.i2t3-progressbar-plus--radius-pill .progress-bar { border-radius: 50rem; }
.i2t3-progressbar-plus--radius-square .progress,
.i2t3-progressbar-plus--radius-square .progress-bar { border-radius: 0; }