/*
 *
 * Forms
 *
 *
*/
// sass-lint:disable no-important, no-ids

.alternate {
  input[type="color"],
  input[type="date"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="email"],
  input[type="month"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="time"],
  input[type="url"],
  input[type="week"],
  select,
  textarea {
    border: 2px solid color(ben-franklin-blue);
    background-color: white;
  }
}

input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
textarea:focus {
  border: 2px solid color(electric-blue);
  background-color: $white;
}

select {
  height:auto;
  border:2px solid color(dark-ben-franklin);
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}

input:focus::-webkit-input-placeholder {
  color: transparent;
}

input:focus:-moz-placeholder {
  color: transparent;
}
/* FF 4-18 */
input:focus::-moz-placeholder {
  color: transparent;
}
/* FF 19+ */
input:focus:-ms-input-placeholder {
  color: transparent;
}
/* IE 10+ */
//chome autocomplete hack to stop random ugly yellow background
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

//Custom checkboxes
input[type=checkbox] {
  display: none;

  + label[for] {
    color: color(dark-ben-franklin);
    font-size: $global-font-size;
  }

  + label::before {
    display: inline-block;
    content: "\f0c8"; /* square */
    padding-right: 10px;
    font-family: "Font Awesome 5 Pro";
    font-weight: 400; /* regular */
    color: color(dark-ben-franklin);

  }

  &:checked + label::before {
    display: inline-block;
    padding-right: 10px;
    content: "\f14a"; /* check-square */
    font-family: "Font Awesome 5 Pro";
    font-weight: 400; /* regular */
  }
}

//Custom Radios
input[type=radio] {
  display: none;

  + label[for] {
    color: color(dark-ben-franklin);
    font-size: $global-font-size;
  }

  + label::before {
    display: inline-block;
    content: "\f111"; /* circle */
    padding-right: 10px;
    font-family: "Font Awesome 5 Pro";
    font-weight: 400; /* regular */
    color: color(dark-ben-franklin);

  }

  &:checked + label::before {
    display: inline-block;
    padding-right: 10px;
    content: "\f111"; /* circle */
    font-family: "Font Awesome 5 Pro";
    font-weight: 900; /* solid */
  }
}

.search {
  width: 100%;
  position: relative;

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    height: 3.8rem;
    padding: 0.4rem;
    width: 4rem;
    font-size: 2rem;
    font-family: "Font Awesome 5 Pro";
    font-weight: 400; /* regular */
    content: "\f002"; /* search */
    text-align: center;
    background: color(dark-ben-franklin);
    color: white;
    font-weight: normal;
  }

  .search-field,
  input[type="text"]:focus {
    min-height: 3.8rem;
    border: 2px solid color(dark-ben-franklin);
    background: white;
  }

  input[type="text"] {
    background: white;
  }

  input[type="submit"] {
    z-index: 10;
    position: absolute;
    top: 0;
    right: 0;
    width: 3.8rem;
    height: 3.8rem;
    opacity: 0;
    cursor: pointer;
  }
}