/*
 * Copyright (C) 2013 salesforce.com, inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
.THIS {
    position: relative;
    /*overflow: hidden;*/

    /* TODO: height property may need to live outside, here does not makes much sense ?*/
    width: 100%;
    height : 100%;

    /* workaround for safari bug where scrollbars are obscured by contents 
     when context are in a new stacking context */

}

@if (!ie11) {
    .THIS {
        transform: translateZ(0);
    }   
}

.THIS > * {
    box-sizing: border-box;
}

/* CSS Native scrolling Classes */
.THIS.native {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.THIS.native > .scroller > .pullToRefresh,
.THIS.native > .scroller > .pullToLoadMore {
    position: relative;
    -webkit-touch-callout: none;
    user-select: none;
    cursor: pointer;
}

.THIS > .scroller {
    position: absolute;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transform: translateZ(0);

    -webkit-touch-callout: none;
    user-select: none;

    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}

.THIS.native > .scroller {
    -webkit-touch-callout: default;
    user-select: text;
}

.THIS.scroll-vertical > .scroller, .THIS.scroll-vertical .surface {
    width: 100%;
}
.THIS.scroll-horizontal > .scroller, .THIS.scroll-horizontal .surface {
    height: 100%;
}

.THIS .surface {
    position: absolute;
    transform-origin: center center;
    backface-visibility: hidden;
    transform-style: flat;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    box-sizing: border-box;
}

.THIS .pullToRefresh {
    transform : translate3d(0,0,0);
    position: absolute;
    width: 100%;
    height: 50px;
    top: -50px;
    text-align: center;
    line-height: 50px;
    z-index: 100; /* Do not remove, hint to the browser for compositing (the number is arbitrary)*/
}
.THIS .pullToLoadMore {
    transform : translate3d(0,0,0);
    height: 50px;
    text-align: center;
    line-height: 50px;
    z-index: 100; /* Do not remove, hint to the browser for compositing (the number is arbitrary)*/
}

.THIS .pullToRefresh > .icon, 
.THIS .pullToLoadMore > .icon {
    line-height: 1;
    display: inline-block;
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 5px; 
    transition : transform 300ms;
    transform : translate3d(0,0,0);
    padding: 0 5px;
    box-sizing: content-box;
}

.THIS .pullToRefresh.pull  > .icon, 
.THIS .pullToLoadMore.pull > .icon {
    transform         : translate3d(0,0,0) rotate(180deg);
}

.THIS .pullToRefresh.update > .icon,
.THIS .pullToLoadMore.update > .icon {
    animation         : spin .6s linear infinite;
}

.THIS button.scrollButton.voiceOver {
	position: absolute;
    z-index: 9999;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

.THIS button.scrollButton.voiceOver.top {
    top: 0px;
    height: 30px;
    width: 100%;
}

.THIS button.scrollButton.voiceOver.upButton {
    display: none;
} 

.THIS button.scrollButton.voiceOver.downButton {
    height: 30px;
    width: 100%;
    bottom: 0px;
}

.THIS button.scrollButton.voiceOver.rightButton {
    width: 30px;
    height: 100%;
    right: 0;
}

.THIS button.scrollButton.voiceOver.leftButton {
    width: 30px;
    height: 100%;
    left: 0;
}

@keyframes spin { from { transform: rotate(180deg);} to { transform: rotate(540deg); } }
