/* Shared numeric control approved in the executable catalogue. */
.component-number{display:grid;grid-template-columns:minmax(0,1fr) 3rem;min-width:0;min-height:46px;border:1px solid var(--ds-border-strong);border-radius:var(--ds-radius-input);background:var(--ds-surface);color:var(--ds-text)}
.component-number>.component-number-input{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:.7rem 1rem;border:0;border-radius:inherit;background:transparent;color:inherit;font:inherit;font-weight:400;line-height:1.5;appearance:textfield;-moz-appearance:textfield}
.component-number>.component-number-input::-webkit-inner-spin-button,.component-number>.component-number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.component-number:has(>.component-number-input:is(:focus,:focus-visible)){outline:3px solid var(--ds-focus);outline-offset:-3px}
.component-number>.component-number-input:is(:focus,:focus-visible){outline:none}
.component-number-actions{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));align-self:center;block-size:70%;padding:0 .25rem}
.component-number-button{display:grid;place-items:center;min-width:0;padding:0;border:0;border-radius:var(--ds-radius-sm);background:transparent;color:inherit;font:inherit;cursor:pointer}
.component-number-button:hover:not(:disabled){background:var(--ds-surface-subtle)}
.component-number-button:active:not(:disabled){background:var(--ds-disabled-bg)}
.component-number-chevron{width:.55rem;height:.55rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0;pointer-events:none}
.component-number-button[data-number-step="1"]>.component-number-chevron{transform:rotate(225deg)}
.component-number-button[data-number-step="-1"]>.component-number-chevron{transform:rotate(45deg)}
.component-number .component-number-button:focus-visible{outline:3px solid var(--ds-focus);outline-offset:-3px}
.component-number-button:disabled{color:var(--ds-disabled);cursor:not-allowed}
.component-number:has(>.component-number-input:disabled){background:var(--ds-disabled-bg);color:var(--ds-disabled)}
.component-number:has(>.component-number-input[aria-invalid="true"]){border-color:var(--ds-error)}
@media(forced-colors:active){.component-number{border-color:CanvasText}.component-number-button:disabled{color:GrayText}}