/* Forms

=============== */

// Display for all input fields (except buttons and checkbox) %forms {

display: block;
border: $form-border;
border-radius: $border-radius;
padding: .75rem;
outline: none;
background: $input-background;
margin-bottom: .5rem;
font-size: 1rem;
width: 100%;
max-width: 100%;
line-height: 1;

}

// Input fields on hover %forms-hover {

border: $form-border-hover;

}

// Input fields on focus %forms-focus {

border: $form-border-focus;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 0 6px lighten($link-color, 30%);

}

// Variable containing all input fields #{$forms} {

@extend %forms;
&:hover {
        @extend %forms-hover;
}
&:focus,
&:active {
        @extend %forms-focus;
}

}

textarea {

overflow: auto;
height: auto;

}

fieldset {

border: 1px solid $border-color;
border-radius: $border-radius;
padding: $padding;
margin: $margins 0;

}

legend {

padding: 0 .5rem;
font-weight: 600;

}

// Fix issues with select select {

color: $font-color;
-webkit-appearance: none;
-moz-appearance: none;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAJCAYAAAA/33wPAAAAvklEQVQoFY2QMQqEMBBFv7ERa/EMXkGw11K8QbDXzuN4BHv7QO6ifUgj7v4UAdlVM8Uwf+b9YZJISnlqrfEUZVlinucnBGKaJgghbiHOyLyFKIoCbdvecpyReYvo/Ma2bajrGtbaC58kCdZ1RZ7nl/4/4d5EsO/7nzl7IUtodBexMMagaRrs+06JLMvcNWmaOv2W/C/TMAyD58dxROgSmvxFFMdxoOs6lliWBXEcuzokXRbRoJRyvqqqQvye+QDMDz1D6yuj9wAAAABJRU5ErkJggg==) right center no-repeat;
background-color: $background;
line-height: 1; // ensures text doesn't get cut off

}

// Make range full width

type=range

{

width: 100%;

}

// Labels label {

font-weight: 600;
max-width: 100%;
display: block;
margin: 1rem 0 .5rem;

}

@include small-breakpoint {

.split-form {
        // Split forms have right aligned labels and margins on the column
        label {
                text-align: right;
                padding: 0 .5rem;
                margin-bottom: 1rem;
        }
}

}

// Errors input, select, textarea {

&.has-error {
        border: 1px solid $error;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 0 6px lighten($error, 35%);
}
&:hover,
&:focus,
&:active {
        &.has-error {
                @extend .has-error;
        }
}

}

// Placeholder Text ::-webkit-input-placeholder, ::-moz-placeholder, :-moz-placeholder, :-ms-input-placeholder {

color: $placeholder;

}