/**
 * @class Ext.dataview.pullrefresh.Bar
 */

/**
 * @var $pullrefreshbar-width
 */
$pullrefreshbar-width: dynamic(null);

$pullrefreshbar-min-height: dynamic(52px);
$pullrefreshbar-min-height-big: dynamic(67px);
$pullrefreshbar-color: dynamic($color);
$pullrefreshbar-background-color: dynamic($neutral-light-color);
$pullrefreshbar-font-size: dynamic(26px);
$pullrefreshbar-font-size-big: dynamic(30px);
$pullrefreshbar-border-width: dynamic(null);
$pullrefreshbar-border-style: dynamic(null);
$pullrefreshbar-border-color: dynamic(null);

$pullrefreshbar-arrow-width: dynamic(13px);
$pullrefreshbar-arrow-icon: dynamic($fa-var-long-arrow-down);
$pullrefreshbar-arrow-icon-color: dynamic($base-color);
$pullrefreshbar-arrow-icon-font-size: dynamic(250%);
$pullrefreshbar-arrow-icon-font-size-big: dynamic($pullrefreshbar-arrow-icon-font-size);

$pullrefreshbar-bottom-box-shadow: dynamic(0 2px 4px 0 rgba(0, 0, 0, .2));

$pullrefreshbar-text-margin: dynamic(0 0 0 26px);
$pullrefreshbar-text-margin-big: dynamic($pullrefreshbar-text-margin);

$pullrefreshbar-spinner-font-size: dynamic(null);
$pullrefreshbar-spinner-font-size-big: dynamic($pullrefreshbar-spinner-font-size);
$pullrefreshbar-spinner-padding: dynamic(null);
$pullrefreshbar-spinner-padding-big: dynamic(null);
$pullrefreshbar-spinner-background-color: dynamic(null);
$pullrefreshbar-spinner-border-radius: dynamic(null);
$pullrefreshbar-spinner-border-radius-big: dynamic(null);

@mixin pullrefreshbar-ui(
    $xtype: pullrefreshbar,
    $ui: null,

    $width: null,
    $min-height: null,
    $min-height-big: null,
    $color: null,
    $background-color: null,
    $font-size: null,
    $font-size-big: null,
    $border-width: null,
    $border-style: null,
    $border-color: null,

    $arrow-width: null,
    $bottom-box-shadow: null,

    $arrow-icon: null,
    $arrow-icon-color: null,
    $arrow-icon-font-size: null,
    $arrow-icon-font-size-big: null,

    $text-margin: null,
    $text-margin-big: null,

    $spinner-font-size: null,
    $spinner-font-size-big: null,
    $spinner-padding: null,
    $spinner-padding-big: null,
    $spinner-background-color: null,
    $spinner-border-radius: null,
    $spinner-border-radius-big: null
) {
    $ui-suffix: ui-suffix($ui);

    .#{$prefix}#{$xtype}#{$ui-suffix} {
        width: $width;
        min-height: $min-height;
        background-color: $background-color;
        @include border($border-width, $border-style, $border-color);

        @if $enable-big {
            .#{$prefix}big & {
                min-height: $min-height-big;
            }
        }

        &.#{$prefix}pullrefresh-overlay {
            box-shadow: $bottom-box-shadow;
        }

        .#{$prefix}pullrefreshbar-loading-wrap {
            padding: $spinner-padding;
            background-color: $spinner-background-color;
            @include border-radius($spinner-border-radius);

            // Remember, states come from the base and are "x-pullrefresh"
            // not "x-pullrefreshbar"
            .#{$prefix}pullrefresh-loading {
                font-size: $spinner-font-size;
            }

            @if $enable-big {
                .#{$prefix}big & {
                    font-size: $spinner-font-size-big;
                    padding: $spinner-padding-big;
                    @include border-radius($spinner-border-radius-big);

                    .#{$prefix}pullrefresh-loading {
                        font-size: $spinner-font-size-big;
                    }
                }
            }
        }

        .#{$prefix}pullrefreshbar-info-wrap {
            margin: $text-margin;

            @if $enable-big {
                .#{$prefix}big & {
                    margin: $text-margin-big;
                }
            }
        }

        @if $arrow-icon != null {
            .#{$prefix}pullrefreshbar-arrow {
                width: $arrow-width;
                color: $arrow-icon-color;
                font-size: $arrow-icon-font-size;
                @include font-icon($arrow-icon);

                @include rotate(180);
                transition: all 0.5s;

                @if $enable-big {
                    .#{$prefix}big & {
                        font-size: $arrow-icon-font-size-big;
                    }
                }
            }

            &.#{$prefix}pullrefresh-pulling .#{$prefix}pullrefreshbar-arrow {
                @include rotate(0);
            }

        }
    }
}