// Mixins

@mixin input-border {

border-color: $slate;
border-width: 2px;
border-style: solid;
border-radius: 8px;
background-color: $white;

}

@mixin input-border-focus {

border-color: $bright-blue;
box-shadow: inset 0 0 0 2px $bright-blue;
outline: none;

}

// Cross-browser consistency / bug fixes

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button, input::-webkit-calendar-picker-indicator {

-webkit-appearance: none;
margin: 0;

}

input {

-moz-appearance: textfield;

}

input {

-webkit-appearance: none;

}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */

color: rgba($slate, 0.6);

} ::-moz-placeholder { /* Firefox 19+ */

color: rgba($slate, 0.6);

} :-ms-input-placeholder { /* IE 10+ */

color: rgba($slate, 0.6);

} :-moz-placeholder { /* Firefox 18- */

color: rgba($slate, 0.6);

}

button, input {

-webkit-appearance: none;
-moz-appearance: none;

}

input, input {

// Fix styling inconsistencies with
// date and time inputs on iOS
-webkit-appearance: textfield;
-moz-appearance: textfield;
min-height: 3rem;

}

input {

border: none;
padding: 0;

}

fieldset {

border: 0;
margin: 0;
padding: 0;

}

select:-moz-focusring {

color: transparent;
text-shadow: 0 0 0 $bright-blue;

}

select::-ms-expand {

// Hide browser-standard chevron on IE
display: none;

}

option:not(:checked) {

color: $black;

}

// Layout

form {

max-width: 38rem;

}

legend {

margin-bottom: 0.75rem;

}

.form-group {

position: relative;
margin-bottom: 2.5rem;

p + &,
ul + &,
h1 + &,
h2 + &,
h3 + & {
  margin-top: 2rem;
}

}

.form-section {

@include contain-1090;

}

// Base styles

input, textarea, select, button {

@include rubik;
@include body-short;
color: $slate;
font-weight: $fw-regular;

}

input, textarea, select {

width: 100%;
@include input-border;
border-radius: 8px;
&:focus {
  @include input-border-focus;
}

}

input, input, input + label, input + label {

margin: 0 0 1rem;

}

input, input {

margin-right: 1rem;

}

input, input, input, input, input, input, input, input, input, textarea {

display: block;
padding: 0.64rem 1rem;

}

select {

padding: 0.64rem 1rem;

}

label, legend {

@include rubik;
color: $slate;
font-weight: $fw-regular;
@include font-size-to-rem(24);
letter-spacing: -0.016em;
line-height: 1.5;
@include antialiasing;
margin-bottom: 0.5rem;
display: block;

}

// Field-specific styles

// Number .field-d06 {

input, .units {
  display: inline-block;
}

.units {
  margin-left: 0.5rem;
}

}

// Price .field-d08 {

input {
  width: 10rem;
}

input, .dollar {
  display: inline-block;
}

.dollar {
  font-weight: $fw-light;
  @include font-size-to-rem(51);
  line-height: 1;
  position: relative;
  top: 0.75rem;
  margin-right: 0.5rem;
  color: $slate;
}

}

.field-address {

.form-group {
  margin-bottom: 0;
}

label {
  @include small-text;
  margin: 0 0 0.25rem;
}

input {
  margin-bottom: 0.75rem;
}

}

@media screen and (min-width: 48rem) {

.field-address-state,
.field-address-zip {
  float: left;
}

.field-address fieldset {
  @include clearfix;
}

.field-address-state {
  margin-right: 0.75rem;
}

}

.field-m13 {

label {
  position: relative;
  cursor: pointer;
  height: 6.5rem;
}

input {
  min-width: 14rem;
  margin: 0;
  filter: alpha(opacity=0);
  opacity: 0;
}

.file-custom {
  font-size: 1rem;
  position: absolute;
  padding-top: 2.75rem;
  top: 0;
  right: 0;
  left: 0;
  z-index: 5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;

  &::after {
    content: attr(data-filename);
  }

  &::before {
    @extend button;
    z-index: 6;
    content: "Choose a file";
    background-color: $white;
    color: $bright-blue;
    font-weight: $fw-medium;
  }

  &:hover, &:focus, &:active {
    &::before {
      box-shadow: inset 0 0 0 2px darken($bright-blue, 10%);
      color: darken($bright-blue, 10%);
      background-color: rgba($bright-blue, 0.05);
      color: $bright-blue;
    }
  }
}

}

// Form field length

@for $i from 1 to 16 {

.length-#{$i} {
  width: 2.5rem + (0.65rem * $i);
}

}

