/* quantity input action up-down */
.quantity-input__wrapper:is(.action--up-down) {
    border: 1px solid #555;
    width: fit-content;
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    align-items: center;
} 

.quantity-input__wrapper:is(.action--up-down) input {
    width: 50px;
    aspect-ratio: 1/1;
    text-align: center;
    border-width: 0;
    background-color: transparent;
}

.quantity-input__wrapper:is(.action--up-down) .input__actions {
    display: flex;
    flex-direction: column;
    border-left: 1px solid #555;
}

.quantity-input__wrapper:is(.action--up-down) .input__actions span {
    padding: 0.25rem;
    transition: background-color 200ms ease-out;
}

.quantity-input__wrapper:is(.action--up-down) .input__actions span:hover {
    background-color: rgba(150, 150, 150, 0.3);
}

.quantity-input__wrapper:is(.action--up-down) .input__actions span:nth-child(1) {
    border-bottom: 1px solid #555;
}

/* quantiti input action left-right */
.quantity-input__wrapper:is(.action--left-right) {
    display: flex;
    align-items: center;
    border: 1px solid rgba(150, 150, 150, 0.3);
    width: fit-content;
}

.quantity-input__wrapper:is(.action--left-right) span {
    width: 30px;
    aspect-ratio: 1/1;
    display: grid;
    place-content: center;
    color: rgba(150, 150, 150, 1);
    cursor: pointer;
    transition: all 100ms ease-out;
}

.quantity-input__wrapper:is(.action--left-right) span:hover {
    color: var(--gs-body-text-color);
    background-color: rgba(150, 150, 150, 0.3);
}

.quantity-input__wrapper:is(.action--left-right) input {
    background-color: transparent;
    border: unset;
    height: 30px;
    text-align: center;
    width: 30px;
}