/**
* @name Checkbox
* @description An element that can be turned on and off. This is most commonly rendered as a box when the element is off and a box with a check when the element is on. The user can switch the state of the check box by selecting it with the mouse or the keyboard. There are several ways to add styled checkboxes to your application, including a custom Angular directive and custom Formly templates. Choose the solution that works best for your application.
* @category controls
* @component checkbox
* @design collaboration-design
*/

@import '../settings/core';
@import '../settings/checkboxes';
@import '../settings/focus';
@import '../settings/form-controls';
@import '../tools/mixins/border-radius';
@import '../tools/mixins/checkbox';
@import '../tools/mixins/flex';
@import '../tools/mixins/input';
@import '../tools/mixins/spacing-responsive';
@import 'node_modules/@collabui/icons/scss/mixins';

@include exports('cui-checkbox') {
  .#{$checkbox__class}-group {
    @include vr-spacing(mb, 1.5);

    &:last-child {
      margin-bottom: 0;
    }
  }

  .#{$checkbox__class} {
    @include checkbox-color(
      $border-color: $input__border-color,
      $background-color: $input__background,
      $background-color--disabled: $form-control__background,
      $background-color--hover: $input__background--hover,
      $background-color--checked: $form-control__background--checked,
      $background-color--checked-hover: $form-control__background--checked-hover,
      $label-color: $form-control__label
    );

    .#{$checkbox__class}__input {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      border: 0;

      &:checked,
      &:indeterminate,
      &.indeterminate {
        + .#{$checkbox__class}__label {
          &:before {
            color: $form-control__content;
            cursor: pointer;
          }
        }
      }

      &:disabled,
      &.disabled {
        + .#{$checkbox__class}__label {
          cursor: default;
          opacity: $form-control__opacity--disabled;

          &:before {
            cursor: default;
          }
        }
      }

      &:indeterminate,
      &.indeterminate {
        + .#{$checkbox__class}__label {
          &:before {
            @include icon-minus_12;
          }
        }
      }
    }

    .#{$checkbox__class}__label {
      display: flex;
      line-height: $checkbox__size;
      cursor: pointer;

      &:before {
        @include flex();
        @include border-radius(4px);
        @include icon-check_12;

        flex-shrink: 0;
        width: $checkbox__size;
        height: $checkbox__size;
        margin-right: rem-calc(12);
        font-family: $icon-font-name;
        font-size: $checkbox__icon-size;
        font-style: normal;
        line-height: $checkbox__icon-size;
        color: transparent;
        border: none;
        transition: 300ms ease-in-out all;
      }
    }

    &.#{$prefix}-input-group {
      @include vr-spacing(mb, 0.5);

      display: flex;
      flex-direction: column;
    }

    .#{$checkbox__class}-horizontal {
      display: inline-block;
      margin-right: 20px;
    }

    .form-horizontal .#{$checkbox__class}-horizontal {
      padding-top: 6px;
    }

    .#{$checkbox__class}-help {
      .#{$prefix}-input__help-text {
        @include input__help-text();
      }

      @include vr-spacing(pl, 2);
    }
  }
  /** Dark */
  .#{$dark-class} {
    .#{$checkbox__class} {
      @include checkbox-color(
        $border-color: $input__border-color--dark,
        $background-color: $input__background,
        $background-color--disabled: $form-control__background--dark,
        $background-color--hover: $input__background--hover--dark,
        $background-color--checked: $form-control__background--checked--dark,
        $background-color--checked-hover: $form-control__background--checked-hover--dark,
        $label-color: $form-control__label--dark
      );
    }
  }
  /** Filled */
  .#{$input__class--filled},
  .#{$client-class} {
    .#{$checkbox__class} {
      @include checkbox-color(
        $border-color: $input__border-color--filled,
        $background-color: $form-control__background,
        $background-color--disabled: $form-control__background,
        $background-color--hover: $form-control__background--hover,
        $background-color--checked: $form-control__background--checked,
        $background-color--checked-hover: $form-control__background--checked-hover,
        $label-color: $form-control__label
      );
    }
  }
  /** Filled - Dark */
  .#{$client-class}.#{$dark-class},
  .#{$client-class} .#{$dark-class},
  .#{$dark-class} .#{$input__class--filled},
  .#{$dark-class}.#{$input__class--filled} {
    .#{$checkbox__class} {
      @include checkbox-color(
        $border-color: $input__border-color--filled,
        $background-color: $form-control__background--dark,
        $background-color--disabled: $form-control__background--dark,
        $background-color--hover: $form-control__background--hover--dark,
        $background-color--checked: $form-control__background--checked--dark,
        $background-color--checked-hover: $form-control__background--checked-hover--dark,
        $label-color: $form-control__label--dark
      );
    }
  }
}

