@import '../style/default.less';

@pro-layout-sider-menu-prefix-cls: ~'@{ant-prefix}-pro-sider';

@nav-header-height: @pro-layout-header-height;

.@{pro-layout-sider-menu-prefix-cls} {
    position: relative;
    background-color: @layout-sider-background;
    border-right: 0;
    // FIXME: 临时修正(可能不会做兼容)
    z-index: 20;

    // 这里关掉了动画，不然使用无法兼容
    .@{ant-prefix}-menu {
        background: transparent;
    }

    &.@{ant-prefix}-layout-sider-light {
        .@{ant-prefix}-menu-item a {
            color: @heading-color;
        }
        .@{ant-prefix}-menu-item-selected a,
        .@{ant-prefix}-menu-item a:hover {
            color: @primary-color;
        }
    }

    &-logo {
        position: relative;
        display: flex;
        align-items: center;
        padding: 16px 16px;
        cursor: pointer;
        transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

        > a {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 32px;
        }

        img {
            display: inline-block;
            height: 32px;
            vertical-align: middle;
        }

        h1 {
            display: inline-block;
            height: 32px;
            margin: 0 0 0 12px;
            color: white;
            font-weight: 600;
            font-size: 18px;
            line-height: 32px;
            vertical-align: middle;
            animation: pro-layout-title-hide 0.3s;
        }
    }

    &-extra {
        margin-bottom: 16px;
        padding: 0 16px;
        &-no-logo {
            margin-top: 16px;
        }
    }

    &-menu {
        position: relative;
        z-index: 10;
        min-height: 100%;
        box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
    }

    .@{ant-prefix}-layout-sider-children {
        display: flex;
        flex-direction: column;
        height: 100%;

        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.15);
            border-radius: 3px;
            box-shadow: inset 0 0 5px rgba(37, 37, 37, 0.05);
        }

        /* 滚动条滑块 */
        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.05);
        }
    }

    &.@{ant-prefix}-layout-sider-collapsed {
        .@{ant-prefix}-menu-inline-collapsed {
            width: 48px;
        }
        .@{pro-layout-sider-menu-prefix-cls} {
            &-logo {
                padding: 16px 8px;
            }
        }
    }

    &.@{ant-prefix}-layout-sider.@{pro-layout-sider-menu-prefix-cls}-fixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99; // react pro-components: z-index: 100;
        height: 100%;
        overflow: auto;
        overflow-x: hidden;
        box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
        > .@{ant-prefix}-menu-root {
            :not(.@{pro-layout-sider-menu-prefix-cls}-link-menu) {
                height: ~'calc(100vh - @{nav-header-height})';
                overflow-y: auto;
            }
        }
    }

    &-light {
        background-color: @component-background;
        box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);

        .@{ant-prefix}-layout-sider-children {
            ::-webkit-scrollbar-track {
                background: rgba(0, 0, 0, 0.06);
                border-radius: 3px;
                box-shadow: inset 0 0 5px rgba(0, 21, 41, 0.05);
            }

            /* 滚动条滑块 */
            ::-webkit-scrollbar-thumb {
                background: rgba(0, 0, 0, 0.12);
                border-radius: 3px;
                box-shadow: inset 0 0 5px rgba(0, 21, 41, 0.05);
            }
        }

        .@{pro-layout-sider-menu-prefix-cls}-logo {
            h1 {
                color: @primary-color;
            }
        }
        .@{ant-prefix}-menu-light {
            border-right-color: transparent;
        }

        .@{pro-layout-sider-menu-prefix-cls}-collapsed-button {
            border-top: @border-width-base @border-style-base
                @border-color-split;
        }
    }

    &-icon {
        width: 14px;
        vertical-align: baseline;
    }

    &-links {
        width: 100%;
        ul.@{ant-prefix}-menu-root {
            height: auto;
        }
    }

    &-collapsed-button {
        border-top: @border-width-base @border-style-base rgba(0, 0, 0, 0.25);
        .anticon {
            font-size: 16px;
        }
    }

    .top-nav-menu li.@{ant-prefix}-menu-item {
        height: 100%;
        line-height: 1;
    }
    .drawer .drawer-content {
        background: @layout-sider-background;
    }
}

// 修正菜单 collapsed 时，icon 与 title 的间距
.@{ant-prefix}-pro-menu-item {
    .anticon + .@{ant-prefix}-pro-menu-item-title {
        margin-left: 10px;
    }
}

@keyframes pro-layout-title-hide {
    0% {
        display: none;
        opacity: 0;
    }
    80% {
        display: none;
        opacity: 0;
    }
    100% {
        display: unset;
        opacity: 1;
    }
}