/**
*
* Copyright 2012 Adobe Systems Inc.;
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/

// NOTE: You can't use @extend that break component independent and topdoc parsing.

// internal variables
var-background-color-checked--checkbox = $highlight-color // background color active
var-checkbox-border-color = $highlight-color // boder color
var-checkbox-border-color-active = $highlight-color // boder color active
var-checkmark-color = #fff // indicator color

var-checkmark-foot-height = 6px
var-checkbox-border = 1px solid var-checkbox-border-color
var-background-color--before--checkbox = var-background-color-checked--checkbox
var-checkmark-border = 3px solid var-checkmark-color
var-checkmark-tail-width = 12px
var-checkmark-border-width = 2px
var-checkmark-top = 6px
var-checkmark-left = 5px
var-checkbox-size = 24px
var-border--checkmark--noborder = 3px solid var-checkbox-border-color
var-checkbox-border-radius = 16px
var-checkmark-border-radius = 0px


/*! topdoc
  name: Checkbox
  class: checkbox
  modifiers:
    :focus: Focus state
    :disabled: Disabled state
  markup:
    <label class="checkbox">
      <input type="checkbox">
      <div class="checkbox__checkmark"></div>
      OFF
    </label>

    <label class="checkbox">
      <input type="checkbox" checked="checked">
      <div class="checkbox__checkmark"></div>
      ON
    </label>

    <label class="checkbox">
      <input type="checkbox" disabled>
      <div class="checkbox__checkmark"></div>
      Disabled
    </label>
*/

checkbox()
  reset-box-model()
  inline-block()
  reset-cursor()
  reset-font()
  hide-input-parent()

checkbox__label()
  inline-block()
  reset-cursor()
  reset-font()

checkbox--disabled()
  disabled()

checkbox--before()
  content ''
  position absolute

checkbox--after()
  checkbox--before()

.checkbox
  checkbox__label()
  line-height var-checkbox-size
  margin 10px 0

.checkbox > .checkbox__checkmark
  checkbox()
  height var-checkbox-size
  pointer-events none

.checkbox > input[type="checkbox"]
  hide-input()
  height 0
  width 0

.checkbox > input[type="checkbox"]:checked
  background var-background-color-checked--checkbox

.checkbox > input[type="checkbox"]:checked + .checkbox__checkmark:before
  background var-background-color--before--checkbox
  border var-checkbox-border

.checkbox > input[type="checkbox"]:checked + .checkbox__checkmark:after
  opacity 1

.checkbox > .checkbox__checkmark:before
  checkbox--before()
  reset-box-model()
  width var-checkbox-size
  height var-checkbox-size
  background transparent
  border var-checkbox-border
  border-radius var-checkbox-border-radius
  box-shadow var-box-shadow
  left 0

.checkbox > .checkbox__checkmark
  checkbox()
  width var-checkbox-size
  height var-checkbox-size

// checkmark's line
.checkbox > .checkbox__checkmark:after
  checkbox--after()
  top var-checkmark-top
  left var-checkmark-left
  width var-checkmark-tail-width
  height var-checkmark-foot-height
  background transparent
  border var-checkmark-border
  border-width var-checkmark-border-width
  border-top none
  border-right none
  border-radius var-checkmark-border-radius
  transform rotate(-45deg)
  opacity 0

.checkbox > input[type="checkbox"]:focus + .checkbox__checkmark:before
  box-shadow var-box-shadow--cta

.checkbox > input[type="checkbox"]:disabled + .checkbox__checkmark
  checkbox--disabled()

.checkbox > input[type="checkbox"]:disabled:active + .checkbox__checkmark:before
  background transparent
  box-shadow var-box-shadow

/*! topdoc
  name: No border Checkbox
  class: checkbox--noborder
  markup:
    <label class="checkbox--noborder">
      <input type="checkbox">
      <div class="checkbox__checkmark"></div>
      OFF
    </label>

    <label class="checkbox--noborder">
      <input type="checkbox" checked="checked">
      <div class="checkbox__checkmark"></div>
      ON
    </label>

    <label class="checkbox--noborder">
      <input type="checkbox" disabled checked="checked">
      <div class="checkbox__checkmark"></div>
      Disabled
    </label>
 */

.checkbox--noborder > input[type="checkbox"]
  hide-input()

.checkbox--noborder
  checkbox__label()
  line-height var-checkbox-size
  margin 10px 0
  hide-input-parent()

.checkbox--noborder > .checkbox__checkmark
  inline-block()
  reset-cursor()
  reset-box-model()
  height var-checkbox-size
  background transparent

.checkbox--noborder > input[type="checkbox"]
  hide-input()
  height 0
  width 0

.checkbox--noborder > input[type="checkbox"]:checked + .checkbox__checkmark:before
  background transparent
  border none

.checkbox--noborder > input[type="checkbox"]:checked + .checkbox__checkmark:after
  opacity 1

.checkbox--noborder > .checkbox__checkmark:before
  content ''
  position absolute
  width var-checkbox-size
  height var-checkbox-size
  background transparent
  border none
  border-radius var-checkbox-border-radius
  left 0

.checkbox--noborder > .checkbox__checkmark
  inline-block()
  reset-cursor()
  reset-box-model()
  width var-checkbox-size
  height var-checkbox-size
  border none

.checkbox--noborder > .checkbox__checkmark:after
  content ''
  position absolute
  top var-checkmark-top
  left var-checkmark-left
  opacity 0
  width var-checkmark-tail-width
  height var-checkmark-foot-height
  background transparent
  border var-border--checkmark--noborder
  border-width var-checkmark-border-width
  border-top none
  border-right none
  border-radius var-checkmark-border-radius
  transform rotate(-45deg)

.checkbox--noborder > input[type="checkbox"]:focus + .checkbox__checkmark:before
  border none
  box-shadow var-box-shadow--cta

.checkbox--noborder > input[type="checkbox"]:disabled + .checkbox__checkmark
  disabled()

.checkbox--noborder > input[type="checkbox"]:disabled:active + .checkbox--noborder__checkmark:before
  background transparent
  box-shadow var-box-shadow
  border none
