.css-counter{--size: 3rem;width:calc(3*var(--size));height:calc(1*var(--size));position:relative;user-select:none;border-radius:4px}.css-counter:has(input:focus-visible){outline:2px solid;outline-offset:4px}.css-counter input,.css-counter label{position:absolute;top:0;left:-1000vw}.css-counter label{display:grid;place-items:center;width:var(--size);height:var(--size);cursor:pointer;color:rgba(0,0,0,0);border-radius:4px}.css-counter input:checked+label{left:var(--size);color:unset}.css-counter label:has(+input:checked){left:0}.css-counter input:checked+label+input+label{left:calc(2*var(--size))}.css-counter:not(.css-counter--loop):has(input:nth-child(1):checked) .css-counter__button--minus,.css-counter:not(.css-counter--loop):has(input:nth-last-child(3):checked) .css-counter__button--plus{border:none;background:none;color:var(--neutral-400)}.css-counter--loop:has(input:nth-last-child(3):checked) label:nth-child(2){left:calc(2*var(--size))}.css-counter--loop:has(input:nth-child(1):checked) label:nth-last-child(2){left:0}.css-counter--hover label:has(+input:checked):hover,.css-counter--hover input:checked+label+input+label:hover{background:rgba(0,0,0,.1)}.css-counter__ui{display:flex;width:100%;height:100%;justify-content:space-between}.css-counter__button{border:1px solid var(--neutral-400);background:var(--neutral-50);width:var(--size);height:var(--size);display:grid;place-items:center;border-radius:4px}.inputs-only,.inputs-with-buttons{display:flex;gap:.25rem;width:100%;overflow:auto;font-size:1.25em;align-items:center;user-select:none}.inputs-only label,.inputs-with-buttons label{position:relative;border:1px solid rgba(0,0,0,0);border-radius:4px}.inputs-only label::before,.inputs-with-buttons label::before{display:block;position:absolute;width:fit-content;border:1px solid var(--neutral-300);border-radius:4px;left:50%;transform:translateX(-50%);font-size:.75rem;padding:0 .25rem}.inputs-only input,.inputs-with-buttons input{outline-offset:2px}.inputs-only{padding:1.25rem .5rem}.inputs-only input:checked+label{color:oklch(.5616 .198 258.79)}.inputs-only input:checked+label::before{content:"current";top:100%}.inputs-only label:has(+input:checked){color:oklch(.597 .207 10)}.inputs-only label:has(+input:checked)::before{content:"previous";bottom:100%}.inputs-only input:checked+label+input+label{color:oklch(.5644 .185 299.82)}.inputs-only input:checked+label+input+label::before{content:"next";bottom:100%}.inputs-only--loop:has(input:nth-last-child(2):checked) label:nth-child(2){color:oklch(.5644 .185 299.82)}.inputs-only--loop:has(input:nth-last-child(2):checked) label:nth-child(2)::before{content:"next";bottom:100%}.inputs-only--loop:has(input:nth-child(1):checked) label:nth-last-child(1){color:oklch(.597 .207 10)}.inputs-only--loop:has(input:nth-child(1):checked) label:nth-last-child(1)::before{content:"previous";bottom:100%}.inputs-with-buttons label,.inputs-with-buttons input{display:none}.inputs-with-buttons label{width:3rem;height:3rem;align-items:center;justify-content:center;border:1px solid currentColor}.inputs-with-buttons input:checked+label{color:oklch(.5616 .198 258.79);display:flex}.inputs-with-buttons label:has(+input:checked){color:oklch(.597 .207 10);display:flex;cursor:pointer;font-size:0}.inputs-with-buttons label:has(+input:checked)::after{font-size:1.5rem;content:"-"}.inputs-with-buttons input:checked+label+input+label{color:oklch(.5644 .185 299.82);display:flex;cursor:pointer;font-size:0}.inputs-with-buttons input:checked+label+input+label::after{font-size:1.5rem;content:"+"}