body
  .column
    input.flat-check#checkbox1(type="checkbox")
    label.flat-check-label.red-label(for="checkbox1") Red
    input.flat-check#checkbox2(type="checkbox")
    label.flat-check-label.orange-label(for="checkbox2") Orange
    input.flat-check#checkbox3(type="checkbox")
    label.flat-check-label.yellow-label(for="checkbox3") Yellow
    input.flat-check#checkbox4(type="checkbox")
    label.flat-check-label.green-label(for="checkbox4") Green
    input.flat-check#checkbox5(type="checkbox")
    label.flat-check-label.blue-label(for="checkbox5") Blue
    input.flat-check#checkbox6(type="checkbox")
    label.flat-check-label.purple-label(for="checkbox6") Purple
    input.flat-check#checkbox7(type="checkbox")
    label.flat-check-label.dark-label(for="checkbox7") Dark

  .column
    p Horizontal radio group.
    .radio-group.radio-group--horizontal.ilc4
      input.flat-radio#radio1(type="radio", name="radio-group1")
      label.flat-radio-label(for="radio1") A
      input.flat-radio#radio2(type="radio", name="radio-group1")
      label.flat-radio-label(for="radio2") B
      input.flat-radio#radio3(type="radio", name="radio-group1")
      label.flat-radio-label(for="radio3") C
      input.flat-radio#radio4(type="radio", name="radio-group1")
      label.flat-radio-label(for="radio4") D
  
  .column
    p Vertical radio group.
    .radio-group.radio-group--vertical
      input.flat-radio#radio5(type="radio", name="radio-group2")
      label.flat-radio-label(for="radio5") E
      input.flat-radio#radio6(type="radio", name="radio-group2")
      label.flat-radio-label(for="radio6") F
      input.flat-radio#radio7(type="radio", name="radio-group2")
      label.flat-radio-label(for="radio7") G
      input.flat-radio#radio8(type="radio", name="radio-group2")
      label.flat-radio-label(for="radio8") H
  
  .column
    p Checkbox group.
    .checkbox-group
      input.flat-check#checkbox9(type="checkbox")
      label.flat-check-label.orange-label(for="checkbox9") One
      input.flat-check#checkbox10(type="checkbox")
      label.flat-check-label.yellow-label(for="checkbox10") Two
      input.flat-check#checkbox11(type="checkbox")
      label.flat-check-label.green-label(for="checkbox11") Three
      input.flat-check#checkbox12(type="checkbox")
      label.flat-check-label.blue-label(for="checkbox12") Four

  .column
    p Basic checkboxes
    input.basic-check#checkbox-basic-1(type="checkbox")
    label.basic-check-label(for="checkbox-basic-1") Basic
    input.basic-check#checkbox-basic-2(type="checkbox")
    label.basic-check-label(for="checkbox-basic-2") Checkboxes

  .column
    p Text input.
    input(type="text")
    p Disabled input.
    input(type="text", disabled)
    p Another text input.
    input(type="text")
    
    input.flat-slider(type="range", min="1", max="60", value="30", onchange="rangeout.value=value")
    output#rangeout 30
    
    <script src="//use.edgefonts.net/lato:n3.js"></script>

/* VARIABLES */
liteGreen = rgba(46, 204, 113,1.0)
liteBlue = rgba(52, 152, 219,1.0)
litePurple = rgba(155, 89, 182,1.0)
liteRed = rgba(231, 76, 60,1.0)
liteOrange = rgba(230, 126, 34,1.0)
liteYellow = rgba(241, 196, 15,1.0)


/* MIXINS */
flat-label(color)
  background-color color
  border-color color
  &::after
    border-color inherit

inline-children(num)
  > *
    width (100% / num)

/* styles */

*, *:after, *:before
  box-sizing border-box

html
  font-size 150%

body
  margin 2rem 0
  background #fafaf4;
  font-family Avenir, 'lato', Lato, 'open-sans', Open Sans, sans-serif
  color #333
  font-weight 300
  -webkit-backface-visibility hidden

div
  margin 1rem 0

.column
  width: 50%;
  margin: 0 auto;

label
  cursor pointer

.flat-check
  display: none
  &:checked + .flat-check-label
  &:checked + .flat-check-label::after
    opacity 1

.flat-check-label
  display block
  padding 1rem
  border-radius .25em
  transition .15s ease background-color
  position relative
  color white
  opacity .6
  transition .15s ease opacity
  margin-bottom 1rem
  text-align center
  &::before
    content ""
    width 1rem
    height 1rem
    position absolute
    right -2rem
    border 1px solid black
    background white
  &::after
    content: ""
    width: 1rem
    height: 1.5rem
    position: absolute
    right: -2rem
    top: .5rem
    border: .5rem solid
    border-left: none
    border-top: none
    -webkit-transform: rotate(45deg)
    -moz-transform: rotate(45deg)
    -ms-transform: rotate(45deg)
    -o-transform: rotate(45deg)
    transform: rotate(45deg)
    opacity: 0
    transition: .15s ease opacity
  // &:hover::after
  //   opacity: .6;

.blue-label
  flat-label liteBlue

