@layer components{.custom-number-input{border-radius:var(--s-radius-field);border:var(--s-border-width-default) solid var(--s-color-border-default);background:var(--s-color-surface-default);grid-template-columns:minmax(80px,1fr) 24px;grid-template-areas:"input up""input down";align-items:stretch;width:-moz-fit-content;width:fit-content;transition:border-color .2s,background-color .2s;display:grid;overflow:hidden;&.form-field--number--fullwidth{width:100%}}.custom-number-input:hover:not(:focus-within):not(.invalid):not([aria-invalid=true]){border-color:var(--s-color-border-hover)}.custom-number-input.invalid,.custom-number-input[aria-invalid=true]{background-color:var(--s-color-surface-error-light);border-color:var(--s-color-border-error)!important}.custom-number-input:focus-within{border-color:var(--s-color-border-focus);outline:none}.custom-number-input:active:not(.invalid):not([aria-invalid=true]){border-color:var(--s-color-border-active)}.custom-number-input input[type=number]{box-sizing:border-box;width:100%;min-width:80px;height:40px;font-size:var(--s-type-placeholder-font-size);line-height:var(--s-type-placeholder-line-height);color:var(--s-color-text-default);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;background:0 0;border:none;outline:none;grid-area:input;-webkit-padding-before:0;padding-block-start:0;-webkit-padding-after:0;padding-block-end:0;-webkit-padding-start:var(--s-spacing-2);padding-inline-start:var(--s-spacing-2);-webkit-padding-end:var(--s-spacing-2);padding-inline-end:var(--s-spacing-2)}.custom-number-input input[type=number]::-webkit-inner-spin-button,.custom-number-input input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;display:none}.custom-number-input input[type=number]:focus{border-color:var(--s-color-border-focus)}.custom-number-input input[type=number][disabled]{background-color:var(--s-color-surface-inactive);border-color:var(--s-color-border-inactive);color:var(--s-color-text-inactive)}.custom-number-input.invalid input[type=number],.custom-number-input[aria-invalid=true] input[type=number]{color:var(--s-color-text-error)}.custom-number-input.invalid input[type=number]::placeholder,.custom-number-input[aria-invalid=true] input[type=number]::placeholder{color:var(--s-color-text-error);opacity:.5}.custom-number-input__controls{flex-direction:column;grid-area:up/up/down/down;height:100%;display:flex}.custom-number-input__btn{border:none;border-left:1px solid var(--s-color-border-default);background:var(--s-color-surface-default);width:24px;height:20px;color:var(--s-color-text-subtle);cursor:pointer;padding:0;font-size:16px;transition:background .2s,color .2s,border-color .2s}.custom-number-input__btn--up{border-bottom:1px solid var(--s-color-border-default)}.custom-number-input__btn--down{border-top:1px solid var(--s-color-border-default)}.custom-number-input__btn:disabled{color:var(--s-color-text-inactive);cursor:default}.custom-number-input__btn.is-focus{border-left:1px solid var(--s-color-border-focus)}.custom-number-input__btn:active:not(:disabled){border-left:1px solid var(--s-color-border-active)}.custom-number-input__btn.invalid{border-left:1px solid var(--s-color-border-error);color:var(--s-color-text-error)}.custom-number-input__btn.invalid .custom-number-input__icon{color:var(--s-color-text-error)!important;fill:var(--s-color-text-error)!important}.custom-number-input__icon{width:20px;height:20px;color:var(--s-color-text-subtle);margin:auto;display:block}.form-field--number input[type=number][disabled]{background-color:var(--s-color-surface-inactive);border-color:var(--s-color-border-inactive);color:var(--s-color-text-inactive)}.form-field--number input[type=number]::placeholder{color:var(--s-color-text-inactive)}}