@import '../../../../styles/theme/index.less';
@import '../../../../styles/core/list.less';
@import '../../../../styles/antd/table.less';
@import '../../../../styles/antd/drawer.less';
@import '../../../../styles/antd/button.less';
@import '../../../../styles/antd/input.less';

@mi-apps: ~'@{mi-prefix}apps';
.@{mi-apps} {
    .properties(padding-top, 24);
    position: relative;

    &-logo {
        .properties(width, 40);
        .properties(height, 40);
        .flex();
        margin: 0 auto;
        overflow: hidden;

        .anticon {
            font-size: 24px;
            .properties(font-size, 22);
            color: var(--mi-font, @mi-font);
        }
    }

    &-uploader {
        position: relative;

        &-image {
            position: relative;

            &-icon {
                .properties(width, 96);
                .properties(height, 96);
                border: 1px dashed var(--mi-border, @mi-border);
                .flex(center, center, column);
                .border-radius();
                color: var(--mi-font, @mi-font);
                position: relative;

                &:hover {
                    border-color: var(--mi-theme, @mi-theme);
                    color: var(--mi-theme, @mi-theme);
                }

                .anticon {
                    .properties(font-size, 24);
                    .properties(margin-bottom, 8);
                }

                > .ant-input {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 10;
                    opacity: 0;
                    background: transparent;
                    color: transparent;
                    cursor: pointer;
                }
            }

            &-preview {
                position: absolute;
                left: 0;
                top: 0;
                .properties(width, 96);
                .properties(height, 96);
                .flex();
                z-index: 20;
                overflow: hidden;
                border: 1px solid var(--mi-border, @mi-border);

                &-mask {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: 0;
                    background: var(--mi-mask, @mi-mask);
                    backdrop-filter: blur(25px);
                    overflow: hidden;
                    transition: all @mi-anim-duration ease;
                    .flex(center, center, column);

                    > .anticon {
                        .properties(font-size, 24);
                        color: var(--mi-font, @mi-font);
                        cursor: pointer;
                        transition: all @mi-anim-duration ease;

                        &:hover {
                            color: var(--mi-theme, @mi-theme);
                        }

                        &:first-child {
                            .properties(margin-bottom, 16);
                        }
                    }
                }

                &:hover &-mask {
                    height: 100%;
                }
            }
        }

        &.disabled &-image-preview:hover &-image-preview-mask {
            height: 0;
        }
    }

    &-view-image {
        overflow-x: hidden;
        overflow-y: auto;

        &-modal {
            img {
                .border-radius(8);
            }
        }
    }
}