// Checkbox and radio button styles

$rc-size: 3rem;

.field-s06, .field-s08 {

label {
  position: relative;
  padding-left: $rc-size + 0.75rem;
  margin-bottom: 1rem;
  min-height: $rc-size;
}

input,
.inline-label::before {
  position: absolute;
  top: 0;
  left: 0;
  width: $rc-size;
  height: $rc-size;
}

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  opacity: 0;
  padding: 0;
  margin: 0;
  &:focus + .inline-label:before {
    @include input-border-focus;
  }
}

.inline-label {
  display: block;
  font-size: initial;
  padding-top: 0.75rem;
  &::before {
    content: '';
    @include input-border;
  }
}

}

// Radio buttons .field-s08 {

.inline-label::before,
.inline-label::after {
  border-radius: 50%;
}

.inline-label::after {
  content: '';
  width: $rc-size * 0.625;
  height: $rc-size * 0.625;
  top: $rc-size * 0.1875;
  left: $rc-size * 0.1875;
  z-index: 2;
  position: absolute;
}

input:checked {
 + .inline-label::after {
    background: $slate;
  }

  &:focus + .inline-label:after {
    background: $bright-blue;
  }
}

input:focus + .inline-label:before {
  background: $white;
}

}

// Checkboxes .field-s06 input:checked {

+ .inline-label::before {
  background-size: 50% 40%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS43NTAwOSAxNi43NTVDNS41ODU3OSAxNi43NTU2IDUuNDIzIDE2LjcyMzYgNS4yNzExMSAxNi42NjFDNS4xMTkyMSAxNi41OTg0IDQuOTgxMjIgMTYuNTA2MyA0Ljg2NTA5IDE2LjM5TDAuMzY1MDkgMTEuODlDMC4yNDU4NzYgMTEuNzc0NiAwLjE1MDg1NCAxMS42MzY1IDAuMDg1NTY3OCAxMS40ODM5QzAuMDIwMjgxMyAxMS4zMzEzIC0wLjAxMzk2MjMgMTEuMTY3MiAtMC4wMTUxNjQ5IDExLjAwMTNDLTAuMDE2MzY3NiAxMC44MzUzIDAuMDE1NDk0NyAxMC42NzA3IDAuMDc4NTYyOSAxMC41MTcyQzAuMTQxNjMxIDEwLjM2MzcgMC4yMzQ2NDIgMTAuMjI0MyAwLjM1MjE3IDEwLjEwNzFDMC40Njk2OTcgOS45ODk4OCAwLjYwOTM4OCA5Ljg5NzI2IDAuNzYzMDkgOS44MzQ2M0MwLjkxNjc5MyA5Ljc3MiAxLjA4MTQzIDkuNzQwNiAxLjI0NzQgOS43NDIyN0MxLjQxMzM2IDkuNzQzOTQgMS41NzczMyA5Ljc3ODY1IDEuNzI5NzQgOS44NDQzN0MxLjg4MjE1IDkuOTEwMDkgMi4wMTk5NSAxMC4wMDU1IDIuMTM1MDkgMTAuMTI1TDUuNzUwMDkgMTMuNzRMMTcuODcwMSAxLjYyMDA0QzE4LjEwNjIgMS4zOTI2NSAxOC40MjIxIDEuMjY3MDkgMTguNzQ5OSAxLjI3MDM5QzE5LjA3NzYgMS4yNzM2OSAxOS4zOTA5IDEuNDA1NiAxOS42MjI0IDEuNjM3NjlDMTkuODUzOCAxLjg2OTc5IDE5Ljk4NDkgMi4xODM1MSAxOS45ODcyIDIuNTExMjdDMTkuOTg5NiAyLjgzOTAzIDE5Ljg2MzEgMy4xNTQ2MSAxOS42MzUxIDMuMzkwMDRMNi42MzUwOSAxNi4zOUM2LjUxODk2IDE2LjUwNjMgNi4zODA5NyAxNi41OTg0IDYuMjI5MDcgMTYuNjYxQzYuMDc3MTggMTYuNzIzNiA1LjkxNDM5IDE2Ljc1NTYgNS43NTAwOSAxNi43NTVaIiBmaWxsPSIjMUMzRTU3Ii8+Cjwvc3ZnPg==');
}

