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

@checkboxCheckboxSize: 17px;
@checkboxCheckboxColor: @textColor;
@checkboxCheckboxLineHeight: @checkboxCheckboxSize;


/* Label */
@checkboxLabelDistance: 1.85714em; /* 26px @ 14/em */

/* Checkbox */
@checkboxCheckboxBackground: @white;
@checkboxCheckboxBorder: 1px solid @solidBorderColor;
@checkboxCheckboxBorderRadius: @3px;
@checkboxTransition:
  border @defaultDuration @defaultEasing,
  opacity @defaultDuration @defaultEasing,
  transform @defaultDuration @defaultEasing,
  box-shadow @defaultDuration @defaultEasing
;

/* Checkmark */
@checkboxCheckboxCheckFontSize: 14px;
@checkboxCheckboxCheckTop: 0px;
@checkboxCheckboxCheckLeft: 0px;
@checkboxCheckboxCheckSize: @checkboxCheckboxSize;

/* Label */
@checkboxLabelFontSize: @relativeMedium;
@checkboxLabelColor: @textColor;
@checkboxLabelTransition: color @defaultDuration @defaultEasing;

/*-------------------
        States
--------------------*/

/* Hover */
@checkboxCheckboxHoverBackground: @checkboxCheckboxBackground;
@checkboxCheckboxHoverBorderColor: @selectedBorderColor;
@checkboxLabelHoverColor: @hoveredTextColor;

/* Pressed */
@checkboxCheckboxPressedBackground: @offWhite;
@checkboxCheckboxPressedBorderColor: @selectedBorderColor;
@checkboxCheckboxPressedColor: @selectedTextColor;
@checkboxLabelPressedColor: @selectedTextColor;

/* Focus */
@checkboxCheckboxFocusBackground: @white;
@checkboxCheckboxFocusBorderColor: @focusedFormMutedBorderColor;
@checkboxCheckboxFocusCheckColor: @selectedTextColor;
@checkboxLabelFocusColor: @selectedTextColor;

/* Active */
@checkboxLabelActiveColor: @selectedTextColor;
@checkboxCheckboxActiveBackground: @white;
@checkboxCheckboxActiveBorderColor: @selectedBorderColor;
@checkboxCheckboxActiveCheckColor: @selectedTextColor;
@checkboxCheckboxActiveCheckOpacity: 1;

/* Active Focus */
@checkboxCheckboxActiveFocusBackground: @white;
@checkboxCheckboxActiveFocusBorderColor: @checkboxCheckboxFocusBorderColor;
@checkboxCheckboxActiveFocusCheckColor: @selectedTextColor;

/* Indeterminate */
@checkboxCheckboxIndeterminateBackground: @checkboxCheckboxActiveBackground;
@checkboxCheckboxIndeterminateBorderColor: @checkboxCheckboxActiveBorderColor;
@checkboxCheckboxIndeterminateCheckOpacity: 1;
@checkboxCheckboxIndeterminateCheckColor: @checkboxCheckboxActiveCheckColor;

/* Disabled */
@checkboxDisabledCheckboxOpacity: 0.5;
@checkboxDisabledCheckboxLabelColor: rgba(0, 0, 0, 1);

/*-------------------
        Types
--------------------*/

/* Radio */
/* Uses px to avoid rounding issues with circles */

@checkboxRadioSize: 15px;
@checkboxRadioTop: 1px;
@checkboxRadioLeft: 0px;
@checkboxRadioLabelDistance: @checkboxLabelDistance;

@checkboxBulletTop: 1px;
@checkboxBulletLeft: 0px;
@checkboxBulletScale: (7 / 15); /* 7px as unitless value from radio size */
@checkboxBulletColor: @textColor;
@checkboxBulletRadius: @circularRadius;

@checkboxRadioFocusBackground: @checkboxCheckboxFocusBackground;
@checkboxRadioFocusBulletColor: @checkboxCheckboxFocusCheckColor;

@checkboxRadioActiveBackground: @checkboxCheckboxActiveBackground;
@checkboxRadioActiveBulletColor: @checkboxCheckboxActiveCheckColor;

