// Admin Sidepanel
#sidebar {
    width : 100%;
    .questiongroup-list-group > li {
         background: linear-gradient(90deg, $active-green 0%, $active-green 5px, $g-200 5px, $g-200 100%); 
         padding: 0;
    }

    .questiongroup-list-group > li > div {
        &:hover {
            box-shadow    : inset 0 0 0 1px $grape75;
            background : linear-gradient(to right, $grape75 0px, $grape75 4px, $white 4px, $white 100%) !important;
        }
    }
    .button-sub-bar {
        min-height : 32px;
    }
    .dragPointer {
        cursor : move;
        &.disabled {
            color  : #999999;
            cursor : not-allowed;
        }
    }
    .question-question-list {
        .selected {
            padding-left               : 20px;
            background                 : /*!rtl:linear-gradient(to left, $primary 0px, $primary 8px, $white 8px, $white 100%)*/
                linear-gradient(to right, $g-300 0px, $g-300 8px, $white 8px, $white 100%);
            &.activated {
                background : /*!rtl:linear-gradient(to left, $primary 0px, $primary 8px, $white 8px, $white 100%)*/
                    linear-gradient(to right, $active-green 0px, $active-green 8px, $white 8px, $white 100%);
    
            }
            &.disabled {
                background : linear-gradient(to right, $g-400 0px, $g-400 8px, $white 8px, $white 100%) !important
            }
            transition-property        : all;
            transition-duration        : .25s;
            transition-timing-function : cubic-bezier(1, 0.5, 0.5, 1);
    
        
        }

        .question-question-list-item {
            margin      : 2px 2px 2px 12px;
            display     : flex;
            align-items : center;
            padding     : 0 1rem;
            .question-question-list-item-drag {
                margin : 10px 15px;
            }
            &.selected {
                padding-left : 20px;
                .question-question-list-item-drag {
                    margin : 10px 10px 10px 5px;
                }
                &:hover {
                    box-shadow    : inset 0 0 0 1px $grape75;
                    background : linear-gradient(to right, $grape75 0px, $grape75 8px, $white 8px, $white 100%);
                }
            }
            .question-question-list-item-link {
                padding   : 10px 25px 10px 10px;
                display   : inline-flex;
                flex-wrap : wrap;
            }
        }
        .question-question-list-item ~ .question-question-list-item {
            margin-top : 0px;
        }
    }
    .question_text_ellipsize {
        display       : inline-block;
        text-overflow : ellipsis;
        white-space   : nowrap;
        overflow      : hidden;
        padding-left  : 2px;
    }
    svg {
        color : $g-600;
    }
    .btn-primary.force.color.white.onhover {
        &:hover,
        &:active,
        &:focus {
            color : $white;
        }
    }
    .background.white {
        background-color : $white;
        box-shadow       : none;
    }
    .resize-handle {
        position   : absolute;
        margin     : auto;
        right      : 15px;
        top        : 0;
        bottom     : 0;
        height     : 100%;
        max-height : 35px;
        cursor     : col-resize;
        button {
            background-color : $white;
            outline          : 0;
            border           : none;
            &:focus, &:active, &:hover {
                outline          : 0 !important;
                background-color : $white !important;
                color            : $g-900;
            }
            cursor           : col-resize;
            width            : 100%;
            height           : 100%;
            text-align       : left;
            border-radius    : 0;
            padding          : 0 4px;
            i {
                font-size : 12px;
            }
        }
    }
    .menu-open {
        animation-name     : animate-gradient;
        animation-duration : 450ms;
        background         : radial-gradient(circle at center, $primary-bg_menuopen 0px, $primary-bg_menuopen 8px, $white 9px, $white 100%);
    }
   
    a:not(.btn, .nav-tabs .nav-link) {
        color       : $g-900;
        font-weight : $font-weight-normal;
    }
    li.dragged {
        color                      : $white;
        background                 : var(--bs-primary) none !important;
        padding-top                : 18px;
        padding-bottom             : 18px;
        transition-property        : all;
        transition-duration        : .1s;
        transition-timing-function : ease-in-out;
        .q-group {
            background : var(--bs-primary) !important;
        }
        a, svg, a:not(.btn, .nav-tabs .nav-link) {
            color : $white;
        }
    }
    .menu-selected {
        padding-left : 10px;
        background   : /*!rtl:linear-gradient(to left, $primary 0px, $primary 6px, $white 6px, $white 100%)*/
            linear-gradient(to right, $primary 0px, $primary 6px, $white 6px, $white 100%);
    }
    .menu-label {
        color       : $g-900;
        font-weight : $font-weight-600;
        font-size   : 14px;
        line-height : $line-height-20;
    }
    .subpanel {
        font-size : 14px;
        .list-group-item .wrapper {
            .title {
                color : $g-700;
            }
            .title.disabled {
                color : $g-400;
            }
            .icon {
                color : $g-700;
            }
        }
        .list-group-item.disabled .wrapper {
            .title {
                color : $g-400;
            }
        }
        &.level-0 {
            .menu-selected {
                background : /*!rtl:linear-gradient(to left, $primary-bg_selected_subpanel 0px, $primary-bg_selected_subpanel 6px, $white 6px, $white 100%)*/
                    linear-gradient(to right, $primary-bg_selected_subpanel 0px, $primary-bg_selected_subpanel 6px, $white 6px, $white 100%);
            }
            .selected {
                .wrapper {
                    .title {
                        color : $g-900;
                    }
                    .icon {
                        color       : $active-green;
                        font-weight : 600;
                    }
                }
                font-weight : $font-weight-500;
                background  : /*!rtl:linear-gradient(to left, $primary-bg_selected_subpanel 0px, $primary-bg_selected_subpanel 8px, $white 8px, $white 100%)*/
                    linear-gradient(to right, $primary-bg_selected_subpanel 0px, $primary-bg_selected_subpanel 8px, $white 8px, $white 100%);
            }
        }
        &.level-1 {
            .menu-selected {
                background : /*!rtl:linear-gradient(to left, $primary-bg_selected 0px, $primary-bg_selected 6px, $white 6px, $white 100%)*/
                    linear-gradient(to right, $primary-bg_selected 0px, $primary-bg_selected 6px, $white 6px, $white 100%);
            }
            .selected {
                background : /*!rtl:linear-gradient(to left, $primary-bg_selected 0px, $primary-bg_selected 8px, $white 8px, $white 100%)*/
                    linear-gradient(to right, $primary-bg_selected 0px, $primary-bg_selected 8px, $white 8px, $white 100%);
            }
        }
        &.level-2 {
            .menu-selected {
                background : /*!rtl:linear-gradient(to left, $primary-bg_selected_subpanel_2 0px, $primary-bg_selected_subpanel_2 6px, $white 6px, $white 100%)*/
                    linear-gradient(to right, $primary-bg_selected_subpanel_2 0px, $primary-bg_selected_subpanel_2 6px, $white 6px, $white 100%);
            }
            .selected {
                background : /*!rtl:linear-gradient(to left, $primary-bg_selected_subpanel_2 0px, $primary-bg_selected_subpanel_2 8px, $white 8px, $white 100%)*/
                    linear-gradient(to right, $primary-bg_selected_subpanel_2 0px, $primary-bg_selected_subpanel_2 8px, $white 8px, $white 100%);
            }
        }
    }
    .ls-questiongroup-tools, .ls-question-tools {
        i {
            font-size : 24px;
            color: $g-700;
        }
    }
}