// ============================================================================
// IMPORTANT!
// This file is not currently used for anything and will not work if you
// try to include it on the page
// ============================================================================

.numeric-input-wrap {
    position: relative;
    display : inline-block;

    // input ------------------------------------------------------------------
    .numeric-input-input {
        padding-right: 3ex;
        box-sizing   : border-box;

        &:not(.form-control) {
            border             : 1px solid #ccc;
            border-radius      : 2px;
            padding-left       : 4px;
            display            : block;
            -webkit-appearance : none;
            line-height        : normal;
        }
    }

    // arrows -----------------------------------------------------------------
    .numeric-input-arrow-up, .numeric-input-arrow-down {
        position    : absolute;
        top         : 50%;
        left        : 50%;
        width       : 0;
        height      : 0;
        border-style: solid;
        margin      : -0.3ex 0 0 -0.56ex;
    }

    .numeric-input-arrow-up {
        border-width: 0 0.6ex 0.6ex 0.6ex;
        border-color: transparent transparent rgba(0, 0, 0, 0.7);
    }

    .numeric-input-arrow-down {
        border-width: 0.6ex 0.6ex 0 0.6ex;
        border-color: rgba(0, 0, 0, 0.7) transparent transparent;
    }

    // buttons ----------------------------------------------------------------
    .numeric-input-btn-up, .numeric-input-btn-down {
        position    : absolute;
        right       : 2;
        width       : 2.26ex;
        border-color: rgba(0,0,0,.1);
        border-style: solid;
        text-align  : center;
        cursor      : default;
        transition  : all 0.1s;
        background  : rgba(0,0,0,.1);
        box-shadow  : -1px -1px 3px rgba(0,0,0,.1) inset,
                       1px 1px 3px rgba(255,255,255,.7) inset;

       &:hover {
           background: rgba(0,0,0,.2);
       }

       &:active {
           background: rgba(0,0,0,.3);
           box-shadow: 0 1px 3px rgba(0,0,0,.2) inset,
                      -1px -1px 4px rgba(255,255,255,.5) inset;
       }

       &:disabled {
           opacity   : 0.5;
           box-shadow: none;
           cursor    : not-allowed;
       }
    }

    .numeric-input-btn-up {
        top          : 2px;
        bottom       : 50%;
        border-radius: 2px 2px 0 0;
        border-width : 1px 1px 0 1px;
    }

    .numeric-input-btn-down {
        top          : 50%;
        bottom       : 2px;
        border-radius: 0 0 2px 2px;
        border-width : 0 1px 1px 1px;
    }
}

// OLD ========================================================================
.unselectable() {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.numeric-input-wrap {
    position: relative;
    display : inline-block;
    .unselectable;

    // The input ---------------------------------------------------------------
    .numeric-input-input {
        padding-right: 3ex;
        box-sizing   : border-box;
    }

    // The Up/Down buttons -----------------------------------------------------
    .numeric-input-up,
    .numeric-input-down {
        position   : absolute;
        right      : 2px;
        width      : 2.26ex;
        background : rgba(0, 0, 0, 0.1);
        box-shadow : 0 0 0 0.5px rgba(0, 0, 0, 0.2);
        text-align : center;
        cursor     : default;
        opacity    : 0.75;
        transition : all 0.2s;

        // arrow triangles -----------------------------------------------------
        &:before {
            content     : '';
            width       : 0;
            height      : 0;
            border-style: solid;
            position    : absolute;
            top         : 50%;
            left        : 50%;
            margin      : -0.3ex 0 0 -0.6ex;
            .unselectable;
        }
    }

    // Up button ---------------------------------------------------------------
    .numeric-input-up {
        top           : 2px;
        bottom        : 50%;
        border-radius : 1px;
        // margin-bottom : 1px;

        &:after {
            content  : '';
            position : absolute;
            top      : -1px;
            right    : -1px;
            bottom   : -1px;
            left     : -1px;
        }

        &:before {
            border-width: 0 0.6ex 0.6ex 0.6ex;
            border-color: transparent transparent #999;
            border-color: transparent transparent rgba(0, 0, 0, 0.7);
        }
    }

    // Down button -------------------------------------------------------------
    .numeric-input-down {
        bottom        : 2px;
        top           : 50%;
        border-radius : 1px;
        // margin-top    : 1px;

        &:after {
            content  : '';
            position : absolute;
            top      : -1px;
            right    : -1px;
            bottom   : -1px;
            left     : -1px;
        }

        &:before {
            border-width: 0.6ex 0.6ex 0 0.6ex;
            border-color: #999 transparent transparent;
            border-color: rgba(0, 0, 0, 0.7) transparent transparent;
        }
    }

    // Chnage some things on hover ---------------------------------------------
    &:hover {
        .numeric-input-up,
        .numeric-input-down {
            background : rgba(0, 0, 0, 0.1);
            box-shadow : 0 0 0 0.5px rgba(0, 0, 0, 0.2);
            opacity    : 1;
        }
    }

    .numeric-input-up,
    .numeric-input-down {
        &:hover {
            background: rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.3);
        }

        &:active {
            background: rgba(0, 0, 0, 0.3);
            box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.4);
        }
    }

    &.disabled {
        pointer-events: none;
    }

    &.std input {
        border: 1px solid #ccc;
        border-radius: 2px;
        // box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.8) inset;
        padding-left: 4px;
        display: block;
        -webkit-appearance: none;
        line-height: normal;
    }

    // Bootstrap styling -------------------------------------------------------
    &.bs-form-control {
        .numeric-input-up {
            right: 3px;
            top: 3px;
            border-radius: 1px 2px 1px 1px;
            margin-bottom : 1px;
        }
        .numeric-input-down {
            right: 3px;
            bottom: 3px;
            border-radius: 1px 1px 2px 1px;
            margin-top : 1px;
        }
    }

}

// Mobile ------------------------------------------------------------------
.mobile {
    .numeric-input-wrap {
        input {
            padding-left : 3.4ex;
            padding-right: 3.4ex;
            text-align   : center;
            border-radius: 2px;
        }

        .numeric-input-up, .numeric-input-down {
            width     : 3.3ex;
            top       : 1px;
            bottom    : 1px;
            box-shadow: none;
            margin    : 0;

            &:before, &:after {
                content: '';
                border : 0;
                background: #000;
                border-radius: 1px;
                top: 50%;
                left: 50%;
            }
        }

        .numeric-input-up {
            right        : 1px;
            border-radius: 0 1px 1px 0;
            box-shadow   : 1px 0 0 0 rgba(0, 0, 0, 0.1) inset;
            &:before {
                margin: -1px 0 0 -7px;
                height: 2px;
                width: 14px;
            }

            &:after {
                margin: -7px 0 0 -1px;
                height: 14px;
                width: 2px;
            }
        }
        .numeric-input-down {
            left : 1px;
            right: auto;
            border-radius: 1px 0 0 1px;
            box-shadow   : -1px 0 0 0 rgba(0, 0, 0, 0.1) inset;
            &:before {
                margin: -1px 0 0 -7px;
                height: 2px;
                width: 14px;
            }
            &:after {
                display: none;
            }
        }

        &.bs-form-control {
            input {
                border-radius: 4px;
            }
            .numeric-input-up {
                border-radius: 0 3px 3px 0;
            }
            .numeric-input-down {
                border-radius: 3px 0 0 3px;
            }
        }
    }
}

.disabled {
    .numeric-input-wrap {
        pointer-events: none;
    }
    .numeric-input-up, .numeric-input-down {
        opacity       : 0.3;
        pointer-events: none;
        box-shadow    : none;
    }
}