/**
 * @class Ext.grid.plugin.RowEditor
 */

/**
 * @var {color}
 * Row editor background-color
 */
$roweditor-background-color: dynamic($neutral-light-color);

/**
 * @var {number}
 * Row editor border-width
 */
$roweditor-border-width: dynamic($listitem-border-width);

/**
 * @var {string}
 * Row editor border-style
 */
$roweditor-border-style: dynamic($listitem-border-style);

/**
 * @var {color}
 * Row editor border-color
 */
$roweditor-border-color: dynamic($listitem-border-color);

/**
 * @var {list}
 * RowEditor box-shadow
 */
$roweditor-box-shadow: dynamic($listitem-pinned-box-shadow);

/**
 * @var {list}
 * RowEditor box-shadow when positioned at the bottom of the grid.
 */
$roweditor-bottom-box-shadow: dynamic($listitem-pinned-bottom-box-shadow);

/**
 * @var {color}
 * Padding around row editor Update/Cancel buttons.
 */
$roweditor-buttons-border-width: dynamic(top($listitem-border-width));

/**
 * @var {color}
 * Padding around row editor Update/Cancel buttons.
 */
$roweditor-buttons-padding: dynamic(4px);

/**
 * @var {string}
 * CSS transition value for repositioning the row editor.
 */
$roweditor-transition: dynamic(top 0.3s);

/**
 * Creates a visual theme for a grid summary row.
 *
 * @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=roweditor] (protected) The {@link Ext.Class#xtype} to use
 * in CSS selectors.  For use by UI mixins of derived classes.
 *
 * @param {color} $color
 * Row editor text color
 *
 * @param {color} $background-color
 * Row editor background-color
 *
 * @param {number} $border-width
 * Row editor border-width
 *
 * @param {string} $border-style
 * Row editor border-style
 *
 * @param {color} $border-color
 * Row editor border-color
 */
@mixin roweditor-ui(
    $ui: null,
    $xtype: roweditor,
    $background-color: null,
    $border-width: null,
    $border-style: null,
    $border-color: null,
    $box-shadow: $listitem-pinned-box-shadow,
    $bottom-box-shadow: $listitem-pinned-bottom-box-shadow,
    $buttons-border-width: null,
    $buttons-padding: null,
    $transition: null
) {
    $ui-suffix: ui-suffix($ui);

    @include panel-ui(
        $ui: roweditor#{$ui-suffix},
        $background-color: $background-color,
        $body-background-color: $background-color,
        $border-color: $border-color,
        $border-width: $border-width,
        $border-style: $border-style
    );

    @include panel-ui(
        $ui: roweditor-buttons#{$ui-suffix},
        $background-color: $background-color,
        $body-background-color: $background-color,
        $body-padding: top($buttons-padding) right($buttons-padding) bottom($buttons-padding) 0,
        $border-color: $border-color,
        $border-width: $buttons-border-width,
        $border-style: $border-style
    );

    $arguments: intersect-arguments(roweditor-ui, listitem-base);

    .#{$prefix}roweditor#{$ui-suffix} {
        @include listitem-base($arguments...);
        margin-bottom: 0;  // to replace listitem

        transition: $transition;

        &.#{$prefix}roweditor-button-ct-above {
            box-shadow: $bottom-box-shadow;

            .#{$prefix}roweditor-button-ct {
                box-shadow: $bottom-box-shadow;
            }
        }

        &.#{$prefix}roweditor-button-ct-below {
            box-shadow: $box-shadow;

            .#{$prefix}roweditor-button-ct {
                box-shadow: $box-shadow;
            }
        }

        &.#{$prefix}roweditor-button-ct-above {
            box-shadow: $bottom-box-shadow;
        }

        &.#{$prefix}roweditor-button-ct-below {
            box-shadow: $box-shadow;
        }

        .#{$prefix}roweditor-inner-el {
            padding: 0;
        }

        .#{$prefix}roweditor-button-ct {
            .#{$prefix}button {
                margin-left: left($buttons-padding);
            }
        }
    }
}