.checkbox,.switch
  position: relative
  cursor: pointer
  display: inline-block
  text-decoration: none
  text-align: center
  border-width: 0px
  margin: 0px
  text-transform: uppercase
  white-space: nowrap
  -webkit-appearance: none
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  -webkit-touch-callout: none
  -webkit-border: none
  -webkit-margin: none
  vertical-align: top
  @include box-shadow( none ) 
  @include box-mode
  margin-bottom: $baseLineSpacing
  overflow: hidden
  display: inline-block

.checkbox
  width: 44px
  height: 44px
  background: none
  color: #333
  @include border-radius( 0px )
  position: relative

  &:hover, &.selected
    background: none 

  .outer_decorator
    height: 32px
    width: 32px
    position: absolute
    top: 6px
    left: 6px
    @include border-radius(32px)
    @include box-mode
    background: #FFFFFF
    border: 3px solid #CCC

    .inner_decorator
      width: 16px
      height: 16px
      @include border-radius(16px)
      @include box-mode
      position: absolute
      left: 5px
      top: 7px
      display: none
      font-size: 16px

      span
        display: block
        text-align: center

    .label_decorator_on, .label_decorator_off
      display: none

  &.selected
    .outer_decorator
      .inner_decorator
        display: block

.switch
  width: 88px
  height: 44px

  .outer_decorator

    width: 88px
    height: 44px
    @include box-mode
    border: 2px solid #CCC

    .inner_decorator
      width: 44px
      height: 44px
      position: absolute
      top: 0px
      left: 0px
      background: #CCC
      z-index: 2
      @include transition-property( left )
      @include transition-duration(0.10s)
      @include transition-timing-function( ease-in-out )

      span
        display: none

    .label_decorator_on, .label_decorator_off
      position: absolute
      z-index: 1
      display: block
      width: 44px
      font-size: 11px
      font-weight: bold
      line-height: 42px
      height: 44px

    .label_decorator_on
      left: 0px
      color: #333

    .label_decorator_off
      right: 0px
      color: #999

  &.selected
    .outer_decorator
      .inner_decorator
        left: 44px