character-counter:not(:defined){display:none}character-counter{--counter-diameter:2rem;--counter-stroke-width:4;align-items:center;gap:.5rem;display:inline-flex;& .counter-wrapper{justify-content:space-between;align-items:center;gap:.5rem;display:flex;&>*{min-width:2rem}}& .remaining{text-align:right;font-weight:400}&[data-hide-count] .remaining{visibility:hidden}& .circle-container{width:var(--counter-diameter);height:var(--counter-diameter);transform:rotate(-90deg)}& .track{fill:none;stroke:var(--counter-track-color,#e0e0e0);stroke-width:var(--counter-stroke-width)}& .progress{fill:none;stroke:var(--counter-normal-color,#1d9bf0);stroke-width:var(--counter-stroke-width);stroke-linecap:round;stroke-dasharray:var(--circumference);stroke-dashoffset:var(--offset);transition:stroke-dashoffset .15s ease-out,stroke .15s ease-out;@media (prefers-reduced-motion:reduce){transition:none}}&[data-over-limit]{& .remaining{color:var(--counter-warning-color,#f4212e)}& .progress{stroke:var(--counter-warning-color,#f4212e)}}}