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

    // @tag frameme
}

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

    position: absolute;
    top: 0;
    left: 0;

    @include box-shadow(rgba(#000, .2) 0 1px 2px);
    padding: $loadmask-msg-padding;
    // border: 1px solid;
    // border-color: $loadmask-msg-border-color;
    
    @include border-radius(6px);

    @if $loadmask-msg-background-gradient {
        @if $supports-gradients or $compile-all {
            @include background-gradient($loadmask-base-color, $loadmask-msg-background-gradient);
        }
    } @else {
        background: $loadmask-base-color;
    }
    
    div {
        padding: $loadmask-msg-inner-padding;
        
        // if an icon is defined show it
        @if $loadmask-msg-inner-icon != null {
            background-image: theme-background-image($theme-name, $loadmask-msg-inner-icon);
            background-repeat: no-repeat;
            background-position: 5px center;
        }
        
        // @tag question Not a great effect...
        // cursor: wait;
        cursor: default;
        font-size: $loadmask-font-size;
        font-weight: bold;
        @include color-by-background($loadmask-base-color, $default-color: $base-color, $contrast: 30);
    }
}