@checkboxRadioActiveFocusBackground: @checkboxCheckboxActiveFocusBackground;
@checkboxRadioActiveFocusBulletColor: @checkboxCheckboxActiveFocusCheckColor;

/* Slider & Toggle Handle */
@checkboxHandleBackground: @white @subtleGradient;
@handleBoxShadow:
  @subtleShadow,
  0px 0px 0px 1px @borderColor inset
;

/* Slider */
@checkboxSliderHandleSize: 1.5rem;
@checkboxSliderLineWidth: 3.5rem;
@checkboxSliderTransitionDuration: 0.3s;

@checkboxSliderHandleOffset: (1rem - @checkboxSliderHandleSize) / 2;
@checkboxSliderHandleTransition: left @checkboxSliderTransitionDuration @defaultEasing;

@checkboxSliderWidth: @checkboxSliderLineWidth;
@checkboxSliderHeight: (@checkboxSliderHandleSize + @checkboxSliderHandleOffset);

@checkboxSliderLineHeight: @3px;
@checkboxSliderLineVerticalOffset: 0.4rem;
@checkboxSliderLineColor: @transparentBlack;
@checkboxSliderLineRadius: @circularRadius;
@checkboxSliderLineTransition: background @checkboxSliderTransitionDuration @defaultEasing;

@checkboxSliderTravelDistance: @checkboxSliderLineWidth - @checkboxSliderHandleSize;

@checkboxSliderLabelDistance: @checkboxSliderLineWidth + 1rem;
@checkboxSliderOffLabelColor: @unselectedTextColor;

@checkboxSliderLabelLineHeight: 1rem;

/* Slider States */
@checkboxSliderHoverLaneBackground: @veryStrongTransparentBlack;
@checkboxSliderHoverLabelColor: @hoveredTextColor;

@checkboxSliderOnLineColor: @lightBlack;
@checkboxSliderOnLabelColor: @selectedTextColor;

@checkboxSliderOnFocusLineColor: @lightBlackFocus;
@checkboxSliderOnFocusLabelColor: @checkboxSliderOnLabelColor;



/* Toggle */
@checkboxToggleLaneWidth: 3.5rem;
@checkboxToggleHandleSize: 1.5rem;
@checkboxToggleTransitionDuration: 0.2s;

@checkboxToggleWidth: @checkboxToggleLaneWidth;
@checkboxToggleHeight: @checkboxToggleHandleSize;

@checkboxToggleHandleRadius: @circularRadius;
@checkboxToggleHandleOffset: 0rem;
@toggleHandleTransition:
  background @checkboxSliderTransitionDuration @defaultEasing,
  left @checkboxSliderTransitionDuration @defaultEasing
;

@checkboxToggleLaneBackground: @transparentBlack;
@checkboxToggleLaneHeight: @checkboxToggleHandleSize;
@checkboxToggleLaneBoxShadow: none;
@checkboxToggleLaneVerticalOffset: 0rem;
@checkboxToggleOffOffset: -0.05rem;
@checkboxToggleOnOffset: (@checkboxToggleLaneWidth - @checkboxToggleHandleSize) + 0.15rem;

@checkboxToggleLabelDistance: @checkboxToggleLaneWidth + 1rem;
@checkboxToggleLabelLineHeight: 1.5rem;
@checkboxToggleLabelOffset: 0.15em;


@checkboxToggleFocusColor: @veryStrongTransparentBlack;
@checkboxToggleHoverColor: @checkboxToggleFocusColor;

@checkboxToggleOffLabelColor: @checkboxCheckboxColor;
@checkboxToggleOffHandleBoxShadow: @handleBoxShadow;

@checkboxToggleOnLabelColor: @selectedTextColor;
@checkboxToggleOnLaneColor: @primaryColor;

@checkboxToggleOnHandleBoxShadow: @handleBoxShadow;

@checkboxToggleOnFocusLaneColor: @primaryColorFocus;
@checkboxToggleOnFocusLabelColor: @checkboxToggleOnLabelColor;



/*-------------------
      Variations
--------------------*/