/**
 * @class Ext.grid.column.Check
 */

/**
 * @var {color}
 * Check Column text color
 */
$checkcolumn-color: dynamic(null);

/**
 * @var {color}
 * Check Column background-color
 */
$checkcolumn-background-color: dynamic(null);

/**
 * @var {color}
 * Check Column background-color when hovered
 */
$checkcolumn-hovered-background-color: dynamic(null);

/**
 * @var {color}
 * Check Column background-color when sorted
 */
$checkcolumn-sorted-background-color: dynamic(null);

/**
 * @var {number/list}
 * Check Column border-width
 */
$checkcolumn-border-width: dynamic(null);

/**
 * @var {string/list}
 * Check Column border-style
 */
$checkcolumn-border-style: dynamic(null);

/**
 * @var {color}
 * Check Column border-color
 */
$checkcolumn-border-color: dynamic(null);

/**
 * @var {string/number}
 * Check Column font-weight
 */
$checkcolumn-font-weight: dynamic(null);

/**
 * @var {number}
 * Check Column font-size
 */
$checkcolumn-font-size: dynamic(null);

/**
 * @var {number}
 * Check Column font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$checkcolumn-font-size-big: dynamic(null);

/**
 * @var {number}
 * Check Column line-height
 */
$checkcolumn-line-height: dynamic(null);

/**
 * @var {number}
 * Check Column line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$checkcolumn-line-height-big: dynamic(null);

/**
 * @var {string}
 * Check Column font-family
 */
$checkcolumn-font-family: dynamic(null);

/**
 * @var {number/list}
 * Check Column padding
 */
$checkcolumn-padding: dynamic(null);

/**
 * @var {number/list}
 * Check Column padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$checkcolumn-padding-big: dynamic(null);

/**
 * @var {number}
 * Check Column sort icon margin
 */
$checkcolumn-sort-icon-margin: dynamic(null);

/**
 * @var {number}
 * Check Column sort icon margin in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$checkcolumn-sort-icon-margin-big: dynamic(null);

/**
 * @var {number}
 * Check Column sort icon size
 */
$checkcolumn-sort-icon-size: dynamic(null);

/**
 * @var {number}
 * Check Column sort icon size in the {@link global_css#$enable-big big} sizing scheme
 */
$checkcolumn-sort-icon-size-big: dynamic(null);

/**
 * @var {number}
 * Check Column sort icon font-size
 */
$checkcolumn-sort-icon-font-size: dynamic(null);

/**
 * @var {number}
 * Check Column sort icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$checkcolumn-sort-icon-font-size-big: dynamic(null);

/**
 * @var {color}
 * Check Column sort icon color
 */
$checkcolumn-sort-icon-color: dynamic(null);

/**
 * @var {string/list}
 * Check Column sort ascending icon
 */
$checkcolumn-sort-asc-icon: dynamic(null);

/**
 * @var {string/list}
 * Check Column sort descending icon
 */
$checkcolumn-sort-desc-icon: dynamic(null);

/**
 * @var {number}
 * Check Column trigger width
 */
$checkcolumn-trigger-width: dynamic(null);

/**
 * @var {number}
 * Check Column trigger width in the {@link global_css#$enable-big big} sizing scheme
 */
$checkcolumn-trigger-width-big: dynamic(null);

/**
 * @var {color}
 * Check Column trigger background-color
 */
$checkcolumn-trigger-background-color: dynamic(null);

/**
 * @var {number/list}
 * Check Column trigger border-width
 */
$checkcolumn-trigger-border-width: dynamic(null);

/**
 * @var {string}
 * Check Column trigger border-style
 */
$checkcolumn-trigger-border-style: dynamic(null);

/**
 * @var {color}
 * Check Column trigger border-color
 */
$checkcolumn-trigger-border-color: dynamic(null);

/**
 * @var {string/list}
 * Check Column trigger icon
 */
