@ebay/skin/dist/number-input/number-input.css

Skin - CSS modules that represent the brand eBay

@keyframes number-input-decrement-before {
    0% {
        transform: translateY(0);
    }
    to {
        transform: translateY(5px);
    }
}
@keyframes number-input-decrement-after {
    0% {
        transform: translateY(-10px);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes number-input-increment-before {
    0% {
        transform: translateY(0);
    }
    to {
        transform: translateY(-5px);
    }
}
@keyframes number-input-increment-after {
    0% {
        transform: translateY(10px);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes number-input-increment-after-disabled {
    0% {
        transform: translateY(10px);
    }
    33% {
        transform: translateY(-5px);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes number-input-decrement-after-disabled {
    0% {
        transform: translateY(-10px);
    }
    33% {
        transform: translateY(5px);
    }
    to {
        transform: translateY(0);
    }
}
@keyframes number-increment-disabled {
    0% {
        transform: translateX(0);
    }
    33% {
        transform: translateX(10px);
    }
    to {
        transform: translateX(0);
    }
}
@keyframes number-decrement-disabled {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-10px);
    }
    to {
        transform: translateX(0);
    }
}
.number-input .textbox {
    background: transparent;
}
.number-input--increment .textbox__control {
    animation:
        number-input-increment-before var(--motion-duration-short-2)
            var(--motion-easing-soft-exit),
        number-input-increment-after var(--motion-duration-medium-1)
            var(--motion-easing-quick-enter) var(--motion-duration-short-2);
}
.number-input--decrement .textbox__control {
    animation:
        number-input-decrement-before var(--motion-duration-short-2)
            var(--motion-easing-soft-exit),
        number-input-decrement-after var(--motion-duration-medium-1)
            var(--motion-easing-quick-enter) var(--motion-duration-short-2);
}
.number-input--decrement-disabled .textbox__control {
    animation:
        number-input-decrement-before var(--motion-duration-short-2)
            var(--motion-easing-soft-exit),
        number-input-decrement-after-disabled var(--motion-duration-medium-2)
            var(--motion-easing-standard) var(--motion-duration-short-2);
}
.number-input--increment-disabled .textbox__control {
    animation:
        number-input-increment-before var(--motion-duration-short-2)
            var(--motion-easing-soft-exit),
        number-input-increment-after-disabled var(--motion-duration-medium-2)
            var(--motion-easing-standard) var(--motion-duration-short-2);
}
.number-input label:first-child {
    flex-grow: 1;
    padding-left: var(--spacing-200);
}
.number-input label:first-child ~ input.textbox__control {
    flex-grow: 0;
}
.icon-btn.number-input__delete {
    display: none;
    margin-inline-end: calc(var(--spacing-100) * -1);
    order: -1;
    padding-inline-start: var(--spacing-200);
}
.number-input--show-delete .number-input__delete {
    display: block;
}
.number-input--show-delete .number-input__decrement {
    display: none;
}
.number-input .textbox .textbox__control {
    font-weight: 700;
    text-align: center;
    width: 48px;
}
.number-input .textbox .textbox__control::-webkit-inner-spin-button,
.number-input .textbox .textbox__control::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.number-input .textbox .textbox__control[type="number"] {
    appearance: textfield;
}
.number-input .icon-btn {
    transform: scale(1);
    transition: transform var(--motion-duration-short-3)
        var(--motion-easing-standard);
}
.number-input .icon-btn:hover:not(:disabled) {
    background-color: var(--state-layer-hover);
}
.number-input .icon-btn:active {
    transform: scale(0.97);
}
.number-input .textbox .icon-btn:not(:disabled) svg {
    color: var(--color-foreground-primary);
    fill: currentColor;
}
.number-input__decrement:disabled {
    animation: number-decrement-disabled var(--motion-duration-short-2)
        var(--motion-easing-standard);
}
.number-input__increment:disabled {
    animation: number-increment-disabled var(--motion-duration-short-2)
        var(--motion-easing-standard);
}