@import '../../../../packages/arcodesign/style/mixin.less';

.arcodesign-pc-menu {
    position: relative;
    width: 260px;
    box-sizing: border-box;
    transition: all .15s;
    border-right: 1px solid;
    .use-var(border-right-color, line-color);
    opacity: 1;
    min-height: 1000px;
    flex-shrink: 0;
    z-index: 1;
    &-inner {
        position: fixed;
        top: 60px;
        bottom: 0;
        transition: left 0.15s;
        left: -1px;
        display: flex;
        flex-direction: column;
    }
    &-header {
        flex: 0 0 auto;
        position: relative;
        width: 100%;
        padding: 20px 20px 0;
        box-sizing: border-box;
        cursor: pointer;
        text-align: center;
        .use-var(background-color, container-background-color);
        .arco-radio-button-inner {
            width: 80px;
            text-align: center;
            font-size: 16px;
            box-sizing: content-box;
        }
        .arco-radio-checked {
            .arco-radio-button-inner {
                .use-var(color, primary-color);
            }
        }
    }
    &-list {
        flex: 1;
        width: 260px;
        padding-top: 20px;
        overflow-y: hidden;
        overflow-x: hidden;
        .use-var(background-color, container-background-color);
        &:hover {
            overflow-y: auto;
        }
        .arco-menu-light.arco-menu-vertical {
            box-shadow: none;
        }
        .arco-menu {
            padding-bottom: 30px;
            background-color: transparent;
        }
        .arco-menu-inner {
            padding: 4px 12px;
        }
        .arco-menu-item {
            background-color: transparent;
            a {
                display: block;
            }
        }
        .arco-menu-group-title {
            background-color: transparent;
        }
        .arco-menu-item.arco-menu-selected {
            .use-var(background-color, card-background-color);
        }
        .arco-menu-item .arco-badge-dot {
            right: -4px;
        }
        .title-1 > .arco-menu-group-title {
            font-size: 16px;
            font-weight: bold;
            line-height: 24px;
            line-height: 40px;
            .use-var(color, font-color);
            text-transform: capitalize;
        }

        .title-2 > .arco-menu-group-title {
            text-transform: capitalize;
        }

        .title-2 {
            &.arco-menu-group {
                padding-left: 10px;
            }
        }

        .title-2 > .arco-menu-group:not(.title-1) > .arco-menu-group-title > span {
            padding-left: 0 !important;
            .use-var(color, sub-info-font-color);
        }
    }
}
