.number{--number-border:var(--input-border);--number-border-radius:var(--input-border-radius);--number-height:var(--input-height);--number-background:var(--input-background-color);--number-gutter:var(--input-gutter);--number-button-size:.75em}.number__button,.number__ui{border-radius:var(--number-border-radius);transition:color var(--hover-speed),background-color var(--hover-speed)}.number__ui{align-items:center;border:var(--number-border);cursor:pointer;display:flex;flex-wrap:nowrap;font-weight:500;height:var(--number-height);overflow:hidden;text-align:center}.number__ui:hover,[data-js-focus-visible] .number__ui[data-focus-visible-added]{background-color:var(--number-background)}.number__button,.number__input{height:100%;line-height:1;transition:opacity var(--hover-speed)}.number__button{flex:0 1 auto;font-size:var(--number-button-size);padding:var(--number-gutter);vertical-align:middle}.number__input{flex:1 1 auto;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;width:3em}.number__button:focus,.number__input:focus{outline:0}.number__ui:hover .number__button,.number__ui:hover .number__input{opacity:.6}.is-hovered .number__ui .number__input,.number__ui:hover .number__button:hover,.number__ui:hover .number__input:hover,[data-js-focus-visible] .number__ui:hover .number__button[data-focus-visible-added],[data-js-focus-visible] .number__ui:hover .number__input[data-focus-visible-added]{opacity:1}