/* =====================================================================
   adc-number-input — number field with large +/- buttons.
   One border on the group, none on the middle input. Brand color via the
   --adc-* tokens (Falcon.css), neutrals via Bootstrap's --bs-*.
   ===================================================================== */

.adc-number-input {
    display: flex;
    min-height: 44px;
    border: 1px solid var(--bs-gray-300);
    border-radius: 6px;
    background: #fff;
    /* clips the button hover fill at the rounded corners */
    overflow: hidden;
}
.adc-number-input:focus-within { border-color: var(--adc-blue) }
.adc-number-input.is-valid { border-color: var(--adc-green) }
.adc-number-input.is-invalid { border-color: var(--bs-danger) }

.adc-number-input-button {
    flex: 0 0 44px;
    width: 44px;
    border: 0;
    color: #fff;
    background: var(--adc-blue-gradient);
    cursor: pointer;
    font: inherit;
    /* drops the 300ms double-tap-zoom delay on touch */
    touch-action: manipulation;
}
.adc-number-input-button:hover:not([aria-disabled="true"]) {
	background: var(--adc-blue-gradient-hover);
}
.adc-number-input-button[aria-disabled="true"] {
    color: var(--bs-gray-500);
    cursor: not-allowed;
}

/* outranks a host page's own input[type=number] base styles */
.adc-number-input input.adc-number-input-field[type=number] {
    flex: 1 1 auto;
    /* without this the number input's intrinsic width blows out the row */
    min-width: 0;
    width: auto;
    border: 0;
    border-radius: 0;
    padding: 0 4px;
    background: transparent;
    color: var(--bs-body-color);
    font: inherit;
    appearance: textfield;
    -moz-appearance: textfield;
}
/* the group already shows focus, so suppress a ring inside it */
.adc-number-input input.adc-number-input-field[type=number]:focus,
.adc-number-input input.adc-number-input-field[type=number]:focus-visible {
    outline: none;
    box-shadow: none;
}
.adc-number-input-field::-webkit-outer-spin-button,
.adc-number-input-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}