.pxmkv-builder,
.pxmkv-replacement {
    --pxmkv-quantity-step-background: var(--pxmkv-color-quantity_step_dark_background, rgba(255,255,255,.07));
    --pxmkv-quantity-step-border: var(--pxmkv-color-quantity_step_dark_border, rgba(255,255,255,.35));
    --pxmkv-quantity-step-icon: var(--pxmkv-color-quantity_step_dark_icon, rgba(255,255,255,.78));
    --pxmkv-quantity-step-hover-background: var(--pxmkv-color-quantity_step_dark_hover_background, rgba(255,255,255,.12));
    --pxmkv-quantity-step-hover-icon: var(--pxmkv-color-quantity_step_dark_hover_icon, #fff);
    --pxmkv-quantity-step-focus-outline: var(--pxmkv-color-quantity_step_dark_focus_outline, #ffef19);
    --pxmkv-quantity-step-disabled-icon: var(--pxmkv-color-quantity_step_dark_disabled_icon, rgba(255,255,255,.28));
    --pxmkv-quantity-step-surface: var(--pxmkv-color-171717, #171717);
}

.pxmkv-builder[data-pxmkv-builder-theme="light"],
.pxmkv-replacement[data-pxmkv-builder-theme="light"] {
    --pxmkv-quantity-step-background: var(--pxmkv-color-quantity_step_light_background, rgba(23,23,23,.06));
    --pxmkv-quantity-step-border: var(--pxmkv-color-quantity_step_light_border, rgba(23,23,23,.32));
    --pxmkv-quantity-step-icon: var(--pxmkv-color-quantity_step_light_icon, rgba(23,23,23,.78));
    --pxmkv-quantity-step-hover-background: var(--pxmkv-color-quantity_step_light_hover_background, rgba(23,23,23,.08));
    --pxmkv-quantity-step-hover-icon: var(--pxmkv-color-quantity_step_light_hover_icon, #171717);
    --pxmkv-quantity-step-focus-outline: var(--pxmkv-color-quantity_step_light_focus_outline, #6f6500);
    --pxmkv-quantity-step-disabled-icon: var(--pxmkv-color-quantity_step_light_disabled_icon, rgba(23,23,23,.28));
    --pxmkv-quantity-step-surface: var(--pxmkv-color-ffffff, #fff);
}

.pxmkv-quantity-control {
    position: relative;
    display: inline-block;
    width: min(118px, 100%);
    max-width: 100%;
    min-width: 0;
}

.pxmkv-quantity-control > input[data-pxmkv-quantity-input] {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    padding-right: 38px !important;
}

.pxmkv-builder .pxmkv-quantity-control > .pxmkv-quantity-control__step,
.pxmkv-replacement .pxmkv-quantity-control > .pxmkv-quantity-control__step {
    position: absolute;
    right: 1px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: calc(50% - 1px);
    margin: 0;
    padding: 0;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    border-left: 1px solid var(--pxmkv-quantity-step-border) !important;
    border-radius: 0;
    background: linear-gradient(var(--pxmkv-quantity-step-background), var(--pxmkv-quantity-step-background)), var(--pxmkv-quantity-step-surface) !important;
    color: var(--pxmkv-quantity-step-icon) !important;
    cursor: pointer;
}

.pxmkv-builder .pxmkv-quantity-control > .pxmkv-quantity-control__step--up,
.pxmkv-replacement .pxmkv-quantity-control > .pxmkv-quantity-control__step--up {
    top: 1px;
    border-bottom: 1px solid var(--pxmkv-quantity-step-border) !important;
    border-radius: 0 var(--pxmkv-radius-form-control, 10px) 0 0;
}

.pxmkv-builder .pxmkv-quantity-control > .pxmkv-quantity-control__step--down,
.pxmkv-replacement .pxmkv-quantity-control > .pxmkv-quantity-control__step--down {
    bottom: 1px;
    border-radius: 0 0 var(--pxmkv-radius-form-control, 10px) 0;
}

.pxmkv-builder .pxmkv-quantity-control:focus-within > .pxmkv-quantity-control__step:not(:disabled),
.pxmkv-replacement .pxmkv-quantity-control:focus-within > .pxmkv-quantity-control__step:not(:disabled),
.pxmkv-builder .pxmkv-quantity-control > .pxmkv-quantity-control__step:hover:not(:disabled),
.pxmkv-replacement .pxmkv-quantity-control > .pxmkv-quantity-control__step:hover:not(:disabled),
.pxmkv-builder .pxmkv-quantity-control > .pxmkv-quantity-control__step:focus-visible:not(:disabled),
.pxmkv-replacement .pxmkv-quantity-control > .pxmkv-quantity-control__step:focus-visible:not(:disabled),
.pxmkv-builder .pxmkv-quantity-control > .pxmkv-quantity-control__step:active:not(:disabled),
.pxmkv-replacement .pxmkv-quantity-control > .pxmkv-quantity-control__step:active:not(:disabled) {
    background: linear-gradient(var(--pxmkv-quantity-step-hover-background), var(--pxmkv-quantity-step-hover-background)), var(--pxmkv-quantity-step-surface) !important;
    color: var(--pxmkv-quantity-step-hover-icon) !important;
}

.pxmkv-builder .pxmkv-quantity-control > .pxmkv-quantity-control__step:focus-visible,
.pxmkv-replacement .pxmkv-quantity-control > .pxmkv-quantity-control__step:focus-visible {
    outline: 2px solid var(--pxmkv-quantity-step-focus-outline);
    outline-offset: -3px;
}

.pxmkv-builder .pxmkv-quantity-control > .pxmkv-quantity-control__step:disabled,
.pxmkv-replacement .pxmkv-quantity-control > .pxmkv-quantity-control__step:disabled {
    background: linear-gradient(var(--pxmkv-quantity-step-background), var(--pxmkv-quantity-step-background)), var(--pxmkv-quantity-step-surface) !important;
    color: var(--pxmkv-quantity-step-disabled-icon) !important;
    cursor: default;
}

.pxmkv-quantity-control__chevron {
    display: block;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
}

.pxmkv-quantity-control__step--up .pxmkv-quantity-control__chevron { transform: translateY(2px) rotate(45deg); }
.pxmkv-quantity-control__step--down .pxmkv-quantity-control__chevron { transform: translateY(-2px) rotate(225deg); }

/* Deliberate full-row exceptions: the quantity is paired with one adjacent field. */
.pxmkv-replacement__row-fields .pxmkv-quantity-control { width: 100%; }
.pxmkv-access-modal__assignment-qty .pxmkv-quantity-control { width: min(118px, 100%); }

@media (max-width: 600px) {
    .pxmkv-replacement__row-fields .pxmkv-quantity-control { width: min(118px, 100%); }
}