/**
 * @class Ext.grid.Grid
 */


/**
 * @var {color}
 * background-color for the resize indicator that displays when resizing columns in the grid
 */
$grid-resize-marker-background-color: dynamic($neutral-dark-color);

/**
 * @var {number}
 * Width of the resize indicator that displays when resizing columns in the grid
 */
$grid-resize-marker-width: dynamic(1px);

/**
 * @var {number}
 * opacity of the grid with disabled true
 */
$grid-disabled-opacity: dynamic(.6);

/**
 * @var {number}
 * default cursor for grid with disabled true
 */
$grid-disabled-cursor: dynamic(default);

/**
 * Creates a visual theme for a Grid.
 *
 * @param {string} $ui
 * @param {color} $resize-marker-background-color
 * @param {number} $resize-marker-width
 *
 * The name of the UI being created. Can not included spaces or special punctuation
 * (used in CSS class names).
 *
 */
@mixin grid-ui(
    $ui: null,
    $resize-marker-background-color: null,
    $resize-marker-width: null,
    $disabled-opacity: null,
    $disabled-cursor: null
) {
    $ui-suffix: ui-suffix($ui);
    .#{$prefix}grid#{$ui-suffix} {
        &.#{$prefix}disabled {
            cursor: $disabled-cursor;
            pointer-events: none;
            opacity: $disabled-opacity;
        }
        .#{$prefix}resize-marker-el {
            background-color: $resize-marker-background-color;
            width: $resize-marker-width;
            z-index: 1;
        }
    }
}