/**
* @name Checkbox States
*
* @category controls
* @component checkbox
* @section states
* @hidecode true
*
* @html
  <div class="checkbox-states medium-4 columns">
    <h3>Light</h3>
    <h5><code>.cui-checkbox</code></h5>
    <div class="checkbox-states">
      <div class="disabled-unchecked-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input" disabled>
          <label class="cui-checkbox__label">
            <span>Disabled & Unchecked</span>
          </label>
        </div>
      </div>
      <div class="unchecked-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input">
          <label class="cui-checkbox__label">
            <span>Unchecked</span>
          </label>
        </div>
      </div>
      <div class="hover-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input">
          <label class="cui-checkbox__label hover">
            <span>Hover Unchecked</span>
          </label>
        </div>
      </div>
      <div class="focus-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input focus">
          <label class="cui-checkbox__label">
            <span>Focus Unchecked</span>
          </label>
        </div>
      </div>
      <div class="disabled-checked-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input" disabled checked>
          <label class="cui-checkbox__label">
            <span>Disabled & Checked</span>
          </label>
        </div>
      </div>
      <div class="checked-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input" checked>
          <label class="cui-checkbox__label">
            <span>Checked</span>
          </label>
        </div>
      </div>
      <div class="checked-hover-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input" checked>
          <label class="cui-checkbox__label hover">
            <span>Hover Checked</span>
          </label>
        </div>
      </div>
      <div class="checked-focus-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input focus" checked>
          <label class="cui-checkbox__label">
            <span>Focus Checked</span>
          </label>
        </div>
      </div>
      <div class="disabled-indeterminate-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input indeterminate" disabled indeterminate>
          <label class="cui-checkbox__label">
            <span>Disabled & Indeterminate</span>
          </label>
        </div>
      </div>
      <div class="indeterminate-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input indeterminate" indeterminate>
          <label class="cui-checkbox__label">
            <span>Indeterminate</span>
          </label>
        </div>
      </div>
      <div class="indeterminate-hover-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input indeterminate" indeterminate>
          <label class="cui-checkbox__label hover">
            <span>Indeterminate Hover</span>
          </label>
        </div>
      </div>
      <div class="indeterminate-focus-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input focus indeterminate" indeterminate>
          <label class="cui-checkbox__label">
            <span>Indeterminate Focus</span>
          </label>
        </div>
      </div>
    </div>
  </div>
  <div class="checkbox-states medium-4 end columns cui--dark" style="background-color: #333333;">
    <h3 style="color: white;">Dark</h3>
    <h5><code style="color: white; line-break">.cui--dark</code></h5>
    <div class="disabled-unchecked-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input" disabled>
        <label class="cui-checkbox__label">
          <span>Disabled & Unchecked</span>
        </label>
      </div>
    </div>
    <div class="unchecked-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input">
        <label class="cui-checkbox__label">
          <span>Unchecked</span>
        </label>
      </div>
    </div>
    <div class="hover-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input">
        <label class="cui-checkbox__label hover">
          <span>Hover Unchecked</span>
        </label>
      </div>
    </div>
    <div class="focus-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input focus">
        <label class="cui-checkbox__label">
          <span>Focus Unchecked</span>
        </label>
      </div>
    </div>
    <div class="disabled-checked-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input" disabled checked>
        <label class="cui-checkbox__label">
          <span>Disabled & Checked</span>
        </label>
      </div>
    </div>
    <div class="checked-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input" checked>
        <label class="cui-checkbox__label">
          <span>Checked</span>
        </label>
      </div>
    </div>
    <div class="checked-hover-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input" checked>
        <label class="cui-checkbox__label hover">
          <span>Hover Checked</span>
        </label>
      </div>
    </div>
    <div class="checked-focus-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input focus" checked>
        <label class="cui-checkbox__label">
          <span>Focus Checked</span>
        </label>
      </div>
    </div>
    <div class="disabled-indeterminate-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input indeterminate" disabled indeterminate>
        <label class="cui-checkbox__label">
          <span>Disabled & Indeterminate</span>
        </label>
      </div>
    </div>
    <div class="indeterminate-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input indeterminate" indeterminate>
        <label class="cui-checkbox__label">
          <span>Indeterminate</span>
        </label>
      </div>
    </div>
    <div class="indeterminate-hover-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input indeterminate" indeterminate>
        <label class="cui-checkbox__label hover">
          <span>Indeterminate Hover</span>
        </label>
      </div>
    </div>
    <div class="indeterminate-focus-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input focus indeterminate" indeterminate>
        <label class="cui-checkbox__label">
          <span>Indeterminate Focus</span>
        </label>
      </div>
    </div>
  </div>

*/

