.f-counter{--counter-height:3rem;--counter-btn-size:2rem;--counter-border-radius:100px;--counter-border-color:var(--color-tertiary-500);--counter-btn-color:var(--color-conversion-600);--counter-btn-hover-color:var(--color-conversion-700);height:var(--counter-height);background:var(--color-white);border:1px solid var(--counter-border-color);border-radius:var(--counter-border-radius);align-items:center;gap:.25rem;padding:.5rem .75rem;display:inline-flex}.f-counter.--with-label{margin-top:.5rem;position:relative}.f-counter__label{font-size:var(--font-size-xs);color:var(--color-text-500);white-space:nowrap;background:var(--color-white);padding:0 .375rem;font-weight:500;line-height:1;position:absolute;top:0;left:50%;transform:translate(-50%,-50%)}.f-counter__controls{align-items:center;gap:.25rem;display:flex}.f-counter__btn{width:var(--counter-btn-size);height:var(--counter-btn-size);color:var(--counter-btn-color);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:all .2s;display:flex}.f-counter__btn:hover:not(.--disabled){color:var(--counter-btn-hover-color);background-color:#22c55e26}.f-counter__btn:active:not(.--disabled){transform:scale(.95)}.f-counter__btn.--disabled{color:var(--color-text-400);cursor:not-allowed}.f-counter__btn.--disabled:hover{background-color:#0000}.f-counter__btn.--disabled .icon{color:var(--color-text-400)}.f-counter__btn .icon{width:1rem;height:1rem}.f-counter__value{align-items:baseline;gap:.375rem;padding:0 .5rem;display:flex}.f-counter__number{font-size:var(--font-size-md);color:var(--color-text-500);outline:none;font-weight:700;line-height:1}.f-counter__number:focus{outline:none}.f-counter__number[contenteditable=true]:focus{border-bottom:1px solid var(--counter-btn-color)}.f-counter__units{font-size:var(--font-size-sm);color:var(--color-text-400);flex-shrink:0;font-weight:400;line-height:1}.f-counter.--disabled{opacity:.6;pointer-events:none;background:var(--color-tertiary-300)}.f-counter.--disabled .f-counter__btn{cursor:not-allowed}.f-counter:focus-within{border-color:var(--counter-btn-color)}