// Checkbox & Radio
.checkbox,
.radio
  margin-bottom: 12px
  padding-left: 32px
  position: relative
  +transition(.25s)

  &:hover
    color: $firm

  input
    outline: none !important
    +opacity(0)

  &.checked
    .icon
      background-position: -60px -30px
      opacity: 1
      display: block\9

    .icon-to-fade
      opacity: 0
      display: none\9

  // Disabled state
  &.disabled
    color: scale-color($gray, $lightness: 62%)
    cursor: default

    .icon
      opacity: 0
      display: none\9

    .icon-to-fade
      background-position: -30px -60px
      opacity: 1
      display: block\9

    &.checked
      .icon
        background-position: 0 -90px
        opacity: 1
        display: block\9

      .icon-to-fade
        opacity: 0
        display: none\9

  // Icon
  .icon,
  .icon-to-fade
    background: url('../images/checkbox.png') -90px 0 no-repeat
    display: block
    height: 20px
    left: 0
    opacity: 1
    position: absolute
    top: -1px
    width: 20px
    +transition(opacity .1s linear)

  .icon
    opacity: 0
    top: 0
    z-index: 2
    display: none\9

// Radio
.radio
  .icon,
  .icon-to-fade
    background-image: url('../images/radio.png')

// Serving 2x images
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 2)
  .checkbox
    .icon
      background-image: url('../images/checkbox-2x.png')
      background-size: 110px 110px

  .radio
    .icon
      background-image: url('../images/radio-2x.png')
      background-size: 110px 110px