&:focus + .inline-label::before {
  background-color: $bright-blue;
  background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNNS43NTAwOSAxNi43NTVDNS41ODU3OSAxNi43NTU2IDUuNDIzIDE2LjcyMzYgNS4yNzExMSAxNi42NjFDNS4xMTkyMSAxNi41OTg0IDQuOTgxMjIgMTYuNTA2MyA0Ljg2NTA5IDE2LjM5TDAuMzY1MDkgMTEuODlDMC4yNDU4NzYgMTEuNzc0NiAwLjE1MDg1NCAxMS42MzY1IDAuMDg1NTY3OCAxMS40ODM5QzAuMDIwMjgxMyAxMS4zMzEzIC0wLjAxMzk2MjMgMTEuMTY3MiAtMC4wMTUxNjQ5IDExLjAwMTNDLTAuMDE2MzY3NiAxMC44MzUzIDAuMDE1NDk0NyAxMC42NzA3IDAuMDc4NTYyOSAxMC41MTcyQzAuMTQxNjMxIDEwLjM2MzcgMC4yMzQ2NDIgMTAuMjI0MyAwLjM1MjE3IDEwLjEwNzFDMC40Njk2OTcgOS45ODk4OCAwLjYwOTM4OCA5Ljg5NzI2IDAuNzYzMDkgOS44MzQ2M0MwLjkxNjc5MyA5Ljc3MiAxLjA4MTQzIDkuNzQwNiAxLjI0NzQgOS43NDIyN0MxLjQxMzM2IDkuNzQzOTQgMS41NzczMyA5Ljc3ODY1IDEuNzI5NzQgOS44NDQzN0MxLjg4MjE1IDkuOTEwMDkgMi4wMTk5NSAxMC4wMDU1IDIuMTM1MDkgMTAuMTI1TDUuNzUwMDkgMTMuNzRMMTcuODcwMSAxLjYyMDA0QzE4LjEwNjIgMS4zOTI2NSAxOC40MjIxIDEuMjY3MDkgMTguNzQ5OSAxLjI3MDM5QzE5LjA3NzYgMS4yNzM2OSAxOS4zOTA5IDEuNDA1NiAxOS42MjI0IDEuNjM3NjlDMTkuODUzOCAxLjg2OTc5IDE5Ljk4NDkgMi4xODM1MSAxOS45ODcyIDIuNTExMjdDMTkuOTg5NiAyLjgzOTAzIDE5Ljg2MzEgMy4xNTQ2MSAxOS42MzUxIDMuMzkwMDRMNi42MzUwOSAxNi4zOUM2LjUxODk2IDE2LjUwNjMgNi4zODA5NyAxNi41OTg0IDYuMjI5MDcgMTYuNjYxQzYuMDc3MTggMTYuNzIzNiA1LjkxNDM5IDE2Ljc1NTYgNS43NTAwOSAxNi43NTVaIiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPg==');
}

}

// Buttons

button, input, .btn {

border-radius: $radius;
font-weight: $fw-medium;
padding: 0.75rem 1.5rem;
display: inline-block;
text-decoration: none;
margin: 0 0.4375rem 0.875rem 0;
cursor: pointer;

}

button, input {

border: 3px solid $bright-blue;
background-color: $bright-blue;
color: $white;
line-height: 1.75;
&:hover, &:focus {
  background-color: darken($bright-blue, 10%);
  border-color: darken($bright-blue, 10%);
}

&:active {
  background-color: darken($bright-blue, 15%);
  border-color: darken($bright-blue, 15%);
}

&:hover, &:active, &:focus, &:visited {
  color: $white;
  text-decoration: none;
}

}

// Dropdowns

