@import "@{bootstrap-path}/less/forms.less";

// increase spacing between inline radio/checkboxes to distinguish label relationships.
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
    margin-left: 18px;
}

// improve checkbox/radio positioning
input[type="radio"], input[type="checkbox"] {
    margin: .2em 0 0;
}

label {
    // color: @gray-light;
    font-weight: 600;
}

// removes shadow from inputs and darkens focused field
.form-control {
    box-shadow: none;

    &:focus {
        background-color: #fafafb;
        box-shadow: none;
    }

    .has-error & {
        box-shadow: none;
    }
}

.form-group-sm {
    .form-control-static {
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

textarea {
    resize: none;
}

.form-group {
    margin-bottom: 8px;
}

.form-group-heading {
    border-bottom: 1px solid #eee;
    margin-top: 27px;
    margin-bottom: 9px;
}

// bumps up z-index for input-group-btns to make sure borders are clean.
.input-group-btn > .btn,
.input-group-btn > .btn-group {
    z-index: 2;
}

.input-group > .form-control:focus {
    z-index: 3;
}

// adds required asterisk after label
form:not(.form-horizontal) {
    label.required::after {
        position: relative;
        content: "*";
        // color: @state-danger-text;
        left: 4px;
        font-size: @font-size-base - 1;
    }
}

// adds required asterisk before label
.form-horizontal {
    @media(min-width: @screen-sm) {
        label.required::before {
            position: relative;
            content: "*";
            // color: @state-danger-text;
            left: -4px;
            font-size: @font-size-base - 1;
        }
    }
    @media(max-width: 767px) {
        label.required::after {
            position: relative;
            content: "*";
            // color: @state-danger-text;
            left: 4px;
            font-size: @font-size-base - 1;
        }
    }
}

.input-search {
    border-radius: 100px;
}

// Add an icon inside the front of an input
.input-icon {
    position: absolute;
    pointer-events: none;
    margin-top: 7px;
    margin-left: 9px;
    opacity: .35;
}
.input-icon+input {
    padding-left: 28px;
}

.form-control-width-xs {
    max-width: 75px;
}
.form-control-width-sm {
    max-width: 150px;
}
.form-control-width-md {
    max-width: 250px;
}
.form-control-width-lg {
    max-width: 350px;
}
.form-control-width-fill {
    max-width: 100%;
}



.switch {
    padding-left: 64px;
    overflow: hidden;
    position: relative;

    > input {
        appearance: none;
        position: absolute;
        width: inherit;
        height: inherit;
        opacity: 0;
        left: 0;
        top: 0;
    }

    > label {
        position: relative;
        cursor: pointer;
        font-weight: 400;
        margin-bottom: 0;
    }

    > label:before {
        cursor: pointer;
        display: inline-block;
        border-radius: 25px;
        height: 25px;
        width: 58px;
        color: #fff;
        font-size: 10px;
        font-weight: 600;
        line-height: 25px;
        text-align: center;
        background: #aaa;
        transition: 0.2s background-color ease-out;
        margin-left: -64px;
        margin-right: 6px;
    }

    > input:checked + label:before {
        background: @brand-primary;
    }

    > input:disabled + label:before {
        background: mix(#aaa, #fff, 30%);
    }
    > input:checked:disabled + label:before {
        background: mix(@brand-primary, #fff, 30%);
    }

    > label:before {
        content: attr(data-off);
        padding-left: 20px;
        padding-right: 0;
    }

    > input:checked + label:before {
        content: attr(data-on);
        padding-right: 20px;
        padding-left: 0;
    }

    > label:after {
        cursor: pointer;
        content: "";
        margin: 1px;
        border-radius: 19px;
        width: 19px;
        height: 19px;
        display: block;
        background: #fff;
        position: absolute;
        top: 2px;
        left: -62px;
        z-index: 2;
        transition: 0.2s left ease-out;
    }

    > input:checked + label:after {
        left: -29px;
    }
}