$checkcolumn-trigger-icon: dynamic(null);

/**
 * @var {color}
 * Check Column trigger icon color
 */
$checkcolumn-trigger-icon-color: dynamic(null);

/**
 * @var {number}
 * Check Column trigger icon font size
 */
$checkcolumn-trigger-icon-font-size: dynamic(null);

/**
 * @var {number}
 * Check Column trigger icon font size in the {@link global_css#$enable-big big} sizing scheme
 */
$checkcolumn-trigger-icon-font-size-big: dynamic(null);

/**
 * @var {color}
 * Check Column resizer width
 */
$checkcolumn-resizer-width: dynamic(null);

/**
 * @var {color}
 * Check Column resizer background-color
 */
$checkcolumn-resizer-background-color: dynamic(null);

/**
 * @var {number}
 * Check Column checkbox size
 */
$checkcolumn-checkbox-size: dynamic($checkboxfield-checkbox-size);

/**
 * @var {number}
 * Check Column checkbox size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$checkcolumn-checkbox-size-big: dynamic($checkboxfield-checkbox-size-big);

/**
 * @var {number}
 * Check Column checkbox font-size
 */
$checkcolumn-checkbox-font-size: dynamic($checkboxfield-checkbox-font-size);

/**
 * @var {number}
 * Check Column checkbox font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$checkcolumn-checkbox-font-size-big: dynamic($checkboxfield-checkbox-font-size-big);

/**
 * @var {string/list}
 * Check Column checkbox icon
 */
$checkcolumn-checkbox-icon: dynamic($checkboxfield-checkbox-icon);

/**
 * @var {string/list}
 * Check Column checkbox icon when checked
 */
$checkcolumn-checked-checkbox-icon: dynamic($checkboxfield-checked-checkbox-icon);

/**
 * @var {color}
 * Check Column checkbox color
 */
$checkcolumn-checkbox-color: dynamic($checkboxfield-checkbox-color);

/**
 * @var {color}
 * Check Column checkbox color when checked
 */
$checkcolumn-checked-checkbox-color: dynamic($checkboxfield-checked-checkbox-color);

/**
 * @var {color}
 * Check Column checkbox opacity when disabled
 */
$checkcolumn-disabled-checkbox-opacity: dynamic($field-disabled-opacity);

/**
 * @var {color}
 * Check Column checkbox color when disabled
 */
$checkcolumn-disabled-checkbox-color: dynamic($checkboxfield-disabled-checkbox-color);

/**
 * @var {color}
 * Check Column checkbox color when focused
 */
$checkcolumn-focused-checkbox-color: dynamic($checkboxfield-focused-checkbox-color);

/**
 * @var {number}
 * Space between the Check Column checkbox and text when vertically aligned
 */
$checkcolumn-checkbox-vertical-spacing: dynamic(2px);

/**
 * @var {number}
 * Space between the Check Column checkbox and text when vertically aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$checkcolumn-checkbox-vertical-spacing-big: dynamic(3px);

/**
 * @var {number}
 * Space between the Check Column checkbox and text when horizontally aligned
 */
$checkcolumn-checkbox-horizontal-spacing: dynamic(4px);