.purple-label
  flat-label litePurple

.red-label
  flat-label liteRed

.orange-label
  flat-label liteOrange

.yellow-label
  flat-label liteYellow

.green-label
  flat-label liteGreen

.dark-label
  flat-label rgba(52, 73, 94,1.0)

.radio-group
  font-size 0
  margin-bottom 2rem
  & input
    display none
  & input:checked + label
    opacity 1
    cursor default
  & input:checked + label::after
    opacity 0
  & input:checked + label::before
    content ""
    opacity 1
    width 1rem
    height 1rem
    background blue
  & label
    font-size 1rem
    display inline-block
    padding 1rem
    text-align center
    opacity .5
    position relative
    transition .15s ease opacity
    color white
    &::after
      content ""
      font-size 1rem
      opacity 0
      width 1rem
      height 1rem
      border .5rem solid
      border-left none
      border-bottom none
      position absolute
      transition .15s ease opacity
    &:hover::after
      opacity 1

.radio-group--horizontal
  & label
    &:first-of-type
      border-top-left-radius .25em
      border-bottom-left-radius .25em
    &:last-of-type
      border-top-right-radius .25em
      border-bottom-right-radius .25em     
    &::after
      left 40%
      bottom -1.5rem
      -webkit-transform: rotate(-45deg)
      -moz-transform: rotate(-45deg)
      -ms-transform: rotate(-45deg)
      -o-transform: rotate(-45deg)
      transform: rotate(-45deg)

.radio-group--vertical
  & label
    display block
    &:first-of-type
      border-top-left-radius .25rem
      border-top-right-radius .25rem
    &:last-of-type
      border-bottom-left-radius .25em
      border-bottom-right-radius .25em     
    &:not(:last-of-type)
      /* border-bottom 1px solid #fff */
    &::after
      left -2rem
      top 1rem
      -webkit-transform: rotate(45deg)
      -moz-transform: rotate(45deg)
      -ms-transform: rotate(45deg)
      -o-transform: rotate(45deg)
      transform: rotate(45deg)

.checkbox-group
  margin 2rem 0
  & label
    margin-bottom 0
    border-radius 0
    &:first-of-type
      border-top-left-radius .25rem
      border-top-right-radius .25rem
    &:last-of-type
      border-bottom-left-radius .25em
      border-bottom-right-radius .25em     
    &:not(:last-of-type)
      /* border-bottom 1px solid #fff */

.justified
  text-align justify
  &:after
    content ""
    display inline-block
    height 0
    width 100%

input[name="radio-group1"] + label
  flat-label liteGreen

input[name="radio-group2"] + label
  flat-label liteOrange

input[type="text"] 
  width 100%
  padding .25rem .25rem
  border-radius 0
  font-weight 300
  transition .25s linear outline, .25s linear border
  outline 8px solid transparent
  border 1px solid rgba(52, 152, 219,.5)
  &:hover
    border-color rgba(52, 152, 219,1)
  &:focus
    outline 2px solid rgba(52, 152, 219,.8)

input[type="text"]:disabled
  width 100%
  padding .25rem .25rem
  border-radius 0
  font-weight 300
  cursor not-allowed
  background rgba(0,0,0,.01)
  border 1px solid rgba(0, 0, 0,.25)

.basic-check
  display: none
  &:checked + .basic-check-label::after
    opacity 1

.basic-check-label
  padding-right 2rem
  display inline-block
  position relative
  &::before
    content ""
    width .75rem
    height .75rem
    position absolute
    bottom .25rem
    right .5rem
    border 1px solid #555
    background white
  &::after
    content ""
    width .75rem
    height 1.25rem
    position absolute
    right .375rem
    bottom .125rem
    border .4375rem solid liteBlue
    border-left none
    border-top none
    -webkit-transform rotate(45deg)
    -moz-transform rotate(45deg)
    -ms-transform rotate(45deg)
    -o-transform rotate(45deg)
    transform rotate(45deg)
    opacity 0
    transition .15s ease opacity
  &:hover::after
    opacity .33;

.flat-slider 
  margin-top 1.5rem
  -webkit-appearance none
  width 100%
  height 1.5rem
  overflow hidden
  position relative
  cursor pointer
  &:after
    position absolute
    content " "
    width 100%
    height .5rem
    right 0
    top .55rem
    background rgba(52, 152, 219,.35)
    z-index 2
  &::-webkit-slider-thumb
    -webkit-appearance none
    background liteBlue
    width 1rem
    height 1rem
    // border-radius .125rem
    position relative
    z-index 1
    outline 8px solid transparent
    transition outline .3s linear
  &::-webkit-slider-thumb:after
    position absolute
    content " "
    width 100rem
    height .5rem
    z-index 0
    right .5rem
    top .25rem
    background rgba(52, 152, 219,1)
  &:focus
    outline none
  &:active
    outline none
    &::-webkit-slider-thumb
      outline 0px solid rgba(52, 152, 219,1)


.ilc2
  inline-children 2

.ilc3
  inline-children 3

.ilc4
  inline-children 4

.ilc5
  inline-children 5

.ilc6
  inline-children 6