@charset "UTF-8";

@import "../core/index-noreset.scss";

@import "./scss/mixin";
@import "./scss/variable";

.#{$css-prefix}message {
    @include box-sizing;
    @include message-bounding();
    animation-duration: $motion-duration-standard;
    animation-timing-function: $motion-ease-in-out;

    .#{$css-prefix}message-close {
        color: $message-close-icon-color;
        font-size: 0;
        position: absolute;
        cursor: pointer;

        .#{$css-prefix}icon-close {
            @include icon-square-size($message-close-icon-size);
        }

        &:hover {
            color: $message-hover-close-icon-color;
        }
    }

    &.#{$css-prefix}message-success {
        &.#{$css-prefix}inline {
            @include message-shape(
                inline,
                $message-success-color-title-inline,
                $message-success-color-content-inline,
                $message-success-color-icon-inline,
                $message-success-color-bg-inline,
                $message-success-color-border-inline,
                none,
                $message-success-icon-content
            );
        }
        &.#{$css-prefix}addon {
            @include message-shape(
                toast,
                $message-success-color-title-addon,
                $message-success-color-content-addon,
                $message-success-color-icon-addon,
                transparent,
                transparent,
                none,
                $message-success-icon-content
            );
        }
        &.#{$css-prefix}toast {
            @include message-shape(
                toast,
                $message-success-color-title-toast,
                $message-success-color-content-toast,
                $message-success-color-icon-toast,
                $message-success-color-bg-toast,
                $message-success-color-border-toast,
                $message-shadow-toast,
                $message-success-icon-content
            );
        }
    }

    &.#{$css-prefix}message-warning {
        &.#{$css-prefix}inline {
            @include message-shape(
                inline,
                $message-warning-color-title-inline,
                $message-warning-color-content-inline,
                $message-warning-color-icon-inline,
                $message-warning-color-bg-inline,
                $message-warning-color-border-inline,
                none,
                $message-warning-icon-content
            );
        }
        &.#{$css-prefix}addon {
            @include message-shape(
                toast,
                $message-warning-color-title-addon,
                $message-warning-color-content-addon,
                $message-warning-color-icon-addon,
                transparent,
                transparent,
                none,
                $message-warning-icon-content
            );
        }
        &.#{$css-prefix}toast {
            @include message-shape(
                toast,
                $message-warning-color-title-toast,
                $message-warning-color-content-toast,
                $message-warning-color-icon-toast,
                $message-warning-color-bg-toast,
                $message-warning-color-border-toast,
                $message-shadow-toast,
                $message-warning-icon-content
            );
        }
    }

    &.#{$css-prefix}message-error {
        &.#{$css-prefix}inline {
            @include message-shape(
                inline,
                $message-error-color-title-inline,
                $message-error-color-content-inline,
                $message-error-color-icon-inline,
                $message-error-color-bg-inline,
                $message-error-color-border-inline,
                none,
                $message-error-icon-content
            );
        }
        &.#{$css-prefix}addon {
            @include message-shape(
                toast,
                $message-error-color-title-addon,
                $message-error-color-content-addon,
                $message-error-color-icon-addon,
                transparent,
                transparent,
                none,
                $message-error-icon-content
            );
        }
        &.#{$css-prefix}toast {
            @include message-shape(
                toast,
                $message-error-color-title-toast,
                $message-error-color-content-toast,
                $message-error-color-icon-toast,
                $message-error-color-bg-toast,
                $message-error-color-border-toast,
                $message-shadow-toast,
                $message-error-icon-content
            );
        }
    }

    &.#{$css-prefix}message-notice {
        &.#{$css-prefix}inline {
            @include message-shape(
                inline,
                $message-notice-color-title-inline,
                $message-notice-color-content-inline,
                $message-notice-color-icon-inline,
                $message-notice-color-bg-inline,
                $message-notice-color-border-inline,
                none,
                $message-notice-icon-content
            );
        }
        &.#{$css-prefix}addon {
            @include message-shape(
                toast,
                $message-notice-color-title-addon,
                $message-notice-color-content-addon,
                $message-notice-color-icon-addon,
                transparent,
                transparent,
                none,
                $message-notice-icon-content
            );
        }
        &.#{$css-prefix}toast {
            @include message-shape(
                toast,
                $message-notice-color-title-toast,
                $message-notice-color-content-toast,
                $message-notice-color-icon-toast,
                $message-notice-color-bg-toast,
                $message-notice-color-border-toast,
                $message-shadow-toast,
                $message-notice-icon-content
            );
        }
    }

    &.#{$css-prefix}message-help {
        &.#{$css-prefix}inline {
            @include message-shape(
                inline,
                $message-help-color-title-inline,
                $message-help-color-content-inline,
                $message-help-color-icon-inline,
                $message-help-color-bg-inline,
                $message-help-color-border-inline,
                none,
                $message-help-icon-content
            );
        }
        &.#{$css-prefix}addon {
            @include message-shape(
                toast,
                $message-help-color-title-addon,
                $message-help-color-content-addon,
                $message-help-color-icon-addon,
                transparent,
                transparent,
                none,
                $message-help-icon-content
            );
        }
        &.#{$css-prefix}toast {
            @include message-shape(
                toast,
                $message-help-color-title-toast,
                $message-help-color-content-toast,
                $message-help-color-icon-toast,
                $message-help-color-bg-toast,
                $message-help-color-border-toast,
                $message-shadow-toast,
                $message-help-icon-content
            );
        }
    }

    &.#{$css-prefix}message-loading {
        &.#{$css-prefix}inline {
            @include message-shape(
                inline,
                $message-loading-color-title-inline,
                $message-loading-color-content-inline,
                $message-loading-color-icon-inline,
                $message-loading-color-bg-inline,
                $message-loading-color-border-inline,
                none,
                $message-loading-icon-content
            );
        }
        &.#{$css-prefix}addon {
            @include message-shape(
                toast,
                $message-loading-color-title-addon,
                $message-loading-color-content-addon,
                $message-loading-color-icon-addon,
                transparent,
                transparent,
                none,
                $message-loading-icon-content
            );
        }
        &.#{$css-prefix}toast {
            @include message-shape(
                toast,
                $message-loading-color-title-toast,
                $message-loading-color-content-toast,
                $message-loading-color-icon-toast,
                $message-loading-color-bg-toast,
                $message-loading-color-border-toast,
                $message-shadow-toast,
                $message-loading-icon-content
            );
        }
    }

    &.#{$css-prefix}medium {
        @include message-size(
            $borderWidth: $message-size-m-border-width,
            $padding: $message-size-m-padding,
            $titlePadding: $message-size-m-title-content-padding,
            $titleFontSize: $message-size-m-title-font,
            $contentPadding: $message-size-m-title-content-padding,
            $contentMarginTop: $message-size-m-content-margin-top,
            $contentFontSize: $message-size-m-content-font,
            $iconSize: $message-size-m-icon
        );
        &.#{$css-prefix}title-content {
            @include vertial-align-middle(
                $message-size-m-title-font,
                $message-size-m-icon,
                'title'
            );
        }
        &.#{$css-prefix}only-content {
            @include vertial-align-middle(
                $message-size-m-content-font,
                $message-size-m-icon,
                'content'
            );
        }

        .#{$css-prefix}message-close {
            top: $message-size-m-close-top;
            right: $message-size-m-close-right;
        }

        &.#{$css-prefix}inline {
            border-radius: $message-size-m-border-radius;
        }

        &.#{$css-prefix}toast {
            border-radius: $message-size-m-border-radius-toast;
        }
    }

    &.#{$css-prefix}large {
        @include message-size(
            $borderWidth: $message-size-l-border-width,
            $padding: $message-size-l-padding,
            $titlePadding: $message-size-l-title-content-padding,
            $titleFontSize: $message-size-l-title-font,
            $contentPadding: $message-size-l-title-content-padding,
            $contentMarginTop: $message-size-l-content-margin-top,
            $contentFontSize: $message-size-l-content-font,
            $iconSize: $message-size-l-icon
        );

        &.#{$css-prefix}title-content {
            @include vertial-align-middle(
                $message-size-l-title-font,
                $message-size-l-icon,
                'title'
            );
        }
        &.#{$css-prefix}only-content {
            @include vertial-align-middle(
                $message-size-l-content-font,
                $message-size-l-icon,
                'content'
            );
        }

        .#{$css-prefix}message-close {
            top: $message-size-l-close-top;
            right: $message-size-l-close-right;
        }

        &.#{$css-prefix}inline {
            border-radius: $message-size-l-border-radius;
        }

        &.#{$css-prefix}toast {
            border-radius: $message-size-l-border-radius-toast;
        }
    }
}

@import "./rtl.scss";

.#{$css-prefix}message-wrapper-v2 {
    margin: 0;
    padding: 0;
    position: fixed;
    left: 0;
    z-index: 1001;
    width: 100%;
    pointer-events: none;
}
.#{$css-prefix}message-list {
    padding: 8px;
    text-align: center;

    .#{$css-prefix}message {
        display: inline-block;
        pointer-events: all;
    }
}


.#{$css-prefix}message-fade-leave {
    animation-duration: 300ms;
    animation-play-state: paused;
    animation-fill-mode: both;
    animation-timing-function: ease;
}

.#{$css-prefix}message-fade-leave.#{$css-prefix}message-fade-leave-active {
    animation-name: MessageFadeOut;
    animation-play-state: running;
}

@keyframes MessageFadeOut {
    0% {
        max-height: 150px;
        margin-bottom: 16px;
        opacity: 1;
    }
    100% {
        max-height: 0;
        margin-bottom: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
    }
}