@import 'commons';

$m-toast-icon-size: 32px;
$m-toast-min-width: 340px;
$m-toast-max-width: 768px;

@mixin m-toast-skin-default($color, $background-color) {
    .m-toast {
        &__wrap {
            border-color: $color;
            background-color: $background-color;
        }

        &__icon {
            color: $color;
        }
    }
}

.m-toast {
    text-align: left;
    position: fixed;

    &__wrap {
        transition: transform $m-transition-duration ease;
        position: relative;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        background: $m-color-grey-lightest;
        box-shadow: $m-box-shadow-sm;
    }

    &__sreen-reader-only {
        @include m-visually-hidden();
    }

    &__icon {
        display: flex;
        padding: $m-space 0 $m-space $m-space;

        svg {
            @include m-font-size('h2');
        }
    }

    &__body {
        display: flex;
        flex: 1 0 50%;
        flex-flow: wrap;
        padding: $m-space;
    }

    &__actions {
        display: flex;
        flex: 1 0 100%;
        padding: $m-space-sm 0 0;
        text-transform: uppercase;
    }

    &__text {
        display: flex;
        flex: 1 0 100%;

        p,
        div /deep/ p:first-child {
            margin-top: 0;
        }
    }

    &__close-button {
        align-self: flex-start;
        margin: $m-space-2xs $m-space-2xs 0 0;

        .m-button__icon .m-icon {
            @include m-font-size('sm');

            height: #{$m-font-size-sm * 1px};
            color: $m-color-interactive-light;
        }
    }

    &.m--is-leave-active {

        &,
        .m-toast__wrap {
            opacity: 0;
            transition: opacity $m-transition-duration ease-in-out;
        }
    }

    &.m--is-desktop {
        min-width: $m-toast-min-width;
        max-width: $m-toast-min-width;

        &.m--is-left {
            left: $m-space;
        }

        &.m--is-center {
            max-width: $m-toast-max-width;
            left: $m-space;
            right: $m-space;
            margin: 0 auto;
        }

        &.m--is-right {
            right: $m-space;
        }

        &.m--is-bottom {
            bottom: $m-space-md;
        }
    }

    &.m--is-mobile {
        left: $m-space;
        right: $m-space;

        &.m--is-bottom {
            bottom: $m-space;
        }
    }

    &.m--is-top {
        top: $m-space;

        .m-toast__wrap {
            border-bottom: $m-border-width-lg solid;
            border-radius: $m-border-radius $m-border-radius 0 0;
        }

        &.m--is-enter-active {
            .m-toast__wrap {
                transform: translateY(-130%);
            }
        }
    }

    &.m--is-bottom {
        .m-toast__wrap {
            border-top: $m-border-width-lg solid;
            border-radius: 0 0 $m-border-radius $m-border-radius;
        }

        &.m--is-enter-active {
            .m-toast__wrap {
                transform: translateY(130%);
            }
        }
    }

    &.m--is-state-confirmation {
        @include m-toast-skin-default($m-color-success, $m-color-success-lightest);
    }

    &.m--is-state-information {
        @include m-toast-skin-default($m-color-interactive, $m-color-information);
    }

    &.m--is-state-warning {
        @include m-toast-skin-default($m-color-warning, $m-color-warning-lightest);
    }

    &.m--is-state-error {
        @include m-toast-skin-default($m-color-error, $m-color-error-lightest);
    }
}