/*!
 * # Semantic UI - Checkbox
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
           Checkbox
*******************************/


/*--------------
    Content
---------------*/

.ui.checkbox {
  position: relative;
  display: inline-block;
  backface-visibility: hidden;
  outline: none;
  vertical-align: baseline;
  font-style: normal;

  min-height: @checkboxCheckboxSize;
  font-size: @medium;
  line-height: @checkboxCheckboxLineHeight;
  min-width: @checkboxCheckboxSize;
}

/* HTML Checkbox */
.ui.checkbox input[type="checkbox"],
.ui.checkbox input[type="radio"] {
  cursor: pointer;
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0 !important;
  outline: none;
  z-index: 3;
  width: @checkboxCheckboxSize;
  height: @checkboxCheckboxSize;
}


/*--------------
      Box
---------------*/


.ui.checkbox .box,
.ui.checkbox label {
  cursor: auto;
  position: relative;
  display: block;
  padding-left: @checkboxLabelDistance;
  outline: none;
  font-size: @checkboxLabelFontSize;
}

.ui.checkbox .box:before,
.ui.checkbox label:before {
  position: absolute;
  top: 0px;
  left: 0px;

  width: @checkboxCheckboxSize;
  height: @checkboxCheckboxSize;
  content: '';

  background: @checkboxCheckboxBackground;
  border-radius: @checkboxCheckboxBorderRadius;

  transition: @checkboxTransition;
  border: @checkboxCheckboxBorder;
}

/*--------------
    Checkmark
---------------*/

.ui.checkbox .box:after,
.ui.checkbox label:after {
  position: absolute;
  font-size: @checkboxCheckboxCheckFontSize;
  top: @checkboxCheckboxCheckTop;
  left: @checkboxCheckboxCheckLeft;
  width: @checkboxCheckboxCheckSize;
  height: @checkboxCheckboxCheckSize;
  text-align: center;

  opacity: 0;
  color: @checkboxCheckboxColor;
  transition: @checkboxTransition;
}

/*--------------
      Label
---------------*/

/* Inside */
.ui.checkbox label,
.ui.checkbox + label {
  color: @checkboxLabelColor;
  transition: @checkboxLabelTransition;
}

/* Outside */
.ui.checkbox + label {
  vertical-align: middle;
}


/*******************************
           States
*******************************/


/*--------------
      Hover
---------------*/

.ui.checkbox .box:hover::before,
.ui.checkbox label:hover::before {
  background: @checkboxCheckboxHoverBackground;
  border-color: @checkboxCheckboxHoverBorderColor;
}
.ui.checkbox label:hover,
.ui.checkbox + label:hover {
  color: @checkboxLabelHoverColor;
}

/*--------------
      Down
---------------*/

.ui.checkbox .box:active::before,
.ui.checkbox label:active::before {
  background: @checkboxCheckboxPressedBackground;
  border-color: @checkboxCheckboxPressedBorderColor;
}
.ui.checkbox .box:active::after,
.ui.checkbox label:active::after {
  color: @checkboxCheckboxPressedColor;
}
.ui.checkbox input:active ~ label {
  color: @checkboxLabelPressedColor;
}

/*--------------
     Focus
---------------*/

.ui.checkbox input:focus ~ .box:before,
.ui.checkbox input:focus ~ label:before {
  background: @checkboxCheckboxFocusBackground;
  border-color: @checkboxCheckboxFocusBorderColor;
}
.ui.checkbox input:focus ~ .box:after,
.ui.checkbox input:focus ~ label:after {
  color: @checkboxCheckboxFocusCheckColor;
}
.ui.checkbox input:focus ~ label {
  color: @checkboxLabelFocusColor;
}

/*--------------
     Active
---------------*/

.ui.checkbox input:checked ~ .box:before,
.ui.checkbox input:checked ~ label:before {
  background: @checkboxCheckboxActiveBackground;
  border-color: @checkboxCheckboxActiveBorderColor;
}
.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ label:after {
  opacity: @checkboxCheckboxActiveCheckOpacity;
  color: @checkboxCheckboxActiveCheckColor;
}

