/* ------------------------------
btn
------------------------------ */

button,
.form-field input[type="submit"],
.btn {
   background: var(--color-contrast-lightest);
   border: none;
   color: var(--color-contrast-darkest);
   font-weight: 700;
   font-size: 1rem;
   line-height: 1;
   line-height: 15px;
   text-align: center;
   display: inline-block;
   padding: 1.2rem 1.6rem;
   text-decoration: none;
   display: inline-block;
   width: auto;
   cursor: pointer;
   position: relative;
   vertical-align: top;
   position: relative;
   transiton: all ease-in .1s;

   vertical-align: middle;
   transform: perspective(1px) translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
   position: relative;
   transition-property: color;
   transition-duration: 0.2s;
}
button.full-width,
.form-field input[type="submit"].full-width,
.btn.full-width {
   width: 100%;
}

.form-field input[type="submit"]:before,
.btn:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: var(--color-contrast-light);
   color: var(--color-contrast-darkest);
   transform: scaleX(0);
   transform-origin: 0 50%;
   transition-property: transform;
   transition-duration: 0.2s;
   transition-timing-function: ease-out;
}
.form-field input[type="submit"]:hover:before,
.btn:hover:before {
   transform: scaleX(1);
}

.btn.icon-arrow:after {
   content:'→';
   font-size: 1.4rem;
   display:inline-block;
   vertical-align: top;
   margin-left: 10px;
}

.btn.margin-top {
   margin-top: 1.5rem;
}


.btn.btn-large {
   padding: 1.2rem 2rem;
}

.btn.full-width {
   width: 100%;
}

.btn.btn-small {
   padding: .7rem .8rem .5rem;
}

input[type=btn]:hover,
.form-field input[type="submit"]:hover,
input[type=reset]:hover,
.form-field input[type="submit"]:focus,
input[type=btn]:focus,
input[type=submit]:focus,
input[type=reset]:focus,
.btn:hover,
.btn:focus,
.btn:active  {
   color: var(--color-contrast-darkest);
   background: var(--color-contrast-light);
}