.datemeter{--split:.25rem;--splitgap:.25rem;--barStart:var(--success);--barEnd:var(--gray-1);--start:0%;--end:calc(50% - var(--splitgap) - var(--split))}.datemeter>*{display:flex;flex-flow:row nowrap;position:relative;width:100%}.datemeter-graph{background-color:var(--gray-light);border-radius:var(--UIRadius)}.datemeter-graph *{opacity:0;padding:.25rem 1rem;white-space:nowrap}.datemeter-graph div:not(.datemeter-graph--full){flex:0 0 var(--end);width:var(--end)}.datemeter-graph--before{animation:progress .5s ease-out .5s forwards;background:var(--barStart);border-radius:var(--UIRadius) 0 0 var(--UIRadius);color:var(--gray-light);order:0}.datemeter-graph--after{animation:progressNoFade .5s ease-out 1s forwards;background:var(--barEnd);border-end-end-radius:1rem;border-end-start-radius:0;border-start-end-radius:1rem;border-start-start-radius:0;color:var(--gray-10);order:2;position:relative;text-align:end}.datemeter-graph:has(.datemeter-graph--after:not([hidden])){gap:var(--splitgap)}.datemeter-graph:has(.datemeter-graph--after:not([hidden])):after{animation:fade .5s ease-out 1s forwards;background-color:var(--gray-3);content:"";display:flex;opacity:0;order:1;position:relative;width:var(--split)}.datemeter-graph--after,.datemeter-graph--before,.datemeter-graph--full{font-size:1rem;font-weight:400;opacity:1}@media(max-width:21.25em){.datemeter-graph--after,.datemeter-graph--before,.datemeter-graph--full{font-size:.875rem}}.datemeter-graph--after.no-animate,.datemeter-graph--before.no-animate,.datemeter-graph--full.no-animate{animation-duration:.1s}.datemeter-graph--full{--end:100%;animation:progressNoFade 2s ease-out forwards;background:var(--gray-1);border-radius:var(--UIRadius);color:var(--gray-10);flex:1 var(--end);text-align:center;width:unset}.datemeter-legend{padding-block-start:1rem}.datemeter-legend>*{display:block;line-height:1.25;margin:0 auto;text-align:center}.datemeter-legend--date,.datemeter-legend--text{color:var(--gray-1);font-size:var(--ty-s)}.datemeter-legend--date{font-weight:500;text-transform:uppercase}.datemeter-legend--text{display:block}.datemeter--container{cursor:pointer;display:block;width:100%}.datemeter--container:hover{opacity:.9}@keyframes progress{0%{flex:0 var(--start);opacity:0;width:var(--start)}50%{opacity:1}to{flex:0 var(--end);opacity:1;width:var(--end)}}@keyframes progressNoFade{0%{flex:0 var(--start);opacity:.75;width:var(--start)}to{flex:0 var(--end);opacity:1;width:var(--end)}}