@import '../../../styles/theme/index.less';
@import '../../../styles/antd/popover.less';
@import '../../../styles/antd/radio.less';
@import '../../../styles/antd/message.less';
@import '../../../styles/antd/card.less';

@mi-layout: ~'@{mi-prefix}layout';
@ant: ant;

.@{mi-layout} {
    transition: all @mi-anim-duration ease;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
    padding-left: @mi-side-width;
    min-height: 100vh;
    &::-webkit-scrollbar {
        display: none;
    }

    &-header {
        transition: all @mi-anim-duration ease;
        .flex(center, space-between);
        position: fixed;
        top: 0;
        left: @mi-side-width;
        width: calc(100% - @mi-side-width - 2rem);
        height: @mi-header-height;
        line-height: unset;
        background-color: var(--mi-header-bg, @mi-header-bg);
        background-image: linear-gradient(315deg, var(--mi-header-bg-grandient-s, @mi-header-bg-grandient-s) 0%, var(--mi-header-bg-grandient-e, @mi-header-bg-grandient-e) 74%);
        .properties(margin, 16);
        .properties(padding-left, 16);
        .properties(padding-right, 16);
        .border-radius(48);
        border: 1px solid var(--mi-header-border, @mi-header-border);
        backdrop-filter: blur(36px);
        z-index: @mi-z-index-modal;

        &-left,
        &-right {
            .flex();
            height: @mi-header-height;
        }

        &-trigger {
            .flex();
            cursor: pointer;
            height: @mi-header-height;
            transition: all @mi-anim-duration ease;
            position: relative;

            .@{ant}icon {
                .properties(width, 32);
                .properties(height, 32);
                .flex();
                .border-radius-circle();
                background: var(--mi-header-trigger-bg, @mi-header-trigger-bg);
                color: var(--mi-font, @mi-font);
                .properties(font-size, 18);
                cursor: pointer;
            }

            &&-min {
                .properties(padding-left, 16);
                .properties(padding-right, 16);
                .properties(font-size, 14);
                .letter-spacing();
                .flex();

                @media only screen and (max-width: 767px) {
                    .properties(padding-left, 8);
                    .properties(padding-right, 8);
                }

                .@{ant}icon {
                    color: var(--mi-font, @mi-font);
                }

                .@{mi-prefix}dropdown {
                    height: 100%;
                    .flex();
                }
            }

            &-no-bg {
                .@{ant}icon {
                    background: none;
                }
            }
        }

        &-notice {
            height: 100%;
        }

        &-palette {
            .flex();
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            .properties(grid-gap, 16);
            .properties(padding, 16);

            &-item {
                .flex(center, center, column);
                .border-radius(8);
                cursor: pointer;
                position: relative;
            }

            &-thumb {
                .properties(margin-bottom, 16);
                .properties(width, 80);
                .properties(height, 120);
                .border-radius(8);
                .flex();
                .linear-gradient-background();
                border: 2px solid transparent;
                transition: all @mi-anim-duration ease;
                overflow: hidden;
                position: relative;

                &:before {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    content: '';
                    .border-radius(8);
                    .linear-gradient-background();
                    opacity: 0;
                    transform: scale(0);
                    transition: all @mi-anim-duration ease;
                }

                > img {
                    .border-radius(8);
                    transition: all @mi-anim-duration ease;
                }
            }

            &-selected {
                .flex();
                width: 100%;
                height: calc(100% - 38px);
                opacity: 0;
                transform: scale(0);
                transition: all @mi-anim-duration ease;
                position: absolute;
                left: 0;
                top: 0;

                > .anticon {
                    .properties(font-size, 32);
                    color: var(--mi-theme, @mi-theme);
                }
            }

            &-active &-thumb:before,
            &-active &-selected {
                opacity: 1;
                transform: scale(1);
            }

            &-active &-thumb {
                border-color: var(--mi-theme, @mi-theme);

                &:before {
                    opacity: .7;
                }
            }

            &-radio {
                width: 100%;
                .flex();

                .@{ant}-radio-wrapper {
                    margin: 0;
                }
            }
        }

        &-dropdown {
            .flex();
            height: 100%;
        }
    }

    &-side {
        background-color: var(--mi-side-bg, @mi-side-bg);
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        transition: all @mi-anim-duration ease;
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        overflow: hidden;
        z-index: @mi-z-index-top;

        &-logo {
            .flex();
            position: relative;
            width: @mi-side-width;
            height: @mi-side-height;
            background: var(--mi-side-bg, @mi-side-bg);
            transition: all @mi-anim-duration ease;
            .properties(padding-left);
            .properties(padding-right);
            .text-ellipsis();
            cursor: pointer;
            color: var(--mi-theme, @mi-theme);

            &-img {
                width: @mi-side-logo-size;
                height: @mi-side-logo-size;
                .border-radius-circle();
                border: 2px solid var(--mi-theme, @mi-theme);
                .linear-gradient-background();
                transition: all @mi-anim-duration ease;
                overflow: hidden;

                > img {
                    width: 100%;
                    height: 100%;
                    .border-radius-circle();
                    transform: scale(1.1);
                    object-fit: cover;
                }

                &:hover {
                    transform: rotate(360deg);
                }
            }

            &-site {
                .flex();
                .text-ellipsis();

                svg {
                    .font-size(30);
                    color: var(--mi-theme, @mi-theme);
                }

                > h1 {
                    .text-ellipsis();
                    .linear-gradient-text();
                    margin-top: 0;
                    margin-bottom: 0;
                    margin-right: 0;
                    .font-size(20);
                    font-weight: bold;
                    .properties(margin-left, 12);
                    transition: all @mi-anim-duration ease-in-out;
                    .flex();
                    zoom: 1;
                }
            }

            &-column {
                height: @mi-side-large-height;
            }

            &-column &-site {
                flex-direction: column;
            }

            &&-column &-img {
                width: @mi-side-logo-large-size;
                height: @mi-side-logo-large-size;
                .properties(margin-bottom);
            }
        }

        &-menu-drawer {
            .@{ant}-menu.@{ant}-menu-dark {
                height: calc(100vh - @mi-side-large-height);
            }
        }

        &-has-bg {
            > .ant-layout-sider-children {
                backdrop-filter: blur(16px);
            }

            .@{mi-layout} {
                &-side {
                    &-logo {
                        background-color: transparent;
                    }
                }
            }
        }
    }

    &-breadcrumb {
        .properties(padding-left, 24);
	    .properties(padding-right, 24);
	    .properties(padding-top, 16);
	    .properties(padding-bottom, 16);
        .flex(center, flex-start);
        flex-wrap: nowrap;
        .text-ellipsis();
	    transition: all @mi-anim-duration ease-in-out;
        width: calc(100% - @mi-side-width);
        .properties(font-size, 14);
        background: var(--mi-breadcrumb-bg, @mi-breadcrumb-bg);
        position: fixed;
        left: @mi-side-width;
        top: calc(@mi-header-height + 1rem);
        z-index: @mi-z-index;

        span {
            color: var(--mi-font, @mi-font);
            .flex(center, flex-start);

            a {
                .flex();

                .anticon {
                    color: var(--mi-theme, @mi-theme);
                }
            }

            a, a:active, a:hover, a:visited {
                color: var(--mi-theme, @mi-theme);
            }

            .anticon {
                .font-size(14);
                .properties(margin-right, 6);
                vertical-align: -1px;
                color: var(--mi-font, @mi-font);
            }

            &:last-child {
                color: var(--mi-font, @mi-font);

                a {
                    color: var(--mi-font, @mi-font);
                }
            }
        }

        &-separator {
            .properties(margin-right);
            .properties(margin-left);
        }

        &-item {
            &:last-child {
                span {
                    &:last-child {
                        display: none;
                    }
                }
            }
        }
    }

    &-content {
        background: var(--mi-content-bg, @mi-content-bg);
        color: var(--mi-content-text, @mi-content-text);
        position: relative;

        &-custom {
            width: 100%;
            min-height: 100%;
            height: auto;
            padding-top: @mi-content-padding-top + .5;
            background: var(--mi-content-bg, @mi-content-bg);
            .properties(padding-left, 16);
            .properties(padding-right, 16);
            .properties(padding-bottom, 72);
            position: absolute;
            left: 0;
            top: 0;
        }

        &-drop {
            height: var(--mi-content-padding-top, @mi-content-padding-top);
            z-index: @mi-z-index + 1;
            position: fixed;
            top: 0;
            left: 0;
            background: var(--mi-content-drop-bg, @mi-content-drop-bg);
            width: 100%;
            backdrop-filter: blur(21px);
            box-shadow: 0 0 10px var(--mi-header-box-shadow, @mi-header-box-shadow);
        }
    }

    &-footer {
        background: var(--mi-footer-bg, @mi-footer-bg);
        color: var(--mi-font, @mi-font);
        .flex();
        .properties(padding, 24);
        margin-top: -1px;
        transition: all var(--mi-anim-duration, @mi-anim-duration) ease;
	    z-index: @mi-z-index;
        position: absolute;
        bottom: 0;
        width: 100%;
        .properties(margin-left, -16);

        &-content {
            color: var(--mi-font, @mi-font);
            text-align: center;
            .letter-spacing();

            a,
            a:hover,
            a:active,
            a:link,
            a:visited {
                color: var(--mi-theme, @mi-theme);
            }
        }
    }

    &-side {
        &-collapsed {
            && + .@{mi-layout} {
                padding-left: var(--mi-side-width-sm, @mi-side-width-sm);

                .@{mi-layout} {
                    &-header {
                        left: var(--mi-side-width-sm, @mi-side-width-sm);
                        width: calc(100% - @mi-side-width-sm - 2rem);
                    }

                    &-route-history {
                        left: var(--mi-side-width-sm, @mi-side-width-sm);
                        width: calc(100% - @mi-side-width-sm);
                    }
                }
            }

            .@{mi-layout} {
                &-side {
                    &-logo {
                        width: var(--mi-side-width-sm, @mi-side-width-sm);
                        .properties(height, 98);
                        .properties(margin-top, 24);
    
                        &-column .@{mi-layout}-side-logo-img {
                            .properties(width, 40);
                            .properties(height, 40);
                            margin-bottom: 0;
                        }
    
                        &-site > h1 {
                            opacity: 0;
                            visibility: hidden;
                        }
                    }
                }
            }
        }
    }

    &-header {
        &-trigger {
            .@{mi-layout}-breadcrumb {
                position: absolute;
                left: 0;
                top: 0;
                background: transparent;
                width: auto;
                height: var(--mi-header-height, @mi-header-height);
                .properties(padding-left, 24);
                .properties(padding-right, 16);
                padding-top: 0;
                padding-bottom: 0;

                &-item:first-child {
                    .anticon {
                        display: none;
                    }
                }
            }
        }
    }
}

@media only screen and (max-width: 768px) {
    .@{mi-layout} {
        padding-left: 0;

        &-container &-side-collapsed + & {
            padding-left: 0;
        }

        &-header,
        &-content &-route-history,
        &-container &-side-collapsed + & &-header,
        &-container &-side-collapsed + & &-route-history {
            left: 0;
            width: calc(100% - 2rem);
        }

        &-content &-route-history,
        &-container &-side-collapsed + & &-route-history {
            width: 100%;
        }

        &-side,
        &-breadcrumb {
            display: none;
        }
    }
}