/*------------------------------------*\
    #FORMS
\*------------------------------------*/

/**
 * 1) Form element base styles
 */

/**
 * Input placeholder text base styles
 */
::-webkit-input-placeholder {
   color: $color-form-placeholder;
}

::-moz-placeholder {
   color: $color-form-placeholder;
}

:-ms-input-placeholder {
   color: $color-form-placeholder;
}

/**
 * Fieldset base styles
 */
fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

/**
 * Legend base styles
 */
legend {
    margin-bottom: 0.25rem;
}

/**
 * Label base styles
 */
label {
	display: block;
    padding-bottom: 0.25rem;
    color: $color-form-label;
}

/**
 * Add font size 100% of form element and margin 0 to these elements
 */
button, input, select, textarea {
    font-family: inherit;
    font-size: $font-size-med;
    margin: 0;
}

/**
 * Text area base styles
 */
textarea {
	resize: none;
}

/**
 * Input  and text area base styles
 */
input, textarea {
    width: 100%;
    padding: 0.5rem;
    border: $border-thickness solid $color-form-border;
    background: $color-form-bg;

    &:focus {
		border-color: $color-form-border-focus;
	}

    &:disabled {
        border-color: $color-neutral-gray-07;
        background: $color-neutral-gray-07;
        color: $color-neutral-iron;
    }
}

/**
 * Remove webkit appearance styles from these elements
 */
input[type=text], input[type=search], input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration, input[type=url], input[type=number], textarea {
	-webkit-appearance: none;
}

/**
 * Checkbox and radio button base styles
 */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    margin-right: 0.3rem;
    border-color: $color-form-border;
}

/**
 * Search input base styles
 */
input[type="search"] {
    -webkit-appearance: none;
    border-radius: 0;
}

/**
 * Select
 * 1) Remove default styling
 */
select {
    display: block;
	font-size: $font-size-med;
	width: 100%;
    border: $border-thickness solid $color-form-border;
    border-radius: 0;
    padding: 0.5rem;
    height: 2rem;
    background: $color-form-bg;
    color: $color-form;

	&:focus {
		border-color: $color-form-border-focus;
	}
}