/* ------------------------------
LOMAKKEET / FORMS
------------------------------ */
form {
   width: 100%;
   display: inline-block;
   margin-top: 1rem;
}

.form-field {
   margin-bottom: 1.7rem;
   position: relative;
}

.form-label{
   font-family: var(--font-primary);
   z-index: 2;
   display: inline-block;
   width: auto;
   text-align: left;
   font-size: .75rem;
   font-weight: 700;
   transition: all ease-in-out 0.2s;
   color: var(--color-contrast-mid);
   background: var(--color-contrast-darkest);
   line-height: 1;
   padding: 11px;
   position: absolute;
   top: -1rem;
   left: .5rem;
}

input:focus~label,
select:focus~label,
textarea:focus~label {
   color: var(--color-primary);
}

.form-field input,
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="search"],
.form-field input[type="url"],
.form-field input[type="password"],
.form-field input[type="number"],
.form-field input[type="phone"],
.form-field textarea,
.form-field select {
   font-family: var(--font-primary);
   width: 100%;
   height: auto;
   font-size: 1rem;
   line-height: 1.1;
   background: none;
   border: 1px solid var(--color-contrast-dark);
   padding: 1.2rem;
   max-width: 100%;
   color: var(--color-contrast-lg);
   position: relative;
   border-radius: 1px;
   position: relative;
   z-index: 1;
   transition: var(--ease-in) .1s;
}

body .form-field input::placeholder,
body .form-field textarea::placeholder {
   color: var(--color-contrast-lighter);
}

.form-field .error input {
   border-color: red;
}

.form-field .error input ~ span {
   position: absolute;
   top: 0;
   right: 0;
   font-size: 12px;
   color: red;
}
.form-field .error input.required ~ span:after {
   content:'Required field';
}

.form-field .error input[type="email"] ~ span:after {
   content:'Format: email@address.com';
}

.form-field .error input[type="tel"] ~ span:after {
   content:'Format: xxx - xxx xxxx';
}

.form-field select,
.form-field textarea {
   -moz-appearance: none;
   -webkit-appearance: none;
   -ms-appearance: none;
   appearance: none;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
   background: none;
   border-color: var(--color-contrast-mid);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.form-field input:active,
.form-field select:active,
.form-field textarea:active {
   outline: none;
   background: none;
   border-color: var(--color-contrast-light);
   box-shadow: var(--elevation-sm);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
   color: var(--color-contrast);
}

.form-field textarea {
   resize: none;
   min-height: 140px;
}

/* Select Box Arrow */
.form-field select {
   background-image: url(../images/select-arrow.svg);
   background-size: 1.25rem;
   background-repeat: no-repeat;
   background-position: calc(100% - 1rem) center;
   padding-right: 3em;
   text-overflow: ellipsis;
}