/**
 * @class Ext.calendar.List
 */

/**
 * @var {string} [$calendar-list-item-margin='0 0 6px 0']
 */
$calendar-list-item-margin: dynamic(0 0 6px 0);

$calendar-list-item-height: dynamic(null);

$calendar-list-icon-size: dynamic(16px);

$calendar-list-item-icon-spacing: dynamic(4px);

$calendar-list-item-hidden-opacity: dynamic(0.5);

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

    $item-margin: null,
    $item-height: null,
    $icon-size: null,
    $item-icon-spacing: null,
    $item-hidden-opacity: null
) {
    $ui-suffix: ui-suffix($ui);

    .#{$prefix}calendar-list#{$ui-suffix} {
        .#{$prefix}calendar-list-item {
            margin: $item-margin;
            height: $item-height;
        }

        .#{$prefix}calendar-list-item-hidden {
            @if $item-hidden-opacity != null {
                @include opacity($item-hidden-opacity);
            }
        }

        .#{$prefix}calendar-list-icon {
            width: $icon-size;
            height: $icon-size;
            top: 50%;
            @include transform(translateY(-50%));
        }

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