@import '../../../styles/theme/index.less';

@mi-search: ~'@{mi-prefix}search';
.@{mi-search} {
    .flex();
    .properties(height, 42);
    .properties(width, 360);
    position: relative;
    z-index: var(--mi-z-index-modal, @mi-z-index-modal);

    &-input {
        width: 100%;
        height: 100%;
        .text-ellipsis();
        .properties(padding-top, 6);
        .properties(padding-bottom, 6);
        .properties(padding-left, 16);
        .properties(padding-right, 16);
        color: var(--mi-search-text, @mi-search-text);
        border: 1px solid var(--mi-theme, @mi-theme);
        background-color: var(--mi-search-input-bg, @mi-search-input-bg);
        background-image: linear-gradient(315deg, var(--mi-search-input-gradient-s, @mi-search-input-gradient-s) 0%, var(--mi-search-input-gradient-e, @mi-search-input-gradient-e) 74%);
        .properties(font-size, 14);
        .properties(line-height, 22);
        .letter-spacing();
        transition: all var(--mi-anim-duration, @mi-anim-duration) ease;
        list-style: none;
        box-sizing: border-box;
        position: relative;

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

    &-has-suffix {
        .properties(padding-right, 42);
    }

    &-suffix {
        position: absolute;
        .properties(right, 16);
        color: var(--mi-search-suffix, @mi-search-suffix);
        cursor: pointer;
    }

    &-list {
        width: 100%;
        .properties(height, 360);
        position: absolute;
        border: 1px solid var(--mi-theme, @mi-theme);
        left: 0;
        .properties(top, 44);
        overflow: hidden;
        background-color: var(--mi-search-list-bg, @mi-search-list-bg);
        background-image: linear-gradient(315deg, var(--mi-search-list-gradient-s, @mi-search-list-gradient-s) 0%, var(--mi-search-list-gradient-e, @mi-search-list-gradient-e) 74%);
        transition: all var(--mi-anim-duration, @mi-anim-duration) ease;
        transform-origin: 0 0;
        z-index: var(--mi-z-index-top, @mi-z-index-top);
    }

    &-items {
        .flex(flex-start, flex-start, column);
        .letter-spacing();
        .properties(padding-top, 6);
        .properties(padding-bottom, 6);
        .properties(padding-left, 16);
        .properties(padding-right, 16);
        width: 100%;
        height: calc(100% - 72px);
        transition: all var(--mi-anim-duration, @mi-anim-duration) ease;
        position: absolute;
        left: 0;
        top: 0;
        overflow-x: hidden;
        overflow-y: scroll;

        &::-webkit-scrollbar {
            display: none;
        }
    }

    &-item {
        width: 100%;
        .properties(font-size, 14);
        .properties(padding-top, 16);
        .properties(padding-bottom, 16);
        color: var(--mi-search-text, @mi-search-text);
        border-bottom: 1px solid var(--mi-search-list-item-border-bottom, @mi-search-list-item-border-bottom);
        cursor: pointer;
        .text-ellipsis();
        overflow: unset;
        .flex(center, flex-start);
        flex-wrap: nowrap;

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

        &-avatar {
            .properties(width, 24);
            .properties(height, 24);
            .properties(margin-right);
            .border-radius-circle();
            border: 1px solid var(--mi-theme, @mi-theme);
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                transform: scale(1.1);
                .border-radius-circle();
                .linear-gradient-background();
            }
        }

        .anticon {
            .properties(font-size, 20);
            .properties(margin-right, 16);
        }

        &-info {
            > div {
                margin-bottom: 0;
            }

            &-has-content {
                > div {
                    .properties(margin-bottom, 4);

                    &:first-child {
                        .properties(font-size, 16);
                        font-weight: bold;
                    }

                    &:last-child {
                        margin-bottom: 0;
                        color: var(--mi-search-list-sub-info, @mi-search-list-sub-info);
                    }
                }
            }
        }

        .info {
            .title {
                .properties(font-size, 16);
                .properties(margin-bottom);
                font-weight: bold;
            }
        }
    }

    &-pagination {
        .flex();
        .properties(font-size, 14);
        .properties(padding-top, 24);
        .properties(padding-bottom, 24);
        .properties(margin-left, 16);
        .properties(margin-right, 16);
        border-top: 1px solid var(--mi-search-list-page-border-top, @mi-search-list-page-border-top);
        .letter-spacing();
        position: absolute;
        bottom: 0;
        left: 0;
        width: calc(100% - 32px);
        .properties(height, 72);


        &-page,
        &-total {
            .flex();
            .properties(margin-right);
            color: var(--mi-search-text, @mi-search-text);

            span {
                .properties(margin-left, 4);
                .properties(margin-right, 4);
                .text-ellipsis();

                &.prev,
                &.next {
                    transition: all var(--mi-anim-duration, @mi-anim-duration) ease;
                    color: var(--mi-search-text, @mi-search-text);
                    .properties(font-size, 18);
                    .flex();
                    cursor: pointer;
                }

                &.disabled {
                    color: var(--mi-search-list-disabled, @mi-search-list-disabled);
                    cursor: not-allowed;
                }
            }

            input {
                .properties(width, 32);
                .properties(height, 24);
                border: 1px solid var(--mi-search-list-page-input-border, @mi-search-list-page-input-border);
                .border-radius();
                .flex();
                text-align: center;
                .properties(margin-left, 4);
                .properties(margin-right);
                color: var(--mi-search-list-page-input-text, @mi-search-list-page-input-text);
                outline: none;

                &:hover,
                &:focus {
                    outline: none;
                    border: 1px solid var(--mi-search-list-page-input-border, @mi-search-list-page-input-border);
                }
            }
        }

        &-total {
            margin-right: 0;
        }
    }

    &-no-data,
    &-error,
    &-loading {
        .flex(center, center, column);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: var(--mi-search-no-data, @mi-search-no-data);

        > .anticon {
            .properties(font-size, 32);
            .properties(margin-bottom, 16);
        }
    }

    &-error {
        color: var(--mi-error, @mi-error);
        .properties(padding, 16);

        .anticon {
            .properties(font-size, 32);
        }
    }

    &-loading {
        &-spinner {
            .properties(width, 80);
            .properties(height, 80);
            display: inline-block;
            overflow: hidden;
            background: transparent;
        }

        &-anim {
            width: 100%;
            height: 100%;
            position: relative;
            transform: translateZ(0) scale(0.8);
            backface-visibility: hidden;
            transform-origin: 0 0;

            div {
                box-sizing: content-box;
            }

            > div {
                transform: scale(0.8);
                transform-origin: 50px 50px;

                > div {
                    animation: mi-anim-move 3s linear infinite;
                    position: absolute;

                    div:nth-child(1) {
                        .properties(width, 36);
                        .properties(height, 36);
                        .border-radius-circle();
                        border: 6px solid var(--mi-theme, @mi-theme);
                        background: transparent;
                    }

                    div:nth-child(2) {
                        .properties(width, 8.5);
                        .properties(height, 25.5);
                        transform: rotate(-45deg);
                        background: var(--mi-theme, @mi-theme);
                        border-radius: 0 0 4px 4px;
                        position: absolute;
                        .properties(top, 34);
                        .properties(left, 42.5);
                    }
                }
            }
        }

        &-text {
            .properties(margin-top, 16);
            .letter-spacing(4);
        }
    }

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

    &-mask {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: var(--mi-z-index-top, @mi-z-index-top);
    }
}