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

.#{$prefix}pullrefreshbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    .#{$prefix}pullrefreshbar-arrow {
        opacity: 1;
        transition: opacity .5s;
    }

    // The overlay and state classes are shared across Bar and Spinner
    // and so are "x-pullrefresh" not "x-pullrefreshbar"
    &.#{$prefix}pullrefresh-loading {
        .#{$prefix}pullrefreshbar-loading-wrap {
            display: block;
        }

        .#{$prefix}pullrefreshbar-arrow {
            opacity: 0;
        }
    }

    &.#{$prefix}pullrefresh-loaded {
        .#{$prefix}pullrefreshbar-arrow {
            opacity: 0;
        }
    }

    &.#{$prefix}pullrefresh-overlay {
        width: 100%;
    }
}

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

.#{$prefix}pullrefreshbar-loading-wrap {
    position: relative;
}

.#{$prefix}pullrefreshbar-mode-message {
    .#{$prefix}pullrefreshbar-loading-wrap {
        display: none;
    }
}

.#{$prefix}pullrefreshbar-mode-spinner {
    .#{$prefix}pullrefreshbar-info-wrap {
        display: none;
    }
}