/**
 * @class Ext.Mask
 */

@keyframes spin {
    0% {
			transform: rotate(0deg);
    }
    
    100% {
			transform: rotate(360deg);
    }
}

@-webkit-keyframes webkit-spin {
    from {
        -webkit-transform: rotate(0deg);
    }
    
    to {
        -webkit-transform: rotate(360deg);
    }
}

.x-mask .x-mask-inner {
    width: 50%;
    @include st-box();
    @include st-box-pack(center);
    @include st-box-align(center);
    background-color: transparent;
}

.x-mask.x-loading-mask {
	background-color: rgba(255,255,255,.75);
}

.x-mask .x-loading-spinner-outer {
    position: relative;
    height: auto;
}

.x-mask.x-has-message .x-loading-spinner-outer {
	height: 168px;
}

$spinnerSize: 64px;

.x-loading-spinner, .x-mask.x-has-message .x-loading-spinner-outer {
    width: $spinnerSize;
    height: $spinnerSize;
    min-width: $spinnerSize;
}

// SVG For Spinner converted to base64 and used below
/*
    <?xml version="1.0" encoding="utf-8"?>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 155 155" enable-background="new 0 0 155 155" xml:space="preserve">
        <g id="Layer_1">
        <circle fill="none" stroke="#969696" stroke-width="6" stroke-miterlimit="10" cx="77.5" cy="77.5" r="74.5"/>
        </g>
        <g id="Layer_2">
            <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="40.25" x2="80.5" y2="40.25">
            <stop  offset="4.000000e-02" style="stop-color:#969696"/>
            <stop  offset="5.740377e-02" style="stop-color:#8E8E8E"/>
            <stop  offset="0.1465" style="stop-color:#686868"/>
            <stop  offset="0.2428" style="stop-color:#484848"/>
            <stop  offset="0.3461" style="stop-color:#2E2E2E"/>
            <stop  offset="0.4592" style="stop-color:#191919"/>
            <stop  offset="0.5871" style="stop-color:#0B0B0B"/>
            <stop  offset="0.7422" style="stop-color:#030303"/>
            <stop  offset="1" style="stop-color:#000000"/>
            </linearGradient>

            <path fill="none" stroke="url(#SVGID_1_)" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
                    M3,77.5C3,36.4,36.4,3,77.5,3"/>
        </g>
    </svg>
*/
.x-loading-spinner {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDE1NSAxNTUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE1NSAxNTUiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGcgaWQ9IkxheWVyXzEiPg0KCTxjaXJjbGUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTY5Njk2IiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgY3g9Ijc3LjUiIGN5PSI3Ny41IiByPSI3NC41Ii8+DQo8L2c+DQo8ZyBpZD0iTGF5ZXJfMiI+DQoJPGxpbmVhckdyYWRpZW50IGlkPSJTVkdJRF8xXyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwIiB5MT0iNDAuMjUiIHgyPSI4MC41IiB5Mj0iNDAuMjUiPg0KCQk8c3RvcCAgb2Zmc2V0PSI0LjAwMDAwMGUtMDIiIHN0eWxlPSJzdG9wLWNvbG9yOiM5Njk2OTYiLz4NCgkJPHN0b3AgIG9mZnNldD0iNS43NDAzNzdlLTAyIiBzdHlsZT0ic3RvcC1jb2xvcjojOEU4RThFIi8+DQoJCTxzdG9wICBvZmZzZXQ9IjAuMTQ2NSIgc3R5bGU9InN0b3AtY29sb3I6IzY4Njg2OCIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIwLjI0MjgiIHN0eWxlPSJzdG9wLWNvbG9yOiM0ODQ4NDgiLz4NCgkJPHN0b3AgIG9mZnNldD0iMC4zNDYxIiBzdHlsZT0ic3RvcC1jb2xvcjojMkUyRTJFIi8+DQoJCTxzdG9wICBvZmZzZXQ9IjAuNDU5MiIgc3R5bGU9InN0b3AtY29sb3I6IzE5MTkxOSIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIwLjU4NzEiIHN0eWxlPSJzdG9wLWNvbG9yOiMwQjBCMEIiLz4NCgkJPHN0b3AgIG9mZnNldD0iMC43NDIyIiBzdHlsZT0ic3RvcC1jb2xvcjojMDMwMzAzIi8+DQoJCTxzdG9wICBvZmZzZXQ9IjEiIHN0eWxlPSJzdG9wLWNvbG9yOiMwMDAwMDAiLz4NCgk8L2xpbmVhckdyYWRpZW50Pg0KCQ0KCQk8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9InVybCgjU1ZHSURfMV8pIiBzdHJva2Utd2lkdGg9IjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSINCgkJTTMsNzcuNUMzLDM2LjQsMzYuNCwzLDc3LjUsMyIvPg0KPC9nPg0KPC9zdmc+DQo=');
    background-repeat:no-repeat;
    background-position:top left;
    width: $spinnerSize;
    height: $spinnerSize;
    background-size: 100%;
    -webkit-animation: webkit-spin 1s infinite linear;
    animation:spin 1s infinite linear;
}