/**
  * @class Ext.LoadMask
  * Component used to mask a component
  */
.#{$prefix}mask {
    z-index: 100;
    
    position: absolute;
    top: 0;
    left: 0;
    
    @include opacity($loadmask-opacity);
    
    width: 100%;
    height: 100%;
    zoom: 1;
    
    background: $loadmask-backgorund;
}

.#{$prefix}mask-msg {
    z-index: 20001;

    position: absolute;
    top: 0;
    left: 0;
    
    padding: $loadmask-msg-padding;
    border: 1px solid;
    border-color: $loadmask-msg-border-color;
    
    @if $loadmask-msg-background-gradient {
        @if $supports-gradients or $compile-all {
            @include background-gradient($loadmask-msg-background-color, $loadmask-msg-background-gradient);
        }
    } @else {
        background: $loadmask-msg-background-color;
    }
    
    div {
        padding: $loadmask-msg-inner-padding;
        
        //if an icon is defined show it
        @if $loadmask-msg-inner-icon != null {
            background-image: theme-image($theme-name, $loadmask-msg-inner-icon);
            background-repeat: no-repeat;
            background-position: 5px center;
        }
        
        cursor: wait;
        
        border: 1px solid $loadmask-msg-inner-border-color;
        
        background-color: $loadmask-msg-inner-background-color;
        
        color: $loadmask-msg-inner-color;
        font: $loadmask-msg-inner-font;
    }
}