{"version":3,"file":"BarList.module.cjs","names":[],"sources":["../../../src/components/BarList/BarList.module.css"],"sourcesContent":[".list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-3, 0.75rem);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.item {\n    display: flex;\n    flex-direction: column;\n    gap: var(--tempest-space-1, 0.25rem);\n}\n\n.line {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--tempest-space-3, 0.75rem);\n    font-size: var(--tempest-text-sm);\n}\n\n/*\n * The label truncates instead of wrapping: a plan name long enough to wrap would\n * push its own bar down and break the alignment the list exists to show.\n */\n.label {\n    min-width: 0;\n    overflow: hidden;\n    color: var(--tempest-text);\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.value {\n    display: inline-flex;\n    align-items: baseline;\n    gap: var(--tempest-space-2, 0.5rem);\n    color: var(--tempest-text);\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n}\n\n/*\n * The share is de-emphasised by size, and only then by colour — and the colour it\n * uses is resolved against the page background, which is where this text actually\n * sits. Putting the label on top of the bar would need the fill's own foreground\n * re-verified per series, which is the trap this layout avoids entirely.\n */\n.percentage {\n    color: var(--tempest-text-subtle);\n    font-size: var(--tempest-text-xs);\n}\n\n.track {\n    overflow: hidden;\n    width: 100%;\n    height: 0.5rem;\n    border-radius: var(--tempest-radius-sm, 0.25rem);\n    background-color: var(--tempest-surface-2);\n}\n\n.fill {\n    height: 100%;\n    border-radius: inherit;\n    transition: width var(--tempest-duration-base) ease;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .fill {\n        transition: none;\n    }\n}\n"],"mappings":";"}