.c-sidebar-right {
    .pf;
    .rt(0,@header-height + @bread-height);
    .z(400);
    bottom: 0;
    .w(@aside-right);
    background-color: #fff;
    border-left: 1px solid #eee;
    box-sizing: border-box;

    &.show-toggle {
        background-color: @bg-light;
    }
}

@media screen and (max-width: @smallpc) {
    .c-sidebar-right {
        .pr;
        width: 100%;
        top: 0;
        &.show-toggle {
            background-color: #fff;
            .pf;
            .rt(0,@header-height + @bread-height);
            .z(400);
            bottom: 0;
            .w(@aside-right);
        }
    }
}

.c-sidebar-right-inner {
    .size(100%);
    overflow-y: auto;

    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-track,
    &::-webkit-scrollbar-track-piece {
        background-color: #fafafa;
        border-radius: 6px;
    }

    &::-webkit-scrollbar-thumb {
        background-color: #eee;
        border-radius: 6px;
    }

    &::-webkit-scrollbar-button,
    &::-webkit-scrollbar-corner,
    &::-webkit-resizer {
        display: none;
    }
}

.c-sidebar-right-title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 300;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
    border-bottom: 1px solid #ebeef5;

    .u-icon {
        width: 24px;
        height: 24px;
        margin-right: 10px;
    }
}

.c-sidebar-right-list {
    .u-item {
        .db;
        height: 48px;
        line-height: 48px;
        background-color: #fff;
        color: #303133;
        cursor: pointer;
        border-bottom: 1px solid #ebeef5;
        font-size: 13px;
        font-weight: 500;
        transition: border-bottom-color 0.3s;
        outline: none;
        .pr;

        &:hover {
            color: @primary;
        }

        &:after {
            content: "\e6e0";
            .pa;
            .rt(0,50%);
            transform: translateY(-50%);
            font-family: element-icons !important;
            speak: none;
            font-style: normal;
            font-weight: 400;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            vertical-align: baseline;
            display: inline-block;
            -webkit-font-smoothing: antialiased;
        }
    }
}

// 折叠相关逻辑
.c-sidebar-right-toggle {
    display: block;
    .pa;
    .lb(-21px, calc(50% - 20px));
    width: 20px;
    height: 40px;
    line-height: 40px;
    .pointer;
    text-align: center;
    background-color: @bg-light;
    border-left: 1px solid #eee;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    border-radius: 0px 2px 2px 0px;
    font-size: 16px;
    color: #999;

    &:hover {
        color: #222;
    }

    &.close-sidebar-right {
        left: 0;
    }

    svg {
        fill: @color;
    }
}

.closeLeftSidebar() {
    transition: 0.2s ease-in-out;
    transform: translateX(100%);
}

.openLeftSidebar() {
    transition: 0.2s ease-in-out;
    transform: translateX(0);
}

.c-sidebar-right.is-close {
    .closeLeftSidebar();

    .c-sidebar-right-toggle {
        transition: 0.2s ease-in-out;
        transform: translateX(-100%);
    }
}

.c-sidebar-right.is-open {
    .openLeftSidebar();

    .c-sidebar-right-toggle {
        transition: 0.2s ease-in-out;
        transform: translateX(0);
    }
}

@media screen and (max-width: @ipad) {
    .c-sidebar-right-toggle {
        // .none;
    }

    .c-sidebar-right.isopen {
        box-shadow: 2px 0 3px rgba(0, 0, 0, 0.1);
    }
}

// 笔记本<1440 缩小双边栏
// @media screen and (max-width:@notebook){
//     .c-sidebar-right{
//         .w(@aside-right - 20px);
//     }
// }

// 平板横屏
@media screen and (max-width: @smallpc) {
    // .c-sidebar-right{
    //     .ps;
    //     .w(auto);
    //     border-left:none;
    // }
}

@media print {
    .c-sidebar-right {
        .none;
    }
}