/**
 * Toast Container
 */

.toast-container {
    position: relative;

    .toast-position {
        position: fixed;
        width: 320px;
        max-width: 100%;
        z-index: var(--toast-container--z-index, 2010);
        margin: var(
            --toast-container--margin,
            var(--toast-container--margin-top, var(--margin-top))
                var(--toast-container--margin-right, var(--margin-right))
                var(--toast-container--margin-bottom, var(--margin-bottom))
                var(--toast-container--margin-left, var(--margin-left))
        );
        max-height: 100%;
        overflow: visible;

        &.-top-left {
            top: var(--toast-container--top, 0);
            left: var(--toast-container--left, 0);
        }

        &.-top {
            top: var(--toast-container--top, 0);
            left: 50%;
            transform: translateX(-50%);
        }

        &.-top-right {
            top: var(--toast-container--top, 0);
            right: var(--toast-container--right, 0);
        }

        &.-right {
            top: 50%;
            right: var(--toast-container--right, 0);
            transform: translateY(-50%);
        }

        &.-bottom-right {
            bottom: var(--toast-container--bottom, 0);
            right: var(--toast-container--right, 0);
        }

        &.-bottom {
            bottom: var(--toast-container--bottom, 0);
            left: 50%;
            transform: translateX(-50%);
        }

        &.-bottom-left {
            bottom: var(--toast-container--bottom, 0);
            left: var(--toast-container--left, 0);
        }

        &.-left {
            top: 50%;
            left: var(--toast-container--left, 0);
            transform: translateY(-50%);
        }

        > .toast {
            width: 320px;
            max-width: 100%;
            margin-bottom: var(--toast-container--toast--margin-bottom, var(--margin-bottom));

            &:last-of-type {
                margin-bottom: 0;
            }
        }
    }
}

.toast-transition-move, /* apply transition to moving elements */
.toast-transition-enter-active,
.toast-transition-leave-active {
    transition-property: var(--toast-container--toast--transition-property, transform, opacity);
    transition-duration: var(
        --toast-container--toast--transition-duration,
        var(--transition-duration)
    );
    transition-timing-function: var(
        --toast-container--toast--transition-timing-function,
        var(--transition-timing-function)
    );
}

.toast-transition-enter-from,
.toast-transition-leave-to {
    opacity: 0;
}

/* ensure leaving items are taken out of layout flow so that moving
   animations can be calculated correctly. */
.toast-transition-leave-active {
    position: absolute;
}