.#{$prefix}root {
    -webkit-text-size-adjust: none;

    @if $enable-font-smoothing {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    &, *, :after, :before {
        box-sizing: border-box;
    }
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html.#{$prefix}has-viewport,
.#{$prefix}has-viewport > body {
    margin: 0;
    width: 100%;
    height: 100%;
}

html.#{$prefix}fixed-viewport,
.#{$prefix}fixed-viewport > body {
    // position: fixed serves a couple of purposes:
    //
    // 1. on iOS it prevents elastic overscroll of the viewport but it can only be used
    // when the viewport is not scalable, i.e. user-scalable=no, because the viewport will
    // not size correctly if the body is "position: fixed" and zoom level != 1
    //
    // 2. On android it prevents the url bar from scrolling out of view.  This is necessary
    // to ensure the viewport sizes correctly when zoomed in.
    // https://sencha.jira.com/browse/EXTJS-26132
    position: fixed;
}

@media print {
    // If the body is position: fixed it will only print the first page.
    // https://sencha.jira.com/browse/EXTJS-25494
    html.#{$prefix}has-unscalable-viewport,
    .#{$prefix}has-unscalable-viewport > body {
        position: static;
    }
}

.#{$prefix}user-selectable-all {
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

.#{$prefix}user-selectable-auto {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: text;
    user-select: auto;
}

.#{$prefix}user-selectable-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.#{$prefix}user-selectable-text {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.#{$prefix}focused {
    outline: none;
}

.#{$prefix}maximized {
    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    left: 0 !important;
    top: 0 !important;

    // to handle csstransform translatables (like floated components)
    transform: translate3d(0, 0, 0) !important;
}

@-ms-viewport {
    // prevent scaling on windows8 tablets when using portrait orientation
    width: device-width;
}

@-webkit-keyframes x-loading-spinner-rotate {
    0%{     -webkit-transform: rotate(0deg);   }
    8.32%{  -webkit-transform: rotate(0deg);   }

    8.33%{  -webkit-transform: rotate(30deg);  }
    16.65%{ -webkit-transform: rotate(30deg);  }

    16.66%{ -webkit-transform: rotate(60deg);  }
    24.99%{ -webkit-transform: rotate(60deg);  }

    25%{    -webkit-transform: rotate(90deg);  }
    33.32%{ -webkit-transform: rotate(90deg);  }

    33.33%{ -webkit-transform: rotate(120deg); }
    41.65%{ -webkit-transform: rotate(120deg); }

    41.66%{ -webkit-transform: rotate(150deg); }
    49.99%{ -webkit-transform: rotate(150deg); }

    50%{    -webkit-transform: rotate(180deg); }
    58.32%{ -webkit-transform: rotate(180deg); }

    58.33%{ -webkit-transform: rotate(210deg); }
    66.65%{ -webkit-transform: rotate(210deg); }

    66.66%{ -webkit-transform: rotate(240deg); }
    74.99%{ -webkit-transform: rotate(240deg); }

    75%{    -webkit-transform: rotate(270deg); }
    83.32%{ -webkit-transform: rotate(270deg); }

    83.33%{ -webkit-transform: rotate(300deg); }
    91.65%{ -webkit-transform: rotate(300deg); }

    91.66%{ -webkit-transform: rotate(330deg); }
    100%{   -webkit-transform: rotate(330deg); }
}

@keyframes x-loading-spinner-rotate {
    0%{     transform: rotate(0deg);   }
    8.32%{  transform: rotate(0deg);   }

    8.33%{  transform: rotate(30deg);  }
    16.65%{ transform: rotate(30deg);  }

    16.66%{ transform: rotate(60deg);  }
    24.99%{ transform: rotate(60deg);  }

    25%{    transform: rotate(90deg);  }
    33.32%{ transform: rotate(90deg);  }

    33.33%{ transform: rotate(120deg); }
    41.65%{ transform: rotate(120deg); }

    41.66%{ transform: rotate(150deg); }
    49.99%{ transform: rotate(150deg); }

    50%{    transform: rotate(180deg); }
    58.32%{ transform: rotate(180deg); }

    58.33%{ transform: rotate(210deg); }
    66.65%{ transform: rotate(210deg); }

    66.66%{ transform: rotate(240deg); }
    74.99%{ transform: rotate(240deg); }

    75%{    transform: rotate(270deg); }
    83.32%{ transform: rotate(270deg); }

    83.33%{ transform: rotate(300deg); }
    91.65%{ transform: rotate(300deg); }

    91.66%{ transform: rotate(330deg); }
    100%{   transform: rotate(330deg); }
}

