/// <reference path="../shared/_mixins.scss" />
/// <reference path="../bs4/scss/bootstrap.scss" />


// Bootstrap Touchspin
// -------------------------------------------------------------

$touchspin-btn-width:                1.6rem;

// Added by SMNET 

.qty-input {
    vertical-align: top;

    // Restore lost radius due to specificity
    .form-control       { border-radius: $input-border-radius !important }
    .form-control-lg    { border-radius: $input-border-radius-lg !important }
    .form-control-sm    { border-radius: $input-border-radius-sm !important }
}

.bootstrap-touchspin {
    display: inline-flex;

    .form-control {
        text-align: center;
        font-weight: bold;
        padding-left: $touchspin-btn-width;
        padding-right: $touchspin-btn-width;
        display: block;

        .has-postfix & {
            $offset: ($input-padding-y / 2) + 0.15rem;
            padding-top: $input-padding-y - $offset;
            padding-bottom: $input-padding-y + $offset;
        }

        .has-postfix &.form-control-lg {
            $offset: ($input-padding-y-lg / 2);
            padding-top: $input-padding-y-lg - $offset;
            padding-bottom: $input-padding-y-lg + $offset;
        }

        .has-postfix &.form-control-sm {
            padding-top: 0;
            padding-bottom: $input-padding-y-sm * 2;
        }
    }

    .input-group-btn {
        position: absolute;
        z-index: 10;
        width: $touchspin-btn-width;
        top: 1px;
        bottom: 1px;

        &:first-child {
            left: 1px; 
            right: auto;
        }
        &:last-child {
            right: 0; 
            left: auto;
        }

        > .btn {
            background-color: transparent !important;
            border-width: 0;
            width: 100%;
            height: 100%;
            padding-left: 0 !important;
            padding-right: 0;
            box-shadow: none !important;

            &.bootstrap-touchspin-down { text-align: right; padding-right: 4px; }
            &.bootstrap-touchspin-up { text-align: left; padding-left: 4px; }

            > .fa { opacity: 0.3; font-size: 0.875em; }
            &:hover > .fa { opacity: 0.6; }
            &:active > .fa { opacity: 1; }
        }
    }

    .form-control ~ .bootstrap-touchspin-postfix {
        display: inline-block;
        position: absolute;
        background: transparent;
        border: none;
        color: $text-muted;
        z-index: 5;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        padding: 0;
        padding-bottom: 0.425rem;
        font-size: 11px;
		text-align: center;
    }

    .form-control-lg ~ .bootstrap-touchspin-postfix {
        padding-bottom: 0.75rem;
    }

    .form-control-sm ~ .bootstrap-touchspin-postfix {
        padding-bottom: 0.2rem;
    }
}

.bootstrap-touchspin .input-group-btn-vertical {
    position: absolute;
    top: 3px;
    left: 5px;
    font-size: 9px;
    font-weight: normal;
    white-space: nowrap;
    width: 1%;
    vertical-align: middle;
    display: table-cell;

    > .btn {
        display: block;
        float: none;
        width: 100%;
        max-width: 100%;
        padding: 8px 10px;
        margin-left: -1px;
        position: relative;
    }

    .bootstrap-touchspin-up {
        border-radius: 0;
        border-top-right-radius: $btn-border-radius;
    }

    .bootstrap-touchspin-down {
        margin-top: -2px;
        border-radius: 0;
        border-bottom-right-radius: $btn-border-radius;
    }
}






