@mixin ax-toast() {
    box-sizing: $ax5toast-box-model;
    border: $ax5toast-border;
    opacity: $ax5toast-opacity;

    @include ax-border-radius($ax5toast-border-radius);
    box-shadow: $ax5toast-box-shadow;
    position: relative;
    margin: $ax5toast-box-margin;
}

@mixin ax-toast-section() {
    display: table;
    padding: $ax5toast-body-padding;
    .ax-toast-icon {
        display: table-cell;
        padding: $ax5toast-body-padding;
        text-align: left;
        font-size: $ax5toast-icon-size;
        width: $ax5toast-icon-size;
        vertical-align: middle;
    }
    .ax-toast-body {
        display: table-cell;
        padding: $ax5toast-body-padding;
        text-align: left;
        vertical-align: middle;
    }
    .ax-toast-buttons {
        display: table-cell;
        padding: $ax5toast-body-padding;
        text-align: right;
        vertical-align: middle;
        button {
            &:not(:last-child) {
                margin-right: 3px;
            }
        }
    }
    .ax-toast-close {
        display: table-cell;
        padding: $ax5toast-body-padding;
        text-align: right;
        vertical-align: top;
        text-decoration: none;
        cursor: pointer;
    }
}

@mixin toast-variant($text-color, $bg-color, $color) {
    background: $bg-color;
    color: $text-color;
    .ax-toast-icon {
        color: $color;
    }
    .ax-toast-close {
        color: $text-color;
    }
}

@include keyframes(ax-toast-bottom) {
    from {
        @include transform(translateY(-100px) scale(0.7));
    }
    to {
        //@include opacity($mask-bg-opacity);
        @include transform(translateY(0px) scale(1))
    }
}

@include keyframes(ax-toast-top) {
    from {
        @include transform(translateY(100px) scale(0.7));
    }
    to {
        //@include opacity($mask-bg-opacity);
        @include transform(translateY(0px) scale(1))
    }
}

@include keyframes(ax-toast-removed-bottom) {
    from {
        @include transform(translateY(0px));
        opacity: 1.0;
    }
    to {
        @include transform(translateY(10px) scale(0.7));
        opacity: 0.0;
    }
}

@include keyframes(ax-toast-removed-top) {
    from {
        @include transform(translateY(0px));
        opacity: 1.0;
    }
    to {
        @include transform(translateY(-10px) scale(0.7));
        opacity: 0.0;
    }
}

@include keyframes(ax-toast-destroy) {
    from {
        @include transform(scale(1));
        opacity: 1.0;
    }
    to {
        @include transform(scale(1.5));
        opacity: 0.0;
    }
}

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

.ax5-ui-toast-container {
    z-index: $ax5toast-z-index;
    position: fixed;
    width: $ax5toast-container-width;
    padding: $ax5toast-container-padding;

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

    .ax5-ui-toast {
        @include ax-toast();
        @include ax-toast-section();
        @include transition(all $ax5toast-easing-time ease-in-out);

        @include toast-variant($ax5toast-default-text, $ax5toast-default-bg, $ax5toast-default-color);

        &.primary {
            @include toast-variant($ax5toast-primary-text, $ax5toast-primary-bg, $ax5toast-primary-color);
        }
        &.success {
            @include toast-variant($ax5toast-success-text, $ax5toast-success-bg, $ax5toast-success-color);
        }
        &.info {
            @include toast-variant($ax5toast-info-text, $ax5toast-info-bg, $ax5toast-info-color);
        }
        &.warning {
            @include toast-variant($ax5toast-warning-text, $ax5toast-warning-bg, $ax5toast-warning-color);
        }
        &.danger {
            @include toast-variant($ax5toast-danger-text, $ax5toast-danger-bg, $ax5toast-danger-color);
        }
    }

    &.bottom-left {
        left: 0;
        bottom: 0;

        .ax5-ui-toast {
            @include animation(ax-toast-top $ax5toast-easing-time $ax5toast-easing);
            &.removed {
                @include animation(ax-toast-removed-bottom $ax5toast-easing-time ease forwards);
            }
            &.destroy {
                @include animation(ax-toast-destroy $ax5toast-easing-time ease forwards);
            }
        }
    }
    &.bottom-right {
        right: 0;
        bottom: 0;

        .ax5-ui-toast {
            @include animation(ax-toast-top $ax5toast-easing-time $ax5toast-easing);
            &.removed {
                @include animation(ax-toast-removed-bottom $ax5toast-easing-time ease forwards);
            }
            &.destroy {
                @include animation(ax-toast-destroy $ax5toast-easing-time ease forwards);
            }
        }

    }

    &.top-left {
        left: 0;
        top: 0;

        .ax5-ui-toast {
            @include animation(ax-toast-bottom $ax5toast-easing-time $ax5toast-easing);

            &.removed {
                @include animation(ax-toast-removed-top $ax5toast-easing-time ease forwards);
            }
            &.destroy {
                @include animation(ax-toast-destroy $ax5toast-easing-time ease forwards);
            }
        }
    }

    &.top-right {
        right: 0;
        top: 0;

        .ax5-ui-toast {
            @include animation(ax-toast-bottom $ax5toast-easing-time $ax5toast-easing);
            &.removed {
                @include animation(ax-toast-removed-top $ax5toast-easing-time ease forwards);
            }
            &.destroy {
                @include animation(ax-toast-destroy $ax5toast-easing-time ease forwards);
            }
        }
    }

}