/**
 * Quantity.
 */

.quantity {
    height: 100%;
    margin: $spacing 0;
}

.quantity__label {
    font-size: rem-calc(20);
    margin-bottom: $spacing--small;
}

/**
 * 1. Set a fixed width for the quantity input (number input's cant be fluid
 *    below a certain width).
 */

.quantity__input {
    height: 100%;
    color: $black;
    padding: $spacing--small $spacing--large;
    font-size: rem-calc(16);
    margin: 0;
    text-align: center;
    width: 90px; /* 1. */
    border-color: transparent;
    background: rgba($black, .16);

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    &[readonly] {
        //background-color: transparent;
        cursor: default;
    }
}

.quantity__input-container {
    display: inline-block;
    position: relative;
    height: 100%;
}

.quantity__change {
    position: absolute;
    top: 0;
    bottom: 0;
    padding: 0 13px;
    cursor: pointer;
}

.quantity__change--minus {
    left: 0;
}

.quantity__change--plus {
    right: 0;
}
