Input: Checkbox

input[type="text"], 
input[type="password"], 
input[type="file"], 
input[type="datetime-local"], 
input[type="date"], 
input[type="month"], 
input[type="time"], 
input[type="week"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="search"], 
input[type="tel"] {
  @extend %input;
}

input::placeholder {
  font-style: italic;
  color: #999;
}

input[type="color"], 
input[type="range"] {
  font-size: inherit;
  font-family: $font-stack-form-ui;
  outline: 0;
  display: inline-block;
  width: 100%;
  box-shadow: none;
}

/*
Make sure date/time fields are as tall as empty text fields for consistency.
Mobile Safari collapses them.
line height + vertical padding + border widths
*/
input[type="datetime-local"],
input[type="date"],
input[type="time"] {
  min-height: calc(#{$line-height} + 1.5em + 2px); 
}

input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="file"]:focus, 
input[type="datetime-local"]:focus, 
input[type="date"]:focus, 
input[type="time"]:focus, 
input[type="number"]:focus, 
input[type="email"]:focus, 
input[type="url"]:focus, 
input[type="search"]:focus, 
input[type="tel"]:focus {
  @extend %inputfocus;
}

input[type="color"]:focus, 
input[type="range"]:focus {
  outline: 0;
}

input[type="color"] {
  /*Ensure height matches text input height*/
  height: calc(#{$font-size-base/2} + #{$line-height});
  width: calc(#{$font-size-base/2} + #{$line-height});
  background: transparent;
  appearance: none;
  border: solid 1px #fff;
  outline: solid 1px #ccc;
}

input[type="radio"] {
  border: solid 1px #999;
  font-size: 1em;
  height: 1em;
  width: 1em;
  border-radius: 50%;
  vertical-align: middle;
  appearance: none;

  &:checked, 
  &:active, 
  &:focus {
    outline: 0;
  }
}

input[type="checkbox"] {
  border: solid 1px #999;
  border-radius: .2em;
  font-size: 1.1em;
  height: 1em;
  width: 1em;
  line-height: 1;
  vertical-align: middle;
  appearance: none;

  &:checked, 
  &:active, 
  &:focus {
    outline: 0;
  }
}

input[type="radio"],
input[type="checkbox"] {
  transition: 
    background-color 100ms ease-in-out, 
    background-image 100ms ease-in-out, 
    border 100ms ease-in-out;
  margin: 0 0 .15em;
}

input[type="checkbox"]:checked {
  background: 
    $color-selected-box 
    url('data:image/svg+xml;utf8,<svg width="19" height="19" xmlns="http://www.w3.org/2000/svg"><path d="M3.58 10.936l1.86-1.71L7.5 12l6.848-7.407 1.484 1.736L7.5 15.46l-3.92-4.524z" fill="white"/></svg>')
    50% 50%
    no-repeat;
  border-color: $color-selected-box;
}

input[type="radio"]:checked {
  border-color: $color-selected-box;
  background: $color-selected-box;
  box-shadow: inset 0 0 0 3px #fff;
}

// Show valid styling only if a value is present
input[type="text"]:not(:placeholder-shown):valid,
input[type="url"]:not(:placeholder-shown):valid,
input[type="tel"]:not(:placeholder-shown):valid,
input[type="email"]:not(:placeholder-shown):valid {
  outline: 0;
  border-color: green;
  background: lighten(green, 65%);
}
 
input[type="text"]:not(:placeholder-shown):invalid,
input[type="url"]:not(:placeholder-shown):invalid,
input[type="tel"]:not(:placeholder-shown):invalid,
input[type="email"]:not(:placeholder-shown):invalid {
  border-color: $color-error;
  outline: 0;
  box-shadow: none;
  background: lighten($color-error, 40%);
}

input[disabled] {
  background: #eee;
  color: #888;
  box-shadow: none;
}

input[aria-invalid] {
  border-color: $color-error !important;
  background: #fee !important;
}