$color--white = #FFFFFF
$color--black = #000000
$color--light-grey = #E6E6E6
$color--grey = #CCCCCC
$color--dark-grey = #7B7B7B
$color--primary = #2AA1C0
$color--secondary = #0E647D

html, body
  height 100%

body
  background $color--light-grey
  font-family 'Source Sans Pro', sans-serif

.container
  width 100%
  height 100%
  display flex
  flex-wrap wrap
  justify-content center
  align-items center

h1
  font-family 'Alegreya Sans', sans-serif
  font-weight 300
  margin-top 0

// Box to contain form controls
.control-group
  display inline-block
  vertical-align top
  background $color--white
  text-align left
  box-shadow 0 1px 2px rgba(0, 0, 0, 0.1)
  padding 30px
  width 200px
  height 210px
  margin 10px

// Basic control styles
.control
  display block
  position relative
  padding-left 30px
  margin-bottom 15px
  cursor pointer
  font-size 18px
  
  // Hide default browser input
  input
    position absolute
    z-index -1
    opacity 0
    

// Custom control
.control__indicator
  position absolute
  top 2px
  left 0
  height 20px
  width 20px
  background $color--light-grey
  
  .control--radio &
    border-radius 50% // Makes radio buttons circlular
  
  // Hover and focus
  .control:hover input ~ &,
  .control input:focus ~ &
    background $color--grey
  
  // Checked
  .control input:checked ~ &
    background $color--primary

  // Hover when checked
  .control:hover input:not([disabled]):checked ~ &,
  .control input:checked:focus ~ &
    background $color--secondary
  
  // Hide default browser input
  .control input:disabled ~ &
    background $color--light-grey
    opacity 0.6
    pointer-events none

  &:after
    content ''
    position absolute
    display none // Hide check

    .control input:checked ~ &
      display block // Show check
 
    // Checkbox tick
    .control--checkbox &
      left 8px
      top 4px
      width 3px
      height 8px
      border solid $color--white
      border-width 0 2px 2px 0
      transform rotate(45deg)
    
    // Disabled tick colour
    .control--checkbox input:disabled ~ &
      border-color $color--dark-grey

    // Radio button inner circle
    .control--radio &
      left 7px
      top 7px
      height 6px
      width 6px
      border-radius 50%
      background $color--white

    // Disabled circle colour
    .control--radio input:disabled ~ &
      background $color--dark-grey
      
.select
  position relative
  display inline-block
  margin-bottom 15px
  width 100%

  select
    display inline-block
    width 100%
    cursor pointer
    padding 10px 15px
    outline 0
    border 0
    border-radius 0
    background $color--light-grey
    color $color--dark-grey
    appearance none
    -webkit-appearance none
    -moz-appearance none
    
    &::-ms-expand
      display none
    
    &:hover,
    &:focus
      color $color--black
      background $color--grey
  
    &:disabled
      opacity 0.5
      pointer-events none
      
.select__arrow
  position absolute
  top 16px
  right 15px
  width 0
  height 0
  pointer-events none
  border-style solid
  border-width 8px 5px 0 5px
  border-color $color--dark-grey transparent transparent transparent
  
  .select select:hover ~ &
  .select select:focus ~ &
    border-top-color $color--black
  
  .select select:disabled ~ &
    border-top-color $color--grey