$ax5mask-z-index: 1000 !default;
$ax5mask-bg-opacity: 0.6 !default;

$ax5mask-bg: #000 !default;
$ax5mask-text-color: #fff !default;
$ax5mask-text-shadow:0px 1px 0px #000 !default;

$ax5mask-easing-time-open: 0.25s !default;
$ax5mask-easing-time-close: 0.25s !default;

@mixin ax-mask() {
    position: absolute;
}

@mixin ax-panel-mask() {
    position: absolute;
}

// mixins --------------------------------------------- end

@include keyframes(ax-mask) {
    from {
        opacity: 0.0;
    }
    to {
        opacity: $ax5mask-bg-opacity;
    }
}

@include keyframes(ax-mask-fade-out) {
    from {
        opacity: $ax5mask-bg-opacity;
    }
    to {
        opacity: 0.0;
    }
}

.ax-masking {
    -webkit-filter: blur(3px);
    //position: fixed;
    @include transform(scale(0.96));
    @include transform(translateZ(0));
}

.ax-mask {
    box-sizing: border-box;
    *,
    *:before,
    *:after {
        box-sizing: border-box;
    }

    z-index: $ax5mask-z-index;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    .ax-mask-bg {
        z-index: 1;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: $ax5mask-bg;
        opacity: $ax5mask-bg-opacity;
    }
    .ax-mask-content {
        z-index: 2;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: table;
        vertical-align: middle;
        text-align: center;
        color: $ax5mask-text-color;
        text-shadow: $ax5mask-text-shadow;
        * {
            color: inherit;
        }
        > div {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    }

    &.fade-out {
        @include animation(ax-mask-fade-out $ax5mask-easing-time-close);
        opacity: 0.0;
    }
}