/**
 * @var {number}
 * Space between the Check Column checkbox and text when horizontally aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$checkcolumn-checkbox-horizontal-spacing-big: dynamic(6px);

/**
 * Creates a visual theme for a grid column.
 *
 * @param {string} $ui
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 * @param {String} [$xtype=checkcolumn] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {color} $color
 * Check Column text color
 *
 * @param {color} $background-color
 * Check Column background-color
 *
 * @param {color} $hovered-background-color
 * Check Column background-color when hovered
 *
 * @param {color} $sorted-background-color
 * Check Column background-color when sorted
 *
 * @param {number/list} $border-width
 * Check Column border-width
 *
 * @param {string/list} $border-style
 * Check Column border-style
 *
 * @param {color} $border-color
 * Check Column border-color
 *
 * @param {string/number} $font-weight
 * Check Column font-weight
 *
 * @param {number} $font-size
 * Check Column font-size
 *
 * @param {number} $font-size-big
 * Check Column font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $line-height
 * Check Column line-height
 *
 * @param {number} $line-height-big
 * Check Column line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $font-family
 * Check Column font-family
 *
 * @param {number/list} $padding
 * Check Column padding
 *
 * @param {number/list} $padding-big
 * Check Column padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $sort-icon-margin
 * Check Column sort icon margin
 *
 * @param {number} $sort-icon-margin-big
 * Check Column sort icon margin in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $sort-icon-size
 * Check Column sort icon size
 *
 * @param {number} $sort-icon-size-big
 * Check Column sort icon size in the {@link global_css#$enable-big big} sizing scheme
 *
 * @param {number} $sort-icon-font-size
 * Check Column sort icon font-size
 *
 * @param {number} $sort-icon-font-size-big
 * Check Column sort icon font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $sort-icon-color
 * Check Column sort icon color
 *
 * @param {string/list} $sort-asc-icon
 * Check Column sort ascending icon
 *
 * @param {string/list} $sort-desc-icon
 * Check Column sort descending icon
 *
 * @param {number} $trigger-width
 * Check Column trigger width
 *
 * @param {number} $trigger-width-big
 * Check Column trigger width in the {@link global_css#$enable-big big} sizing scheme
 *
 * @param {color} $trigger-background-color
 * Check Column trigger background-color
 *
 * @param {number/list} $trigger-border-width
 * Check Column trigger border-width
 *
 * @param {string} $trigger-border-style
 * Check Column trigger border-style
 *
 * @param {color} $trigger-border-color
 * Check Column trigger border-color
 *
 * @param {string/list} $trigger-icon
 * Check Column trigger icon
 *
 * @param {color} $trigger-icon-color
 * Check Column trigger icon color
 *
 * @param {number} $trigger-icon-font-size
 * Check Column trigger icon font size
 *
 * @param {number} $trigger-icon-font-size-big
 * Check Column trigger icon font size in the {@link global_css#$enable-big big} sizing scheme
 *
 * @param {color} $resizer-width
 * Check Column resizer width
 *
 * @param {color} $resizer-background-color
 * Check Column resizer background-color
 *
 * @param {number} $checkbox-size
 * Check Column checkbox size
 *
 * @param {number} $checkbox-size-big
 * Check Column checkbox size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $checkbox-font-size
 * Check Column checkbox font-size
 *
 * @param {number} $checkbox-font-size-big
 * Check Column checkbox font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string/list} $checkbox-icon
 * Check Column checkbox icon
 *
 * @param {string/list} $checked-checkbox-icon
 * Check Column checkbox icon when checked
 *
 * @param {color} $checkbox-color
 * Check Column checkbox color
 *
 * @param {color} $checked-checkbox-color
 * Check Column checkbox color when checked
 *
 * @param {color} $disabled-checkbox-opacity
 * Check Column checkbox opacity when disabled
 *
 * @param {color} $disabled-checkbox-color
 * Check Column checkbox color when disabled
 *
 * @param {color} $focused-checkbox-color
 * Check Column checkbox color when focused
 *
 * @param {number} $checkbox-vertical-spacing
 * Space between the Check Column checkbox and text when vertically aligned
 *
 * @param {number} $checkbox-vertical-spacing-big
 * Space between the Check Column checkbox and text when vertically aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $checkbox-horizontal-spacing
 * Space between the Check Column checkbox and text when horizontally aligned
 *
 * @param {number} $checkbox-horizontal-spacing-big
 * Space between the Check Column checkbox and text when horizontally aligned
 * in the {@link Global_CSS#$enable-big big} sizing scheme
 */
