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

@import "../common";

@include export("toast") {
    #{$toast-class-wrapper} {
        position: fixed;
        padding: $margin;
        width: 20%;
        z-index: $toast-zindex;

        @include if-max(nth($breakpoint-range-small, 1)) {
            width: 100%;
        }

        @if index($toast-position, "top-left") {
            &.top-left {
                top: 0;
                left: 0;
            }
        }

        @if index($toast-position, "top-center") {
            &.top-center {
                top: 0;
                left: 50%;
            }
        }

        @if index($toast-position, "top-right") {
            &.top-right {
                top: 0;
                right: 0;
            }
        }

        @if index($toast-position, "center-left") {
            &.center-left {
                top: 50%;
                left: 0;
            }
        }

        @if index($toast-position, "center-right") {
            &.center-right {
                top: 50%;
                right: 0;
            }
        }

        @if index($toast-position, "bottom-left") {
            &.bottom-left {
                bottom: 0;
                left: 0;
            }
        }

        @if index($toast-position, "bottom-center") {
            &.bottom-center {
                bottom: 0;
                left: 50%;
            }
        }

        @if index($toast-position, "bottom-right") {
            &.bottom-right {
                bottom: 0;
                right: 0;
            }
        }

        @if index($toast-position, "top-center") or index($toast-position, "bottom-center") {
            &.top-center,
            &.bottom-center {
                transform: translateX(-50%);
            }
        }

        @if index($toast-position, "center-left") or index($toast-position, "center-right") {
            &.center-left,
            &.center-right {
                transform: translateY(-50%);
            }
        }
    }

    #{$toast-class} {
        margin-top: 1rem;
        transition: opacity $toast-transition, visibility $toast-transition, transform $toast-transition;
        opacity: 0;
        visibility: hidden;

        &.show { opacity: 1; }
        &:first-child { margin-top: 0; }
    }

    //-------------------- Animations --------------------//

    #{$toast-class} {
        @if index($toast-animations, "slide-up") {
            &.slide-up {
                transform: translateY(50%);

                &.show { transform: translateY(0); }
            }
        }

        @if index($toast-animations, "slide-down") {
            &.slide-down {
                transform: translateY(-50%);

                &.show { transform: translateY(0); }
            }
        }

        @if index($toast-animations, "slide-left") {
            &.slide-left {
                transform: translateX(25%);

                &.show { transform: translateX(0); }
            }
        }

        @if index($toast-animations, "slide-right") {
            &.slide-right {
                transform: translateX(-25%);

                &.show { transform: translateX(0); }
            }
        }
    }
}