/*
Input box

Input box from trimble css

Markup:
<div class="input-group">
    <label>Normal input</label>
    <input class="icon user" type="text" placeholder="First Name">
</div>
<div class="input-group">
    <label>Input with focus</label>
    <input class="icon user focus" type="text" placeholder="First Name">
</div>
<div class="input-group">
    <label>Input with error</label>
    <input class="icon user error" type="text" placeholder="First Name">
</div>
<div class="input-group">
    <label>Input without icon</label>
    <input class="" type="text" placeholder="Without icon">
</div>

Styleguide Form Elements.input
*/
/*
Select box

Select box from trimble css

Markup:
<select>
    <option value="">All Users</option>
    <option value="">Pod 3</option>
    <option value="">Architects</option>
    <option value="">Engineers</option>
    <option value="">Surveyors</option>
</select>

Styleguide Form Elements.select
*/
@import 'colors.scss';
@import 'variables.scss';
@import 'floating-label.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;
    @include border-radius(2px);
    &:focus, &.focus{
        outline: none;
        background-color:$col_white;
        border-bottom: solid 2px $col_trimble_blue_light;
    }
    &::placeholder{
        color:$col_gray_5;
        font-style: $font-style-italic;
    }
    &.error{
      outline: none;
      background-color: $col_white;
      border-bottom: solid 2px $col_red;
    }
}

@mixin input-icon{
    padding: 0 1rem;
    &.icon{
        padding:0 1rem 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');
    }

}


@mixin error-message{
    color:$col_red;
    font-size:.75rem;
}

.error-message{
    @include error-message;
}


input[type="text"],input[type="email"],input[type="password"]{
    @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;
    @include border-radius(2px);
    /* color:$col_gray_5;    */
    &:focus{
        outline: none;
        background-color:$col_white;
    }
    &::placeholder{
        color:$col_gray_5;
        font-style: italic;
    }
    &.error{
        border:solid 1px $col_red;
    }
}

.input-group{
    @include flex-row-wrap;
    margin-bottom:2rem;
    position: relative;
    &.last-child{
        margin-bottom: 0;
    }
    .error-message{
        @include error-message;
        flex:1;        
    }
    label{
        font-size: 0.75rem;
        color: $form-label-color;
        margin-bottom: 0.2143rem;
    }
    .label{
        font-size: 0.75rem;
        color: $form-label-color;
        margin-bottom: 0.2143rem;
        top:-1.3125rem;
        left: 0;
        font-size:12px;
        position:absolute;
        pointer-events:none;
        &.float {
            font-size:1rem;
            font-style: italic;
            left:3.5rem;
            top:0.625rem;
            transition:0.2s ease all;
            -moz-transition:0.2s ease all;
            -webkit-transition:0.2s ease all;
        }
        &.no-icon{
            left: 1rem;
        }
    }
}

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

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

label{
    color:$col_gray_8;
}
.prefix-label {
  text-align: center;
  width: 30%;
  line-height: 2.813rem;
  font-size: 16px;
  color:$col_gray_8;
}
.input-group.prefix{
  input {
    width: 20%;
  }
  label.float{
    left: 31%;
  }
}
div, span{
  &.error{
    color: $col_red;
    display: block;
    width: 100%;
    font-size: 80%;
    &.padding-bottom {
      padding-bottom: 1rem;
    }
  }
  &.success {
    color: $col_green;
    display: block;
    width: 100%;
    font-size: 80%;
    &.padding-bottom {
      padding-bottom: 1rem;
    }
  }
}