{"version":3,"file":"progressBar.module.mjs","names":[],"sources":["../../../../package/common/progressBar/progressBar.module.pcss"],"sourcesContent":[".progressBar {\n  min-width: 100px;\n  min-height: 10px;\n\n  /* Not --background-accent-light, which is Card's own surface: on a Card the track vanished. A\n     tint of the text colour shows on any surface. */\n  background-color: var(--progress-bar-track-color, color-mix(in srgb, currentcolor 20%, transparent));\n  border-radius: var(--default-border-radius);\n  overflow: hidden;\n  display: flex;\n  align-items: stretch;\n\n  &-fill {\n    background-color: var(--primary-color);\n    background-image: var(--primary-gradient, none);\n    width: 0;\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n    transition: width 0.3s ease;\n    transform: translateZ(0);\n    container-type: inline-size;\n\n    &-end {\n      border-radius: 0 var(--default-border-radius) var(--default-border-radius) 0;\n    }\n\n    /* After the rule above, which it ties on specificity. */\n    &-toned {\n      background-color: var(--tone-fill);\n      background-image: var(--tone-gradient);\n    }\n  }\n\n  &-label {\n    color: var(--text-on-primary);\n    font-size: 12px;\n    padding: 0 min(5px, 4cqw);\n    box-sizing: border-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  &-fill-toned &-label {\n    color: var(--tone-contrast);\n  }\n}\n\n/* The bar still shows its value, it just stops sliding to it. */\n@media (prefers-reduced-motion: reduce) {\n  .progressBar-fill {\n    transition: none;\n  }\n}\n"],"mappings":""}