@use '@/styles/var.scss' as *;

.sidebar-container {
    :deep(.el-menu) {
        user-select: none;
        background: none;
        width: 100%;
        padding: 0 7px;

        .el-menu-item {
            border-radius: 4px;
            background-color: var(--el-menu-item-bg-color);
            margin: 7px 0;
            height: 42px;
            box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1);
            box-sizing: border-box;

            &:hover {
                .el-icon {
                    color: var(--el-color-primary);
                }

                span {
                    color: var(--el-color-primary);
                }
            }

            &.is-active {
                background-color: var(--el-menu-item-bg-color-active);
                box-shadow: 0px 0px 4px rgba(0, 94, 235, 0.1), inset 0 0 0 2px var(--el-color-primary);

                &::before {
                    position: absolute;
                    border-radius: 4px;
                    left: 12px;
                    width: 4px;
                    height: 14px;
                    content: '';
                    background: var(--el-color-primary);
                }
            }
        }

        .el-sub-menu {
            &.is-active {
                .el-sub-menu__title {
                    span {
                        color: var(--el-color-primary);
                    }

                    .el-icon {
                        color: var(--el-color-primary);
                    }
                }
            }

            .el-sub-menu__title {
                background-color: var(--el-menu-item-bg-color);
                box-shadow: 0 0 4px rgba(0, 94, 235, 0.1);
                margin-top: 7px;
                height: 42px;
                border-radius: 4px;

                &:hover {
                    .el-icon {
                        color: var(--el-color-primary);
                    }

                    span {
                        color: var(--el-color-primary);
                    }
                }
            }

            .el-menu {
                padding: 0;

                .el-menu-item {
                    box-shadow: none;
                    padding-left: 35px;
                }
            }
        }
    }
}

:deep(.sidebar-container-popper) {
    .el-menu {
        background-color: var(--el-menu-bg-color);
        padding: 4px 8px;
    }
}

:deep(.el-sub-menu__title) {
    padding-right: 0;
}

.p-mr-5 {
    margin-right: 5px;
}
