/**
 * @class Ext.grid.column.Column
 */
 
//# fashion replaces $grid-column-color 
/**
 * @var {color}
 * Grid column text color
 */
$gridcolumn-color: dynamic($highlight-color);
 
//# fashion replaces $grid-column-background-color 
/**
 * @var {color}
 * Grid column background-color
 */
$gridcolumn-background-color: dynamic($neutral-light-color);
 
//# fashion replaces $grid-column-sorted-background-color 
/**
 * @var {color}
 * Grid column background-color when sorted
 */
$gridcolumn-sorted-background-color: dynamic(mix(#fff, $base-light-color, 80%));
 
/**
 * @var {color}
 * Grid column resizer background-color
 */
$gridcolumn-resizer-background-color: dynamic(darken($gridcolumn-background-color, 10%));
 
/**
 * @var {number/list}
 * Grid column border-width
 */
$gridcolumn-border-width: dynamic(null 1px 1px null);
 
/**
 * @var {string/list}
 * Grid column border-style
 */
$gridcolumn-border-style: dynamic(null solid solid null);
 
//# fashion replaces $grid-column-border-color 
/**
 * @var {color}
 * Grid column background-color
 */
$gridcolumn-border-color: dynamic(null $neutral-medium-dark-color $neutral-medium-dark-color null);
 
//# fashion replaces $grid-column-font-weight 
/**
 * @var {string/number}
 * Grid column font-weight
 */
$gridcolumn-font-weight: dynamic($font-weight-bold);
 
//# fashion replaces $grid-column-font-size 
/**
 * @var {number}
 * Grid column font-size
 */
$gridcolumn-font-size: dynamic(1rem);
 
//# fashion replaces $grid-column-font-size-big 
/**
 * @var {number}
 * Grid column font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$gridcolumn-font-size-big: dynamic(null);
 
//# fashion replaces $grid-column-line-height 
/**
 * @var {number}
 * Grid column line-height
 */
$gridcolumn-line-height: dynamic(1.25em);
 
//# fashion replaces $grid-column-line-height-big 
/**
 * @var {number}
 * Grid column line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$gridcolumn-line-height-big: dynamic(1.2em);
 
//# fashion replaces $grid-column-font-family 
/**
 * @var {string}
 * Grid column font-family
 */
$gridcolumn-font-family: dynamic($font-family);
 
//# fashion replaces $grid-column-padding 
/**
 * @var {number/list}
 * Grid column padding
 */
$gridcolumn-padding: dynamic(.308em .6em);
 
//# fashion replaces $grid-column-padding-big 
/**
 * @var {number/list}
 * Grid column padding in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$gridcolumn-padding-big: dynamic(.467em 1em);
 
/**
 * @var {number}
 * Grid column sort icon margin
 */
$gridcolumn-sort-icon-margin: dynamic(0 0 0 .23em);
 
/**
 * @var {number}
 * Grid column sort icon margin in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$gridcolumn-sort-icon-margin-big: dynamic(null);
 
/**
 * @var {number}
 * Grid column sort icon size
 */
$gridcolumn-sort-icon-size: dynamic(1em);
 
/**
 * @var {number}
 * Grid column sort icon size in the {@link global_css#$enable-big big} sizing scheme
 */
$gridcolumn-sort-icon-size-big: dynamic(null);
 
//# fashion replaces $grid-column-sort-icon-font-size 
/**
 * @var {number}
 * Grid column sort icon font size
 */
$gridcolumn-sort-icon-font-size: dynamic($gridcolumn-sort-icon-size);
 
/**
 * @var {number}
 * Grid column sort icon font size in the {@link Global_CSS#$enable-big big} sizing scheme
 */
$gridcolumn-sort-icon-font-size-big: dynamic($gridcolumn-sort-icon-size-big);
 
//# fashion replaces $grid-column-sort-icon-color 
/**
 * @var {color}
 * Grid column sort icon color
 */
$gridcolumn-sort-icon-color: dynamic($gridcolumn-color);
 
//# fashion replaces $grid-column-sort-asc-icon 
/**
 * @var {string/list}
 * Grid column sort ascending icon
 */
$gridcolumn-sort-asc-icon: dynamic($fa-var-long-arrow-up);
 
//# fashion replaces $grid-column-sort-desc-icon 
/**
 * @var {string/list}
 * Grid column sort descending icon
 */
$gridcolumn-sort-desc-icon: dynamic($fa-var-long-arrow-down);
 
/**
 * 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=gridcolumn] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {color} $color
 * Grid column text color
 *
 * @param {color} $background-color
 * Grid column background-color
 *
 * @param {color} $sorted-background-color
 * Grid column background-color
 *
 * @var {color} $resizer-background-color
 * Grid column resizer background-color
 *
 * @param {number/list} $border-width
 * Grid column border-width
 *
 * @param {string/list} $border-style
 * Grid column border-style
 *
 * @param {color} $border-color
 * Grid column background-color
 *
 * @param {string/number} $font-weight
 * Grid column font-weight
 *
 * @param {number} $font-size
 * Grid column font-size
 *
 * @param {number} $font-size-big
 * Grid column font-size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $line-height
 * Grid column line-height
 *
 * @param {number} $line-height-big
 * Grid column line-height in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {string} $font-family
 * Grid column font-family
 *
 * @param {number/list} $padding
 * Grid column padding
 *
 * @param {number/list} $padding-big
 * Grid column padding in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $sort-icon-margin
 * Grid column sort icon margin
 *
 * @param {number} $sort-icon-margin-big
 * Grid column sort icon margin in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $sort-icon-size
 * Grid column sort icon size
 *
 * @param {number} $sort-icon-size-big
 * Grid column sort icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {number} $sort-icon-font-size
 * Grid column sort icon font size
 *
 * @param {number} $sort-icon-font-size-big
 * Grid column sort font icon size in the {@link Global_CSS#$enable-big big} sizing scheme
 *
 * @param {color} $sort-icon-color
 * Grid column sort icon color
 *
 * @param {string/list} $sort-asc-icon
 * Grid column sort ascending icon
 *
 * @param {string/list} $sort-desc-icon
 * Grid column sort descending icon
 */
@mixin gridcolumn-ui(
    $ui: null,
    $xtype: gridcolumn,
    $color: null,
    $background-color: null,
    $sorted-background-color: null,
    $resizer-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
) {
    $ui-suffix: ui-suffix($ui);
 
    .#{$prefix}#{$xtype}#{$ui-suffix} {
        color: $color;
        background-color: $background-color;
        @include border($border-width, $border-style, $border-color);
        @include font($font-weight, $font-size, $line-height, $font-family);
        padding: $padding;
 
        @if $enable-big {
            .#{$prefix}big & {
                font-size: $font-size-big;
                line-height: $line-height-big;
                padding: $padding-big;
            }
        }
 
        &.#{$prefix}sorted {
            background-color: $sorted-background-color;
 
            .#{$prefix}sort-icon-el {
                margin: $sort-icon-margin;
                height: $sort-icon-size;
                width: $sort-icon-size;
                color: $sort-icon-color;
 
                @include icon( 
                    $font-size: $sort-icon-font-size, 
                    $font-size-big: $sort-icon-font-size-big 
                );
 
                @if $enable-big {
                    .#{$prefix}big & {
                        margin: $sort-icon-margin-big;
                        height: $sort-icon-size-big;
                        width: $sort-icon-size-big;
                    }
                }
            }
        }
 
        &.#{$prefix}sorted-asc .#{$prefix}sort-icon-el {
            @include icon($sort-asc-icon);
        }
 
        &.#{$prefix}sorted-desc .#{$prefix}sort-icon-el {
            @include icon($sort-desc-icon);
        }
 
        // resizer element 
        &:after {
            background-color: $resizer-background-color;
        }
    }
}