/*--------------
  Indeterminate
---------------*/

.ui.checkbox input:not([type=radio]):indeterminate ~ .box:before,
.ui.checkbox input:not([type=radio]):indeterminate ~ label:before {
  background: @checkboxCheckboxIndeterminateBackground;
  border-color: @checkboxCheckboxIndeterminateBorderColor;
}
.ui.checkbox input:not([type=radio]):indeterminate ~ .box:after,
.ui.checkbox input:not([type=radio]):indeterminate ~ label:after {
  opacity: @checkboxCheckboxIndeterminateCheckOpacity;
  color: @checkboxCheckboxIndeterminateCheckColor;
}

/*--------------
  Active Focus
---------------*/

.ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:before,
.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:before,
.ui.checkbox input:checked:focus ~ .box:before,
.ui.checkbox input:checked:focus ~ label:before  {
  background: @checkboxCheckboxActiveFocusBackground;
  border-color: @checkboxCheckboxActiveFocusBorderColor;
}
.ui.checkbox input:not([type=radio]):indeterminate:focus ~ .box:after,
.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label:after,
.ui.checkbox input:checked:focus ~ .box:after,
.ui.checkbox input:checked:focus ~ label:after {
  color: @checkboxCheckboxActiveFocusCheckColor;
}


/*--------------
    Read-Only
---------------*/

.ui.read-only.checkbox,
.ui.read-only.checkbox label {
  cursor: default;
}


/*--------------
     Disabled
---------------*/

.ui.disabled.checkbox .box:after,
.ui.disabled.checkbox label,
.ui.checkbox input[disabled] ~ .box:after,
.ui.checkbox input[disabled] ~ label {
  cursor: default !important;
  opacity: @checkboxDisabledCheckboxOpacity;
  color: @checkboxDisabledCheckboxLabelColor;
}

/*--------------
     Hidden
---------------*/

/* Initialized checkbox moves input below element
 to prevent manually triggering */
.ui.checkbox input.hidden {
  z-index: -1;
}

/* Selectable Label */
.ui.checkbox input.hidden + label {
  cursor: pointer;
  user-select: none;
}


/*******************************
             Types
*******************************/


/*--------------
     Radio
---------------*/

.ui.radio.checkbox {
  min-height: @checkboxRadioSize;
}

.ui.radio.checkbox .box,
.ui.radio.checkbox label {
  padding-left: @checkboxRadioLabelDistance;
}

/* Box */
.ui.radio.checkbox .box:before,
.ui.radio.checkbox label:before {
  content: '';
  transform: none;

  width: @checkboxRadioSize;
  height: @checkboxRadioSize;
  border-radius: @circularRadius;
  top: @checkboxRadioTop;
  left: @checkboxRadioLeft;
}

/* Bullet */
.ui.radio.checkbox .box:after,
.ui.radio.checkbox label:after {
  border: none;
  content: '' !important;
  width: @checkboxRadioSize;
  height: @checkboxRadioSize;
  line-height: @checkboxRadioSize;
}

/* Radio Checkbox */
.ui.radio.checkbox .box:after,
.ui.radio.checkbox label:after {
  top: @checkboxBulletTop;
  left: @checkboxBulletLeft;
  width: @checkboxRadioSize;
  height: @checkboxRadioSize;
  border-radius: @checkboxBulletRadius;
  transform: scale(@checkboxBulletScale);
  background-color: @checkboxBulletColor;
}

/* Focus */
.ui.radio.checkbox input:focus ~ .box:before,
.ui.radio.checkbox input:focus ~ label:before {
  background-color: @checkboxRadioFocusBackground;
}
.ui.radio.checkbox input:focus ~ .box:after,
.ui.radio.checkbox input:focus ~ label:after {
  background-color: @checkboxRadioFocusBulletColor;
}

