/* ------------------------------------------------------------------------------
*
*  # Input groups component
*
*  Overrides for input groups bootstrap component
*
*  Version: 1.0
*  Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */


// Base
// -------------------------

.input-group {

    // Re-position form control
    .form-control {
        float: right;
    }

    // Make icon to be always on top
    .form-control-feedback {
        z-index: 3;
    }
}

// Sizing options
// -------------------------

// XLarge size
.input-group-xlg > .form-control,
.input-group-xlg > .input-group-addon,
.input-group-xlg > .input-group-btn > .btn {
    .input-xlg();
}

// Small size
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn {
    line-height: @line-height-base;
    font-size: @font-size-base;
}

// Mini size
.input-group-xs > .form-control,
.input-group-xs > .input-group-addon,
.input-group-xs > .input-group-btn > .btn {
    .input-xs();
}


// Transparent input group
// -------------------------

.input-group-transparent {
    .input-group-addon {
        background-color: transparent;
        border-color: transparent!important;
        padding: 0;
    }

    .form-control {
        background-color: transparent;
        border-color: transparent;
        cursor: pointer;
        width: auto;
        padding: 0;

        &:hover,
        &:focus {
            border-color: transparent;
        }
    }
}


// Text input groups
// -------------------------

.input-group-addon {
    border-radius: @border-radius-small;

    // Icon
    > i {
        display: block;
        top: 0;
    }

    // Checkbox, radio
    .checker,
    .choice {
        display: block;
        margin-top: ((@line-height-computed - @checkbox-size) / 2);
    }

    // Sizing
    &.input-xlg {
        padding: (@padding-large-vertical + 2) @padding-large-horizontal;
        font-size: @font-size-large;
        border-radius: @border-radius-base;
    }
    &.input-xs {
        padding: @padding-xs-vertical @padding-xs-horizontal;
        font-size: @font-size-base;
        border-radius: @border-radius-small;
    }
    &.input-sm {
        font-size: @font-size-base;
    }
    &.input-lg {
        border-radius: @border-radius-base;
    }

    // Reset borders for the first child
    &:first-child {
        border-left: 0;
        border-right: 1px solid @input-group-addon-border-color;

        // Remove border in colored addon
        &[class*=bg-] {
            border-right-width: 0;
        }
    }

    // Reset borders for the last child
    &:last-child {
        border-right: 0;
        border-left: 1px solid @input-group-addon-border-color;

        // Remove border in colored addon
        &[class*=bg-] {
            border-left-width: 0;
        }
    }

    // Dublicate contextual border colors
    .has-warning & {
        border-color: @state-warning-text;
    }
    .has-error & {
        border-color: @state-danger-text;
    }
    .has-success & {
        border-color: @state-success-text;
    }
}


// Button input groups
// -------------------------

.input-group-btn {
    > .btn + .btn {
        margin-left: 0;
        margin-right: -1px;
    }

    // Reset borders for the first child
    &:first-child {
        > .btn,
        > .btn-group {
            margin-right: 0;
            margin-left: -1px;
        }
    }

    // Reset borders for the last child
    &:last-child {
        > .btn,
        > .btn-group {
            margin-left: 0;
            margin-right: -1px;
        }
    }
}
