/**
 * @class Ext.ux.layout.ResponsiveColumn
 */

/**
 * @var {number}
 * The space between items in a responsive column layout
 */
$responsivecolumn-item-spacing: dynamic(20px);

/**
 * Configures the width of an item in a responsive column layout
 *
 * @param {number} [$width=100%]
 * The width as a percentage
 *
 * @param {number} [$spacing=$responsivecolumn-item-spacing]
 * The space between items.  For best results all items in the same responsive column
 * layout should use the same value.
 */
@mixin responsivecolumn-item($width: 100%, $spacing: $responsivecolumn-item-spacing) {
    width: calc(#{$width} - #{$spacing});

    // This hack allows the JS layout to read the width/spacing info in IE8 since
    // it does not support CSS calc()
    background-position: $width $spacing !important;
}