/**
* @name Filled Checkbox States
*
* @category controls
* @component checkbox
* @section filled-states
* @hidecode true
*
* @html
  <div class="checkbox-states medium-4 columns cui--client">
    <h3>Light</h3>
    <h5><code>.cui-checkbox<br> .cui-input--filled</code></h5>
    <div class="checkbox-states">
      <div class="disabled-unchecked-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input" disabled>
          <label class="cui-checkbox__label">
            <span>Disabled & Unchecked</span>
          </label>
        </div>
      </div>
      <div class="unchecked-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input">
          <label class="cui-checkbox__label">
            <span>Unchecked</span>
          </label>
        </div>
      </div>
      <div class="hover-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input">
          <label class="cui-checkbox__label hover">
            <span>Hover Unchecked</span>
          </label>
        </div>
      </div>
      <div class="focus-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input focus">
          <label class="cui-checkbox__label">
            <span>Focus Unchecked</span>
          </label>
        </div>
      </div>
      <div class="disabled-checked-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input" disabled checked>
          <label class="cui-checkbox__label">
            <span>Disabled & Checked</span>
          </label>
        </div>
      </div>
      <div class="checked-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input" checked>
          <label class="cui-checkbox__label">
            <span>Checked</span>
          </label>
        </div>
      </div>
      <div class="checked-hover-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input" checked>
          <label class="cui-checkbox__label hover">
            <span>Hover Checked</span>
          </label>
        </div>
      </div>
      <div class="checked-focus-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input focus" checked>
          <label class="cui-checkbox__label">
            <span>Focus Checked</span>
          </label>
        </div>
      </div>
      <div class="disabled-indeterminate-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input indeterminate" disabled indeterminate>
          <label class="cui-checkbox__label">
            <span>Disabled & Indeterminate</span>
          </label>
        </div>
      </div>
      <div class="indeterminate-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input indeterminate" indeterminate>
          <label class="cui-checkbox__label">
            <span>Indeterminate</span>
          </label>
        </div>
      </div>
      <div class="indeterminate-hover-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input indeterminate" indeterminate>
          <label class="cui-checkbox__label hover">
            <span>Indeterminate Hover</span>
          </label>
        </div>
      </div>
      <div class="indeterminate-focus-state">
        <div class="cui-input-group cui-checkbox">
          <input type="checkbox" class="cui-input cui-checkbox__input focus indeterminate" indeterminate>
          <label class="cui-checkbox__label">
            <span>Indeterminate Focus</span>
          </label>
        </div>
      </div>
    </div>
  </div>
  <div class="checkbox-states medium-4 end columns cui--dark cui--client" style="background-color: #333333;">
    <h3 style="color: white;">Dark</h3>
    <h5><code style="color: white; line-break">.cui--dark <br> .cui-input--filled</code></h5>
    <div class="disabled-unchecked-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input" disabled>
        <label class="cui-checkbox__label">
          <span>Disabled & Unchecked</span>
        </label>
      </div>
    </div>
    <div class="unchecked-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input">
        <label class="cui-checkbox__label">
          <span>Unchecked</span>
        </label>
      </div>
    </div>
    <div class="hover-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input">
        <label class="cui-checkbox__label hover">
          <span>Hover Unchecked</span>
        </label>
      </div>
    </div>
    <div class="focus-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input focus">
        <label class="cui-checkbox__label">
          <span>Focus Unchecked</span>
        </label>
      </div>
    </div>
    <div class="disabled-checked-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input" disabled checked>
        <label class="cui-checkbox__label">
          <span>Disabled & Checked</span>
        </label>
      </div>
    </div>
    <div class="checked-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input" checked>
        <label class="cui-checkbox__label">
          <span>Checked</span>
        </label>
      </div>
    </div>
    <div class="checked-hover-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input" checked>
        <label class="cui-checkbox__label hover">
          <span>Hover Checked</span>
        </label>
      </div>
    </div>
    <div class="checked-focus-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input focus" checked>
        <label class="cui-checkbox__label">
          <span>Focus Checked</span>
        </label>
      </div>
    </div>
    <div class="disabled-indeterminate-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input indeterminate" disabled indeterminate>
        <label class="cui-checkbox__label">
          <span>Disabled & Indeterminate</span>
        </label>
      </div>
    </div>
    <div class="indeterminate-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input indeterminate" indeterminate>
        <label class="cui-checkbox__label">
          <span>Indeterminate</span>
        </label>
      </div>
    </div>
    <div class="indeterminate-hover-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input indeterminate" indeterminate>
        <label class="cui-checkbox__label hover">
          <span>Indeterminate Hover</span>
        </label>
      </div>
    </div>
    <div class="indeterminate-focus-state">
      <div class="cui-input-group cui-checkbox">
        <input type="checkbox" class="cui-input cui-checkbox__input focus indeterminate" indeterminate>
        <label class="cui-checkbox__label">
          <span>Indeterminate Focus</span>
        </label>
      </div>
    </div>
  </div>
*/