/* Indeterminate */
.ui.radio.checkbox input:indeterminate ~ .box:after,
.ui.radio.checkbox input:indeterminate ~ label:after {
  opacity: 0;
}

/* Active */
.ui.radio.checkbox input:checked ~ .box:before,
.ui.radio.checkbox input:checked ~ label:before {
  background-color: @checkboxRadioActiveBackground;
}
.ui.radio.checkbox input:checked ~ .box:after,
.ui.radio.checkbox input:checked ~ label:after {
  background-color: @checkboxRadioActiveBulletColor;
}

/* Active Focus */
.ui.radio.checkbox input:focus:checked ~ .box:before,
.ui.radio.checkbox input:focus:checked ~ label:before {
  background-color: @checkboxRadioActiveFocusBackground;
}
.ui.radio.checkbox input:focus:checked ~ .box:after,
.ui.radio.checkbox input:focus:checked ~ label:after {
  background-color: @checkboxRadioActiveFocusBulletColor;
}

/*--------------
     Slider
---------------*/

.ui.slider.checkbox {
  min-height: @checkboxSliderHeight;
}

/* Input */
.ui.slider.checkbox input {
  width: @checkboxSliderWidth;
  height: @checkboxSliderHeight;
}

/* Label */
.ui.slider.checkbox .box,
.ui.slider.checkbox label {
  padding-left: @checkboxSliderLabelDistance;
  line-height: @checkboxSliderLabelLineHeight;
  color: @checkboxSliderOffLabelColor;
}

/* Line */
.ui.slider.checkbox .box:before,
.ui.slider.checkbox label:before {
  display: block;
  position: absolute;
  content: '';
  transform: none;
  border: none !important;
  left: 0em;
  z-index: 1;

  top: @checkboxSliderLineVerticalOffset;

  background-color: @checkboxSliderLineColor;
  width: @checkboxSliderLineWidth;
  height: @checkboxSliderLineHeight;

  transform: none;
  border-radius: @checkboxSliderLineRadius;
  transition: @checkboxSliderLineTransition;

}

/* Handle */
.ui.slider.checkbox .box:after,
.ui.slider.checkbox label:after {
  background: @checkboxHandleBackground;
  position: absolute;
  content: '' !important;
  opacity: 1;
  z-index: 2;

  border: none;
  box-shadow: @handleBoxShadow;
  width: @checkboxSliderHandleSize;
  height: @checkboxSliderHandleSize;
  top: @checkboxSliderHandleOffset;
  left: 0em;
  transform: none;

  border-radius: @circularRadius;
  transition: @checkboxSliderHandleTransition;
}

/* Focus */
.ui.slider.checkbox input:focus ~ .box:before,
.ui.slider.checkbox input:focus ~ label:before {
  background-color: @checkboxToggleFocusColor;
  border: none;
}

/* Hover */
.ui.slider.checkbox .box:hover,
.ui.slider.checkbox label:hover {
  color: @checkboxSliderHoverLabelColor;
}
.ui.slider.checkbox .box:hover::before,
.ui.slider.checkbox label:hover::before {
  background: @checkboxSliderHoverLaneBackground;
}

/* Active */
.ui.slider.checkbox input:checked ~ .box,
.ui.slider.checkbox input:checked ~ label {
  color: @checkboxSliderOnLabelColor !important;
}
.ui.slider.checkbox input:checked ~ .box:before,
.ui.slider.checkbox input:checked ~ label:before {
  background-color: @checkboxSliderOnLineColor !important;
}
.ui.slider.checkbox input:checked ~ .box:after,
.ui.slider.checkbox input:checked ~ label:after {
  left: @checkboxSliderTravelDistance;
}

/* Active Focus */
.ui.slider.checkbox input:focus:checked ~ .box,
.ui.slider.checkbox input:focus:checked ~ label {
  color: @checkboxSliderOnFocusLabelColor !important;
}
.ui.slider.checkbox input:focus:checked ~ .box:before,
.ui.slider.checkbox input:focus:checked ~ label:before {
  background-color: @checkboxSliderOnFocusLineColor !important;
}


