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

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

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

::-moz-placeholder {
   color: $color-gray-50;
}

:-ms-input-placeholder {
   color: $color-gray-50;
}

/**
 * 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-gray-50;
}

/**
 * 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 {
    min-height: 6rem;
	resize: none;
}

/**
 * Input  and text area base styles
 */
input, textarea {
    width: 100%;
    padding: 0.5rem;
    border: $border-thickness solid $color-gray-27;
    background: $color-white;
    border-radius: 4px;

    &:focus {
		border-color: $color-gray-93;
	}
}

/**
 * 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-gray-73;
}

/**
 * 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-gray-27;
    padding: 0.5rem;
    color: $color-gray-93;
    -webkit-appearance: none;
    background: url("../images/chevron-down.svg");
	background-position: calc(100% - 0.7rem) 50%;
    background-color: $color-white;
	background-size: 10px 10px;
	background-repeat: no-repeat;

	&:focus {
		border-color: $color-gray-93;
	}
}
