@import "../lib.less";
@import "../variables/components/toast.less";

.@{veui-prefix}-toast {
    display: flex;
    align-items: flex-start;
    .padding(@veui-toast-padding-y - 1, @veui-toast-padding-x);
    position: absolute;
    max-width: @veui-toast-max-width;
    background-color: @veui-toast-background-color;
    color: @veui-toast-font-color;
    box-shadow: @veui-toast-shadow;
    font-size: @veui-toast-font-size;
    border-radius: @veui-toast-border-radius;
    line-height: @veui-toast-line-height;

    &-multiline {
        .padding(@veui-toast-padding-y-multiline, _);
    }

    &-state,
    &-close {
        display: flex;
        align-items: center;
        font-size: @veui-toast-font-size;
        height: @veui-toast-line-height;
    }

    &-close {
        margin-left: @veui-toast-padding-x;
    }

    &-state {
        margin-right: @veui-toast-content-spacing-before;
    }

    &-icon {
        .veui-icon-size(@veui-toast-icon-size);
    }

    &-close {
        .@{veui-prefix}-icon {
            .veui-icon-size(@veui-icon-size-aux);
            color: @veui-toast-icon-color-close;
        }

        .@{veui-prefix}-button {
            font-size: inherit;
        }
    }

    .veui-toast-style(@type) {
        @color-name: ~"veui-toast-icon-color-@{type}";
        @color: @@color-name;

        .@{veui-prefix}-toast-icon {
            color: @color;
        }
    }

    &-content {
        flex-grow: 1;

        &-title {
            color: @veui-toast-title-font-color;
            font-size: @veui-toast-font-size-title;
            font-weight: @veui-toast-title-font-weight;
            padding-bottom: @veui-toast-title-spacing-after;
            line-height: @veui-toast-line-height-title;
        }
    }

    &-success {
        .veui-toast-style(success);
    }

    &-warning {
        .veui-toast-style(warning);
    }

    &-info {
        .veui-toast-style(info);
    }

    &-error {
        .veui-toast-style(error);
    }

    /* 有title样式 */
    &&-titled {
        .padding(@veui-toast-padding-y-titled, @veui-toast-padding-x-titled);

        .@{veui-prefix}-toast-icon {
            .veui-icon-size(@veui-toast-icon-size-titled);
        }
        .@{veui-prefix}-toast {
            &-state {
                display: flex;
                justify-content: center;
                font-size: @veui-toast-font-size;
                height: @veui-toast-line-height-title;
                min-width: @veui-toast-line-height-title;
            }

            &-close {
                position: absolute;
                top: @veui-toast-padding-y-titled;
                right: @veui-toast-padding-x;
            }
        }

        .@{veui-prefix}-toast-close {
            align-items: start;
        }

        .@{veui-prefix}-toast-content {
            margin-right: @veui-toast-content-spacing;

            &-message {
                color: @veui-toast-title-message-color;
            }
        }
    }
}