// COMPONENT: Boolean Inputs (Checkbox and Radio Button): toggle form state. Basic thing in forms.
// Namespaced via tag name rather than class name.
@function radio-check-mark($fill)
  $fill: unquote(str-slice(ie-hex-str($fill), 4))

  @return url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213%22%20height%3D%2210%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23#{$fill}%22%20stroke-linecap%3D%22square%22%20stroke-width%3D%222%22%20d%3D%22M2%205.083l3%203L11.083%202%22%2F%3E%3C%2Fsvg%3E")

input[type=checkbox], input[type=radio]
  @extend %input-base

  background-color: $input
  background-position: center center
  background-repeat: no-repeat
  border-color: $border
  display: inline-block
  height: $checkbox-size
  flex: 0 0 $checkbox-size
  margin-right: $input-padding
  vertical-align: text-bottom
  width: $checkbox-size

  &:checked
    background-color: $tint
    background-image: radio-check-mark($background)
    border-color: $tint

    &:focus
      border-color: $background

    &[disabled]
      background-image: radio-check-mark($placeholder)

  @at-root label:hover &
    &:not(:checked)
      background-color: $background

input[type=radio]
  border-radius: 50%