@mixin checkcolumn-ui(
    $ui: null,
    $xtype: checkcolumn,
    $color: null,
    $background-color: null,
    $hovered-background-color: null,
    $sorted-background-color: null,
    $border-width: null,
    $border-style: null,
    $border-color: null,
    $font-weight: null,
    $font-size: null,
    $font-size-big: null,
    $line-height: null,
    $line-height-big: null,
    $font-family: null,
    $padding: null,
    $padding-big: null,
    $sort-icon-margin: null,
    $sort-icon-margin-big: null,
    $sort-icon-size: null,
    $sort-icon-size-big: null,
    $sort-icon-font-size: null,
    $sort-icon-font-size-big: null,
    $sort-icon-color: null,
    $sort-asc-icon: null,
    $sort-desc-icon: null,
    $trigger-width: null,
    $trigger-width-big: null,
    $trigger-background-color: null,
    $trigger-border-width: null,
    $trigger-border-style: null,
    $trigger-border-color: null,
    $trigger-icon: null,
    $trigger-icon-color: null,
    $trigger-icon-font-size: null,
    $trigger-icon-font-size-big: null,
    $resizer-width: null,
    $resizer-background-color: null,
    $checkbox-size: null,
    $checkbox-size-big: null,
    $checkbox-font-size: null,
    $checkbox-font-size-big: null,
    $checkbox-icon: null,
    $checked-checkbox-icon: null,
    $checkbox-color: null,
    $checked-checkbox-color: null,
    $disabled-checkbox-opacity: null,
    $disabled-checkbox-color: null,
    $focused-checkbox-color: null,
    $checkbox-vertical-spacing: null,
    $checkbox-vertical-spacing-big: null,
    $checkbox-horizontal-spacing: null,
    $checkbox-horizontal-spacing-big: null
) {
    $ui-suffix: ui-suffix($ui);

    $arguments: intersect-arguments(checkcolumn-ui, gridcolumn-ui);

    @include gridcolumn-ui($arguments...);

    .#{$prefix}#{$xtype}#{$ui-suffix} {
        .#{$prefix}checkbox-el {
            @include icon(
                $icon: $checkbox-icon,
                $color: $checkbox-color,
                $size: $checkbox-size,
                $size-big: $checkbox-size-big,
                $font-size: $checkbox-font-size,
                $font-size-big: $checkbox-font-size-big
            );
        }

        &.#{$prefix}checked .#{$prefix}checkbox-el {
            color: $checked-checkbox-color;
            @include icon($checked-checkbox-icon);
        }

        &.#{$prefix}disabled .#{$prefix}checkbox-el {
            color: $disabled-checkbox-color;
            opacity: $disabled-checkbox-opacity;
        }

        .#{$prefix}checkbox-el:focus {
            color: $focused-checkbox-color;
        }

        &.#{$prefix}checkbox-align-top .#{$prefix}title-el {
            margin-top: $checkbox-vertical-spacing;

            @if $enable-big {
                .#{$prefix}big & {
                    margin-top: $checkbox-vertical-spacing-big;
                }
            }
        }

        &.#{$prefix}checkbox-align-right .#{$prefix}title-el {
            margin-right: $checkbox-horizontal-spacing;

            @if $enable-big {
                .#{$prefix}big & {
                    margin-right: $checkbox-horizontal-spacing-big;
                }
            }
        }

        &.#{$prefix}checkbox-align-bottom .#{$prefix}title-el {
            margin-bottom: $checkbox-vertical-spacing;

            @if $enable-big {
                .#{$prefix}big & {
                    margin-bottom: $checkbox-vertical-spacing-big;
                }
            }
        }

        &.#{$prefix}checkbox-align-left .#{$prefix}title-el {
            margin-left: $checkbox-horizontal-spacing;

            @if $enable-big {
                .#{$prefix}big & {
                    margin-left: $checkbox-horizontal-spacing-big;
                }
            }
        }
    }
}