@scope(.instui-number-input){&{box-sizing:border-box;inline-size:100%;block-size:var(--instui-component-text-input-height-md);padding-inline:var(--instui-component-text-input-padding-horizontal-md);align-items:center;gap:var(--instui-component-text-input-gap-content);background-color:var(--instui-component-text-input-background-color);border:var(--instui-component-text-input-border-width) solid var(--instui-component-text-input-border-color);border-radius:var(--instui-component-text-input-border-radius);color:var(--instui-component-text-input-text-color);font-family:var(--instui-component-text-input-font-family);font-size:var(--instui-component-text-input-font-size-md);padding-inline-end:0;display:flex;overflow:hidden}&:hover{background-color:var(--instui-component-text-input-background-hover-color);border-color:var(--instui-component-text-input-border-hover-color)}&>input,& .instui-text-input{block-size:auto;min-inline-size:0;font:inherit;color:inherit;background:0 0;border:0;outline:none;flex:1;padding:0}&>input::placeholder{color:var(--instui-component-text-input-placeholder-color)}&>input::-webkit-outer-spin-button,&>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}&>input[type=number]{-moz-appearance:textfield;appearance:textfield}&.-disabled,&:has(>input:disabled){background-color:var(--instui-component-text-input-background-disabled-color);border-color:var(--instui-component-text-input-border-disabled-color);color:var(--instui-component-text-input-text-disabled-color);cursor:not-allowed}&.-readonly{background-color:var(--instui-component-text-input-background-readonly-color);border-color:var(--instui-component-text-input-border-readonly-color);color:var(--instui-component-text-input-text-readonly-color)}&.-invalid{border-color:var(--instui-component-text-input-error-border-color)}&.-success{border-color:var(--instui-component-text-input-success-border-color)}&:has(:focus-visible){outline:var(--instui-focus-outline-width) var(--instui-focus-outline-style) var(--instui-focus-outline-color);outline-offset:var(--instui-focus-outline-offset);border-radius:var(--instui-focus-outline-radius)}&:is(.-invalid,:has(>input:user-invalid)):has(:focus-visible){outline-color:var(--instui-focus-outline-color-danger)}&.-success:has(:focus-visible){outline-color:var(--instui-focus-outline-color-success)}&.-size-sm{block-size:var(--instui-component-text-input-height-sm);padding-inline:var(--instui-component-text-input-padding-horizontal-sm);font-size:var(--instui-component-text-input-font-size-sm)}&.-size-md{block-size:var(--instui-component-text-input-height-md);padding-inline:var(--instui-component-text-input-padding-horizontal-md);font-size:var(--instui-component-text-input-font-size-md)}&.-size-lg{block-size:var(--instui-component-text-input-height-lg);padding-inline:var(--instui-component-text-input-padding-horizontal-lg);font-size:var(--instui-component-text-input-font-size-lg)}& .arrows{border-inline-start:var(--instui-component-text-input-border-width) solid var(--instui-component-text-input-border-color);flex-direction:column;flex:none;align-self:stretch;inline-size:1.5rem;display:flex}& .arrows button{background:var(--instui-component-text-input-arrows-background-color);color:var(--instui-color-icon-interactive-action-secondary-base);cursor:pointer;border:0;flex:1;justify-content:center;align-items:center;padding:0;display:flex}& .arrows button+button{border-block-start:var(--instui-component-text-input-border-width) solid var(--instui-component-text-input-border-color)}& .arrows button:hover{background:var(--instui-component-text-input-arrows-background-hover-color)}& .arrows button:active{background:var(--instui-component-text-input-arrows-background-active-color)}& .arrows button:disabled{background:var(--instui-component-text-input-arrows-background-disabled-color);cursor:not-allowed}& .arrows button:before{content:"";block-size:.875em;inline-size:.875em;-webkit-mask:var(--instui-icon-chevron-up) center / contain no-repeat;mask:var(--instui-icon-chevron-up) center / contain no-repeat;background:currentColor}& .arrows button.down:before{-webkit-mask:var(--instui-icon-chevron-down) center / contain no-repeat;mask:var(--instui-icon-chevron-down) center / contain no-repeat}&.-size-small{block-size:var(--instui-component-text-input-height-sm);padding-inline:var(--instui-component-text-input-padding-horizontal-sm);font-size:var(--instui-component-text-input-font-size-sm)}&.-size-medium{block-size:var(--instui-component-text-input-height-md);padding-inline:var(--instui-component-text-input-padding-horizontal-md);font-size:var(--instui-component-text-input-font-size-md)}&.-size-large{block-size:var(--instui-component-text-input-height-lg);padding-inline:var(--instui-component-text-input-padding-horizontal-lg);font-size:var(--instui-component-text-input-font-size-lg)}}