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

.@{veui-prefix}-alert {
    display: flex;
    align-items: flex-start;
    line-height: @veui-alert-line-height;
    .padding(@veui-alert-padding-y, @veui-alert-padding-x);
    border: 1px solid transparent;
    border-radius: @veui-alert-border-radius;
    font-size: @veui-alert-font-size-s;

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

    &-state,
    &-nav,
    &-close {
        display: flex;
        align-items: center;
    }

    &-state {
        height: @veui-alert-line-height * @veui-alert-font-size-s;
        margin-right: @veui-alert-content-spacing-before;
    }

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

    &-nav {
        .@{veui-prefix}-icon {
            .veui-icon-size(@veui-alert-icon-size-aux);
        }

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

    &-close {
        .size(@veui-alert-icon-size-s, @veui-alert-line-height * @veui-alert-font-size-s);
        .@{veui-prefix}-button {
            color: @veui-alert-close-color;
        }
    }

    &-nav {
        white-space: nowrap;
        margin-right: @veui-alert-content-spacing-after;
        color: @veui-alert-pages-font-color;
        &-indicator {
            padding: 0 @veui-alert-pages-spacing;
            font-variant-numeric: tabular-nums;
        }
    }

    &-content {
        flex-grow: 1;
        margin-right: @veui-alert-content-spacing-after;

        &-title {
            font-weight: @veui-alert-title-font-weight;
            line-height: @veui-alert-title-line-height + 0.1;
            margin-bottom: @veui-alert-title-spacing-after;
        }

        &-message {
            box-shadow: transparent 0 0;
            line-height: @veui-alert-line-height;
        }

        &-extra {
            float: right;
            display: flex;
            margin-left: @veui-alert-content-spacing-after;
            margin-top: ((@veui-alert-line-height * @veui-alert-font-size-s) - @veui-alert-font-size-s) / 2;
            .veui-button[ui~="text"] {
                background: transparent;
                color: @veui-alert-operate-text-color;
            }
        }
    }

    .make-state-message(@state) {
        &-@{state} {
            @fg-color-name: ~"veui-alert-icon-color-@{state}";
            @bg-color-name: ~"veui-alert-background-color-@{state}";
            @border-color-name: ~"veui-alert-border-color-@{state}";
            background-color: @@bg-color-name;
            border-color: @@border-color-name;

            .@{veui-prefix}-alert-icon {
                color: @@fg-color-name;
            }
        }
    }

    .make-state-message(success);
    .make-state-message(warning);
    .make-state-message(info);
    .make-state-message(error);

    /* 有title样式 */
    &&-titled {
        padding: @veui-alert-padding-top-titled @veui-alert-padding-x @veui-alert-padding-bottom-titled @veui-alert-padding-x;

        .@{veui-prefix}-alert-icon {
            .veui-icon-size(@veui-alert-icon-size-titled-s);
        }

        .@{veui-prefix}-alert-close {
            align-items: start;
        }
        .@{veui-prefix}-alert-content-extra {
            margin-right: -(@veui-alert-content-spacing-after + @veui-alert-icon-size-aux);
        }
    }
    &[ui~="normal"] {
        .@{veui-prefix}-alert-state,
        .@{veui-prefix}-alert-close {
            display: none;
        }
    }

    &[ui~="m"] {
        font-size: @veui-alert-font-size-m;
        .@{veui-prefix}-alert-state {
            height: @veui-alert-line-height * @veui-alert-font-size-m + 1;
        }
        .@{veui-prefix}-alert-close {
            .size(@veui-alert-icon-size-m, @veui-alert-line-height * @veui-alert-font-size-m + 1);
        }
        .@{veui-prefix}-alert-icon {
            .veui-icon-size(@veui-alert-icon-size-m);
        }
        .@{veui-prefix}-alert-content {
            &-extra {
                margin-top: (((@veui-alert-line-height * @veui-alert-font-size-m) + 1) - @veui-alert-font-size-m) / 2;
            }
            &-message {
                line-height: @veui-alert-line-height + 0.1;
            }
        }
        &.@{veui-prefix}-alert-titled {
            .@{veui-prefix}-alert-icon {
                .veui-icon-size(@veui-alert-icon-size-titled-m);
            }
        }
    }
}