@import '../../../styles/theme/index.less';
@import '../../../styles/antd/popover.less';
@import '../../../styles/antd/checkbox.less';

@mi-notice: ~'@{mi-prefix}notice';
@ant-popover: ant-popover;

.@{mi-notice} {
    z-index: var(--mi-z-index-top, @mi-z-index-top);

    &-icon {
        .flex();
        cursor: pointer;
        color: var(--mi-notice-text, @mi-notice-text);
    }

    &-content {
        color: var(--mi-notice-content-text, @mi-notice-content-text);
        .properties(max-height, 550);
        overflow: auto;
        &::-webkit-scrollbar {
            display: none;
        }
    }

    &-item {
        .properties(padding-top, 16);
        .properties(padding-bottom, 16);
        border-bottom: 1px solid var(--mi-notice-item-border, @mi-notice-item-border);

        &:first-child {
            padding-top: 0;
        }

        &:last-child {
            padding-bottom: 0;
            border-bottom: none;
        }

        &-default {
            .flex(center, flex-start);
        }

        &-avatar {
            .properties(min-width, 32);

            > img {
                transform: scale(1.1);
            }
        }

        &-info {
            .properties(max-width, 295);
            .flex(flex-start);
            flex-direction: column;
        }

        &-avatar + &-info {
            .properties(max-width, 250);
            .properties(margin-left, 12);
        }

        &-title,
        &-time {
            .properties(max-width, 250);
            .text-ellipsis();
            color: var(--mi-font, @mi-font);
        }

        &-title {
            .properties(margin-bottom, 4);
        }

        &-time {
            color: var(--mi-notice-time, @mi-notice-time);
            .properties(font-size, 12);
        }

        &-content {
            .properties(margin-bottom, 4);
            .properties(font-size, 12);
            color: var(--mi-notice-content, @mi-notice-content);
            overflow: hidden;
        }
    }

    &-empty {
        .properties(padding-left, 32);
        .properties(padding-right, 32);

        &-time {
            .flex();
            .properties(margin-bottom, 16);
        }

        &-week {
            .properties(margin-left, 16);
        }

        &-title {
            .properties(margin-top, 16);
            .properties(font-size, 32);
            font-weight: bold;
            .flex();
        }

        &-date {
            .properties(font-size, 18);
        }

        &-items {
            .flex(center, center, column);
            .properties(margin-top, 12);
        }

        &-item {
            .properties(margin-bottom);

            .ant-checkbox + span {
                color: var(--mi-font, @mi-font);
            }

            &:last-child {
                margin-bottom: 0;
            }
        }

        &-fine {
            .flex();
            .properties(margin-top, 16);
            .properties(margin-bottom, 16);
            .properties(font-size, 24);

            .anticon {
                .properties(margin-right);
            }
        }
    }

    &.@{mi-lang-en} {
        .@{mi-notice} {
            &-empty {
                &-items {
                    align-items: flex-start;
                    .properties(padding-left, 40);
                }
            }
        }
    }
}