/**
* UX2 number field — appjs/common/ux2/stepField.js (skoStepField; LXP-2658). The input keeps its own form-control box;
 * − sits inside it on the left and + on the right, the number in the middle; it changes at once on ± (no rolling in
 * fields, LXP-2667). Loaded on every UX2 page (engine/ux2.php ux2HeadTags).
 */
.ux2-step {
    position: relative;
    display: block;
    min-width: 0;
}

.ux2-step > input {
    min-width: 124px;  /* The buttons take 88px: room for 3 digits, whatever width the page gives the field (LXP-2760) */
    padding-right: 44px !important;
    padding-left: 44px !important;
    font-variant-numeric: tabular-nums;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

/* The browser's own tiny arrows go: the ± do that job */
.ux2-step > input::-webkit-outer-spin-button,
.ux2-step > input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.ux2-step-btn {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 15px;
    color: var(--ux2k-ink-2, #3f4254);
    cursor: pointer;
    background: var(--ux2k-soft, #f4f6f8);
    border: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: background-color .15s ease, color .15s ease, transform .12s ease;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

.ux2-step-btn.is-down {
    left: 7px;
}

.ux2-step-btn.is-up {
    right: 7px;
}

.ux2-step-btn > :is(i.bi, svg.sko-i) {
    line-height: 1;
    color: inherit !important;
}

.ux2-step-btn:hover:not(:disabled) {
    color: #fff;
    background: var(--ux2k-brand, #1e5f69);
}

.ux2-step-btn:active:not(:disabled) {
    transform: translateY(-50%) scale(.9);
}

.ux2-step-btn:disabled {
    cursor: default;
    opacity: .35;
}

/* Small fields (form-control-sm, settings' numbers): smaller buttons */
.ux2-step > input.form-control-sm,
.ux2-step > input.form-control-solid.form-control-sm {
    min-width: 104px;
    padding-right: 36px !important;
    padding-left: 36px !important;
}

.ux2-step:has(> input.form-control-sm) .ux2-step-btn {
    width: 24px;
    height: 24px;
    font-size: 13px;
}

/* Touch screens: bigger targets */
@media (pointer: coarse) {
    .ux2-step-btn {
        width: 34px;
        height: 34px;
    }
}