/**
 * @copyright   2010-2015, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@import "../common";

@include export("mask") {
    #{$mask-class} {
        @include full-screen(absolute);
        z-index: $mask-zindex;
        opacity: 0;
        visibility: hidden;
        background: black($mask-opacity);
        transition: all $mask-transition;
        color: #fff;
        user-select: none;
    }

    #{$mask-class-message} {
        text-align: center;
        max-width: 80%;
        @include position-center;

        &:empty { display: none; }
    }

    #{$mask-class-target} {
        overflow: hidden;

        // Fixes issues where mask does not display in iOS
        // Kind of hacky? Other solutions?
        -webkit-backface-visibility: hidden;
    }
}