@import 'colors.scss';
@import 'variables.scss';

$form-element-height: 2.813rem;
@mixin form-element{
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: $form-element-height;
    padding:0 1rem;
    border:solid 1px $col_gray_0;
    background-color:$col_white;
    font-size: 1rem;
    &:focus{
        outline: none;
        background-color:$col_white;
        border-bottom: solid 2px $col_trimble_blue_light;
    }
    &::placeholder{
        color:$col_gray_5;
        font-style: italic;
    }
}

@mixin input-icon{
    &.icon{
        padding:0 3.5rem;
        background-repeat:no-repeat;
        background-position: 0.25rem center;
    }
    &.user{
        background-image:url('../images/Icons/user_default.svg');
    }
    &.email{
        background-image:url('../images/Icons/email.svg');
    }
    &.phone{
        background-image:url('../images/Icons/phone.svg');
    }
    &.location{
        background-image:url('../images/Icons/location.svg');        
    }
}


input[type="text"],input[type="email"]{
    @include form-element;
    @include input-icon;
}



select{
    width:100%;
    border:solid 1px $col_gray_0;
    height: $form-element-height;
    padding:0 0.5rem;
    box-sizing: border-box;
    background-color:$col_white;
    font-size: 1rem;
    /* color:$col_gray_5;    */
    &:focus{
        outline: none;
        background-color:$col_white;
    }
    &::placeholder{
        color:$col_gray_5;
        font-style: italic;
    }
}

.input-group{
    display:flex;
    margin-bottom:0.75rem;
    flex-flow:row wrap;
    //padding: 0 1rem 1rem 1rem;
    &:last-child{
        margin-bottom: 0;
    }
    label{
    font-size: 0.75rem;
    color: $col_gray_6;
    margin-bottom: 0.2143rem;
    }
}

.input-group-add{
    display:flex;
    flex: 1 0 100%;
}

.input-group-label{
    display: block;
}

label{
    color:$col_gray_8;
}