.#{$prefix}shim {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    @include opacity(0);
}

.#{$prefix}css-shadow {
    position: absolute;
    @include border-radius($css-shadow-border-radius);
}

.#{$prefix}shadow {
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
}

@if ($enable-floated-shadows) {
    .#{$prefix}floated {
        @extend .#{$prefix}shadow;
    }
}

.#{$prefix}no-shadow {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.#{$prefix}floating {
    position: absolute !important;
}

.#{$prefix}center {
    @include absolute-position();
    display: flex;
    align-items: center;
    justify-content: center;

    > * {
        position: relative;
    }

    > .#{$prefix}floating {
        position: relative !important;
	}
}

.#{$prefix}fullscreen {
    position: absolute !important;
}

@if ($enable-status-bar-padding) {
    // Must a native iOS app (not standalone)
    // Must not be phone AND landscape (status bar disappears in landscape for phones)
    .#{$prefix}ios-native:not(.#{$prefix}phone.#{$prefix}landscape) {
        padding-top: 20px;
    }
}

.#{$prefix}font-icon {
    font-weight: normal;
    // Flexbox layout is used to vertically center the icon inside the element.
    // The pseudo el below may or may not be the same size as the icon element's font-size
    // therefore we cannot rely on line-height: 1 to vertically center the icon.
    // If block behavior is needed, use flex instead of inline-flex.
    display: inline-flex;
    vertical-align: top;
    align-items: center;
    justify-content: center;

    &:before {
        display: flex;
        line-height: 1;
        font-style: normal;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        direction: ltr;

        /* Support for all WebKit browsers. */
        -webkit-font-smoothing: antialiased;

        /* Support for Firefox. */
        -moz-osx-font-smoothing: grayscale;

        /* Roboto uses ligatures.  Android and IE seem to need this */
        font-feature-settings: 'liga';

        /* Support for Safari and Chrome. */
        text-rendering: optimizeLegibility;
    }
}

.#{$prefix}noborder-l {
    border-left-width: 0 !important;
}

.#{$prefix}noborder-b {
    border-bottom-width: 0 !important;
}

.#{$prefix}noborder-bl {
    border-bottom-width: 0 !important;
    border-left-width: 0 !important;
}

.#{$prefix}noborder-r {
    border-right-width: 0 !important;
}

.#{$prefix}noborder-rl {
    border-right-width: 0 !important;
    border-left-width: 0 !important;
}

.#{$prefix}noborder-rb {
    border-right-width: 0 !important;
    border-bottom-width: 0 !important;
}

.#{$prefix}noborder-rbl {
    border-right-width: 0 !important;
    border-bottom-width: 0 !important;
    border-left-width: 0 !important;
}

.#{$prefix}noborder-t {
    border-top-width: 0 !important;
}

.#{$prefix}noborder-tl {
    border-top-width: 0 !important;
    border-left-width: 0 !important;
}

.#{$prefix}noborder-tb {
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
}

.#{$prefix}noborder-tbl {
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    border-left-width: 0 !important;
}

.#{$prefix}noborder-tr {
    border-top-width: 0 !important;
    border-right-width: 0 !important;
}

.#{$prefix}noborder-trl {
    border-top-width: 0 !important;
    border-right-width: 0 !important;
    border-left-width: 0 !important;
}

.#{$prefix}noborder-trb {
    border-top-width: 0 !important;
    border-right-width: 0 !important;
    border-bottom-width: 0 !important;
}

.#{$prefix}noborder-trbl {
    border-width: 0 !important;
}

// Reset default button element focus styling.
// This class is used by many components: Button, Tab, Tool, etc;
// hence shared in base Component SASS
.#{$prefix}button-reset {
    margin: 0;
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background: none;
    
    &:focus {
        outline: none;
    }
    
    // See https://bugzilla.mozilla.org/show_bug.cgi?id=140562
    .#{$prefix}gecko &::-moz-focus-inner {
        padding: 0;
        border: none;
    }
}

.#{$prefix}component {
    position: relative;
}