/*--------------
     Toggle
---------------*/

.ui.toggle.checkbox {
  min-height: @checkboxToggleHeight;
}

/* Input */
.ui.toggle.checkbox input {
  width: @checkboxToggleWidth;
  height: @checkboxToggleHeight;
}

/* Label */
.ui.toggle.checkbox .box,
.ui.toggle.checkbox label {
  min-height: @checkboxToggleHandleSize;
  padding-left: @checkboxToggleLabelDistance;
  color: @checkboxToggleOffLabelColor;
}
.ui.toggle.checkbox label {
  padding-top: @checkboxToggleLabelOffset;
}

/* Switch */
.ui.toggle.checkbox .box:before,
.ui.toggle.checkbox label:before {
  display: block;
  position: absolute;
  content: '';
  z-index: 1;
  transform: none;
  border: none;

  top: @checkboxToggleLaneVerticalOffset;

  background: @checkboxToggleLaneBackground;
  box-shadow: @checkboxToggleLaneBoxShadow;
  width: @checkboxToggleLaneWidth;
  height: @checkboxToggleLaneHeight;
  border-radius: @checkboxToggleHandleRadius;
}

/* Handle */
.ui.toggle.checkbox .box:after,
.ui.toggle.checkbox label:after {
  background: @checkboxHandleBackground;
  position: absolute;
  content: '' !important;
  opacity: 1;
  z-index: 2;

  border: none;
  box-shadow: @handleBoxShadow;
  width: @checkboxToggleHandleSize;
  height: @checkboxToggleHandleSize;
  top: @checkboxToggleHandleOffset;
  left: 0em;

  border-radius: @circularRadius;
  transition: @toggleHandleTransition;
}

.ui.toggle.checkbox input ~ .box:after,
.ui.toggle.checkbox input ~ label:after {
  left: @checkboxToggleOffOffset;
  box-shadow: @checkboxToggleOffHandleBoxShadow;
}

/* Focus */
.ui.toggle.checkbox input:focus ~ .box:before,
.ui.toggle.checkbox input:focus ~ label:before {
  background-color: @checkboxToggleFocusColor;
  border: none;
}

/* Hover */
.ui.toggle.checkbox .box:hover::before,
.ui.toggle.checkbox label:hover::before {
  background-color: @checkboxToggleHoverColor;
  border: none;
}

/* Active */
.ui.toggle.checkbox input:checked ~ .box,
.ui.toggle.checkbox input:checked ~ label {
  color: @checkboxToggleOnLabelColor !important;
}
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ label:before {
  background-color: @checkboxToggleOnLaneColor !important;
}
.ui.toggle.checkbox input:checked ~ .box:after,
.ui.toggle.checkbox input:checked ~ label:after {
  left: @checkboxToggleOnOffset;
  box-shadow: @checkboxToggleOnHandleBoxShadow;
}


/* Active Focus */
.ui.toggle.checkbox input:focus:checked ~ .box,
.ui.toggle.checkbox input:focus:checked ~ label {
  color: @checkboxToggleOnFocusLabelColor !important;
}
.ui.toggle.checkbox input:focus:checked ~ .box:before,
.ui.toggle.checkbox input:focus:checked ~ label:before {
  background-color: @checkboxToggleOnFocusLaneColor !important;
}

/*******************************
            Variations
*******************************/

/*--------------
     Fitted
---------------*/

.ui.fitted.checkbox .box,
.ui.fitted.checkbox label {
  padding-left: 0em !important;
}

.ui.fitted.toggle.checkbox,
.ui.fitted.toggle.checkbox {
  width: @checkboxToggleWidth;
}

.ui.fitted.slider.checkbox,
.ui.fitted.slider.checkbox {
  width: @checkboxSliderWidth;
}