/**
* @component checkbox
* @section default
*
* @html
 <div class="cui-input-group cui-checkbox">
   <input id="basic-checkbox" type="checkbox" class="cui-input cui-checkbox__input">
   <label class="cui-checkbox__label" for="basic-checkbox">
     <span>Basic Checkbox</span>
   </label>
 </div>
*/

/**
* @component checkbox
* @section disabled
*
* @html
 <div class="cui-input-group cui-checkbox">
   <input id="disabled-checkbox" type="checkbox" class="cui-input cui-checkbox__input" disabled>
   <label class="cui-checkbox__label" for="disabled-checkbox">
     <span>Disabled Checkbox</span>
   </label>
 </div>
*/

/**
* @component checkbox
* @section checked
*
* @html
 <div class="cui-input-group cui-checkbox">
   <input id="checked-checkbox" type="checkbox" class="cui-input cui-checkbox__input" checked>
   <label class="cui-checkbox__label" for="checked-checkbox">
     <span>Checked Checkbox</span>
   </label>
 </div>
*/

/**
* @component checkbox
* @section indeterminate
*
* @html
 <div class="cui-input-group cui-checkbox">
   <input id="indeterminate-checkbox" type="checkbox" class="cui-input cui-checkbox__input indeterminate">
   <label class="cui-checkbox__label" for="indeterminate-checkbox">
     <span>Indeterminate Checkbox</span>
   </label>
 </div>
*/

/**
* @component checkbox
* @section nested
*
* @html
  <form name="nestedCheckboxForm">
    <div class="cui-input-group cui-checkbox">
      <input
        class="cui-input cui-checkbox__input"
        type="checkbox"
        id="checkbox-parent"
        name="checkbox-parent" />
      <label class="cui-checkbox__label" for="checkbox-parent">
        Parent Checkbox Example
      </label>
    </div>
    <div class="cui-input-group cui-checkbox cui-input--nested-1">
      <input
        class="cui-input cui-checkbox__input"
        type="checkbox"
        id="checkboxNested1"
        name="checkboxNested1" />
      <label class="cui-checkbox__label" for="checkboxNested1">
        Child Checkbox Nested 1 Level
      </label>
    </div>
    <div class="cui-input-group cui-checkbox cui-input--nested-2">
      <input
        class="cui-input cui-checkbox__input"
        type="checkbox"
        id="checkboxNested2"
        name="checkboxNested2" />
      <label class="cui-checkbox__label" for="checkboxNested2">
        Child Checkbox Nested 2 Levels
      </label>
    </div>
    <div class="cui-input-group cui-checkbox cui-input--nested-3">
      <input
        class="cui-input cui-checkbox__input"
        type="checkbox"
        id="checkboxNested3"
        name="checkboxNested3" />
      <label class="cui-checkbox__label" for="checkboxNested3">
        Child Checkbox Nested 3 Levels
      </label>
    </div>
  </form>
*/