.order-range-input {
    --order-range-border: #aebed0;
    display: grid;
    grid-template-columns: 40px minmax(76px, auto) minmax(0, 1fr);
    height: 40px;
    overflow: hidden;
    border: 1px solid var(--order-range-border);
    border-radius: 4px;
    background: #fff;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.order-range-input:focus-within {
    border-color: #4b9bd8;
    box-shadow: 0 0 0 2px rgba(31, 145, 219, 0.1);
}

.order-range-input.is-out-of-range {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.1);
}

.order-range-input__stepper,
.order-range-input__bounds {
    display: grid;
    grid-template-rows: 1fr 1fr;
    border-right: 1px solid var(--order-range-border);
}

.order-range-input__step,
.order-range-input__bound {
    border: 0;
    border-radius: 0;
    line-height: 1;
}

.order-range-input__step {
    background: #e7edf3;
}

.order-range-input__bound {
    background: #fff;
}

.order-range-input__step:first-child,
.order-range-input__bound:first-child {
    border-bottom: 1px solid var(--order-range-border);
}

.order-range-input__step {
    color: #91a2b4;
    font-size: 0.5rem;
}

.order-range-input__step:hover:not(:disabled) {
    background: #d8e2eb;
    color: #60758a;
}

.order-range-input__bound:hover:not(:disabled) {
    background: #f5f9fc;
}

.order-range-input__step:disabled,
.order-range-input__bound:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.order-range-input__bound {
    padding: 0 0.5rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.order-range-input__bound--maximum {
    color: #00ad45;
}

.order-range-input__bound--minimum {
    color: #f04444;
}

.order-range-input__entry {
    position: relative;
    display: flex;
    align-items: stretch;
    min-width: 0;
}

.order-range-input__entry label {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 0.75rem;
    max-width: 48%;
    overflow: hidden;
    color: #aab4bf;
    font-size: 0.78rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateY(-50%);
    pointer-events: none;
}

.order-range-input__number {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0.35rem max(50%, 6.8rem) 0.35rem 0.65rem;
    background: transparent;
    color: #167fc3;
    font-size: 0.92rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.order-range-input__number::-webkit-inner-spin-button,
.order-range-input__number::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.order-range-input__number {
    -moz-appearance: textfield;
}

.order-range-input__status {
    position: absolute;
    right: 0.45rem;
    bottom: 0.1rem;
    color: #dc3545;
    font-size: 0.58rem;
}

.order-range-input.is-out-of-range .order-range-input__status::after {
    content: "Outside allowed range";
}

@media (max-width: 575.98px) {
    .order-range-input {
        grid-template-columns: 34px minmax(68px, auto) minmax(0, 1fr);
    }

    .order-range-input__bound {
        padding-inline: 0.45rem;
        font-size: 0.72rem;
    }
}