/**
 * @class Ext.calendar.form.CalendarPicker
 */

$calendar-picker-icon-spacing: dynamic(5px);

@mixin ext-calendar-calendarpicker(
    $ui: null,

    $list-icon-height: null,
    $icon-spacing: null
) {
    $ui-suffix: ui-suffix($ui);
    $list-icon-offset: 8px;
    $list-icon-height: $boundlist-item-height - vertical($boundlist-item-border-width) - vertical($boundlist-item-padding) - $list-icon-offset;
    $field-icon-height: $form-text-field-height - vertical($form-text-field-padding) - vertical($form-text-field-border-width);

    .#{$prefix}calendar-picker-list#{$ui-suffix} {
        .#{$prefix}calendar-picker-list-icon {
            width: $list-icon-height;
            height: $list-icon-height;
            top: $list-icon-offset / 2;
        }

        .#{$prefix}calendar-picker-list-text {
            padding-left: $list-icon-height + $icon-spacing;
        }
    }

    .#{$prefix}calendar-picker-field#{$ui-suffix} {
        .#{$prefix}calendar-picker-field-icon {
            left: left($form-text-field-padding);
            top: top($form-text-field-padding);
            height: $field-icon-height;
            width: $field-icon-height;
        }

        .#{$prefix}form-text {
            padding-left: left($form-text-field-padding) + $field-icon-height + $icon-spacing;
        }
    }
}