/*
Incrementor

Number input with incrementing buttons

Markup:
<div class="btn-group incrementor" role="group" style="width: 115px;">
    <button class="btn incrementor__btn incrementor__btn--decrement">
        <span class="screen-reader-only">Subtract</span>
    </button>
    <div class="incrementor__input-group">
        <input type="number"
            id="Incrementor"
            name="incrementor"
            class="form-element__input incrementor__input"
            aria-label="Incrementor"
            min="0"
            max="99" />
    </div>
    <button class="btn incrementor__btn incrementor__btn--increment">
        <span class="screen-reader-only">Add</span>
    </button>
</div>

Name: incrementor

Styleguide 3.10
*/

.incrementor {
    display: flex;
    padding: 0;
    border-radius: @border-radius-default;
}

.incrementor__btn {
    padding: 0;
    flex: 0 0 34px;
    background-color: white;
    background-size: 10px !important;
    background-position: center !important;
    border: 1px solid @theme-grey13;
    border-radius: @border-radius-default;
    &:hover,
    &:focus,
    &:active {
        box-shadow: none;
        border-color: @theme-green1;
    }
    &[disabled] {
        background-color: @theme-grey1;
        border: 1px solid @theme-grey13 !important;
    }
}

.incrementor__btn--increment {
    .svgicon--add;
    &:hover {
        background-image: url("@{icons}add-green.svg") !important;
    }
    &:focus,
    &:active {
        .svgicon--add-green;
    }
    &[disabled] {
        background-image: url("@{icons}theme-add@3x.png") !important;
    }
}

.incrementor__btn--decrement {
    .svgicon--subtract;
    &:hover,
    &:focus,
    &:active {
        .svgicon--subtract-green;
    }
    &[disabled] {
        background-image: url("@{icons}subtract.svg") !important;
    }
}

.incrementor__input-group {
    flex: 1;
}

.incrementor__input {
    padding: 10px;
    border: 1px solid @theme-grey13;
    border-right: none;
    border-left: none;
    border-radius: 0;
    box-shadow: none;
    text-align: center;
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
        -webkit-appearance: none; 
        margin: 0;
    }
    -moz-appearance: textfield;
    &:hover,
    &:focus {
        border: 1px solid @theme-green1;
    }
}