select {

display: block;
background-repeat: no-repeat;
-moz-appearance: none;
-webkit-appearance: none;
// Background gradient needed for <= IE9
// See https://www.filamentgroup.com/lab/select-css.html
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguOTYwMDggMTAuNzU1QzguNzk1NzcgMTAuNzU1NiA4LjYzMjk4IDEwLjcyMzYgOC40ODEwOSAxMC42NjFDOC4zMjkyIDEwLjU5ODMgOC4xOTEyMSAxMC41MDYyIDguMDc1MDggMTAuMzlMMC41NzUwNzUgMi44OUMwLjM0MDM1OSAyLjY1NTI4IDAuMjA4NDk2IDIuMzM2OTQgMC4yMDg0OTYgMi4wMDVDMC4yMDg0OTYgMS42NzMwNiAwLjM0MDM1OSAxLjM1NDcxIDAuNTc1MDc1IDEuMTJDMC44MDk3OTIgMC44ODUyOCAxLjEyODE0IDAuNzUzNDE4IDEuNDYwMDggMC43NTM0MThDMS43OTIwMSAwLjc1MzQxOCAyLjExMDM2IDAuODg1MjggMi4zNDUwOCAxLjEyTDguOTYwMDggNy43NEwxNS41NzUxIDEuMTJDMTUuODA5OCAwLjg4NTI4IDE2LjEyODEgMC43NTM0MTggMTYuNDYwMSAwLjc1MzQxOEMxNi43OTIgMC43NTM0MTggMTcuMTEwNCAwLjg4NTI4IDE3LjM0NTEgMS4xMkMxNy41Nzk4IDEuMzU0NzEgMTcuNzExNyAxLjY3MzA2IDE3LjcxMTcgMi4wMDVDMTcuNzExNyAyLjMzNjk0IDE3LjU3OTggMi42NTUyOCAxNy4zNDUxIDIuODlMOS44NDUwOCAxMC4zOUM5LjcyODk0IDEwLjUwNjIgOS41OTA5NSAxMC41OTgzIDkuNDM5MDYgMTAuNjYxQzkuMjg3MTcgMTAuNzIzNiA5LjEyNDM4IDEwLjc1NTYgOC45NjAwOCAxMC43NTVaIiBmaWxsPSIjMUMzRTU3Ii8+Cjwvc3ZnPgo='), linear-gradient(#fff, #fff);
&:focus {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxOCAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguOTYwMDggMTAuNzU1QzguNzk1NzcgMTAuNzU1NiA4LjYzMjk4IDEwLjcyMzYgOC40ODEwOSAxMC42NjFDOC4zMjkyIDEwLjU5ODMgOC4xOTEyMSAxMC41MDYyIDguMDc1MDggMTAuMzlMMC41NzUwNzUgMi44OUMwLjM0MDM1OSAyLjY1NTI4IDAuMjA4NDk2IDIuMzM2OTQgMC4yMDg0OTYgMi4wMDVDMC4yMDg0OTYgMS42NzMwNiAwLjM0MDM1OSAxLjM1NDcxIDAuNTc1MDc1IDEuMTJDMC44MDk3OTIgMC44ODUyOCAxLjEyODE0IDAuNzUzNDE4IDEuNDYwMDggMC43NTM0MThDMS43OTIwMSAwLjc1MzQxOCAyLjExMDM2IDAuODg1MjggMi4zNDUwOCAxLjEyTDguOTYwMDggNy43NEwxNS41NzUxIDEuMTJDMTUuODA5OCAwLjg4NTI4IDE2LjEyODEgMC43NTM0MTggMTYuNDYwMSAwLjc1MzQxOEMxNi43OTIgMC43NTM0MTggMTcuMTEwNCAwLjg4NTI4IDE3LjM0NTEgMS4xMkMxNy41Nzk4IDEuMzU0NzEgMTcuNzExNyAxLjY3MzA2IDE3LjcxMTcgMi4wMDVDMTcuNzExNyAyLjMzNjk0IDE3LjU3OTggMi42NTUyOCAxNy4zNDUxIDIuODlMOS44NDUwOCAxMC4zOUM5LjcyODk0IDEwLjUwNjIgOS41OTA5NSAxMC41OTgzIDkuNDM5MDYgMTAuNjYxQzkuMjg3MTcgMTAuNzIzNiA5LjEyNDM4IDEwLjc1NTYgOC45NjAwOCAxMC43NTVaIiBmaWxsPSIjNEY2NkVFIi8+Cjwvc3ZnPgo='), linear-gradient(#fff, #fff);
}
background-size: 18px 11px;
background-position: right 1rem top 50%;
padding-right: 3rem;
border: 2px solid $slate;

option {
  font-weight: normal;
  font-size: 100%;
}

}

// Optional label

.optional {

opacity: 0.8;

}

// Help text

.help-text {

margin: 0.5rem 0 0;

}

// Error messages // (The formbuilder uses 1000hz-bootstrap-validator, // which requires the .help-block class)

.help-block {

margin-top: 0.5rem;

&:empty {
  margin-top: 0;
}

&.with-errors {
  display: block;
  color: $white;

  ul {
    font-size: 1rem;
    background: $red-4;
    color: $white;
    padding: 0.25rem 0.75rem;
    border-radius: $radius;
    display: inline-block;
    @include antialiasing;
    margin: 0;
  }

  li {
    list-style-type: none;
  }
}

&.with-errors-inline ul {
  @include small-text;
  padding: 0;
  background: transparent;
  color: $red-4;
  position: relative;
  top: -0.25rem;
  margin: 0;
}

}