.drawer {
    background-color: $backgrounddrawerscolor !important;
    .drawerheader {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: flex-start;
        height: 60px;
        .drawertoggle {
            margin: 0 .5em !important;
            height: 30px;
            width: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: $iconfillerdrawerscolor !important;
            .icon {
                color: $icondrawerscolor;
                font-size: 16px;
                opacity: 1;
                text-shadow: none;
                &.cancel {
                    color: $icondrawerscolor !important;
                }
            }
            &:hover,
            &:active,
            &:focus {
                background: $iconfillerdrawerscolorhover;
                .icon {
                    color: $icondrawerscolorhover !important;
                    font-size: 16px;
                    opacity: 1;
                }
            }
        }
        h3 {
            color: $letterdrawerscolor !important;
            font-size: 18px;
            margin-bottom: 0;
            margin-left: 1em;
        }
        .drawerheadercontent {
            margin-left: auto;
            #courseindexdrawercontrols {
                [data-bs-toggle="dropdown"] {
                    .icon {
                        color: $icondrawerscolor;
                    }
                    &:hover,
                    &:active,
                    &:focus,
                    &:focus-visible {
                        background-color: $iconfillerdrawerscolorhover;
                        .icon {
                            color: $icondrawerscolorhover;
                        }
                    }
                }
            }
        }
    }
    &.drawer-left {
        .drawercontent {
            .courseindex {
                .icon {
                    font-size: 14px;
                }
                #courseindex-content {
                    .courseindex {
                        .courseindex-section {
                            .courseindex-item {
                                [data-bs-toggle="collapse"] {
                                    span {
                                        .icon {
                                            font-size: 15px;
                                            color: $icondrawerscolor;
                                        }
                                    }
                                }
                                .completioninfo {
                                    .icon {
                                        color: $icondrawerscolor !important;
                                    }
                                }
                                [data-for="section_title"] {
                                    font-size: 15px;
                                    color: $letterdrawerscolor;
                                }
                                &.pageitem {
                                    background-color: $iconfillerdrawerscolorhover !important;
                                    a {
                                        color: $icondrawerscolorhover !important;
                                    }
                                    [data-bs-toggle="collapse"] {
                                        span {
                                            .icon {
                                                color: $icondrawerscolorhover !important;
                                            }
                                        }
                                    }
                                    .completioninfo {
                                        .icon {
                                            color: $icondrawerscolorhover !important;
                                        }
                                    }
                                }
                                &:hover {
                                    background-color: $iconfillerdrawerscolorhover;
                                    color: $icondrawerscolorhover;
                                    [data-bs-toggle="collapse"] {
                                        span {
                                            .icon {
                                                color: $icondrawerscolorhover !important;
                                            }
                                        }
                                    }
                                    .completioninfo {
                                        .icon {
                                            color: $icondrawerscolorhover !important;
                                        }
                                    }
                                    [data-for="section_title"] {
                                        color: $icondrawerscolorhover !important;
                                    }
                                }
                            }
                            .courseindex-item-content {
                                .courseindex-sectioncontent {
                                    .courseindex-item {
                                        .completioninfo {
                                            .icon {
                                                color: $icondrawerscolor;
                                            }
                                        }
                                        .courseindex-link {
                                            color: $letterdrawerscolor;
                                            font-size: 14px;
                                        }
                                        &:hover {
                                            .completioninfo {
                                                .icon {
                                                    color: $icondrawerscolorhover;
                                                }
                                            }
                                            .courseindex-link {
                                                color: $icondrawerscolorhover;
                                            }
                                        }
                                    }
                                }
                            }
                            &.current {
                                border-left: $primary 3px solid;
                                padding-left: 1px;
                                .current-badge {
                                    background-color: $primary !important;
                                    border: white 1px solid;
                                }
                            }
                            .courseindex-locked i {
                                margin-top: -6px;
                            }
                        }
                    }
                }
            }
        }
    }
    &.drawer-right {
        .drawercontent {
            padding: 0.4rem 15px;
        }
    }
}
.drawer-toggles {
    .drawer-toggler {
        [data-bs-toggler="drawers"] {
            background: white !important;
            .icon {
                color: $primary;
            }
            &:hover {
                .icon {
                    color: $secondary;
                }
            }
        }
    }
}

body.theme-fresk {
    .drawer.drawer-left {
        .drawercontent {
            .courseindex {
                #courseindex-content {
                    .courseindex {
                        .courseindex-section {
                            .courseindex-item:has(.courseindex-section) {
                                &:hover {
                                    background-color: transparent;
                                    i {
                                        color: $icondrawerscolor !important;
                                    }
                                    >.courseindex-section {
                                        color: $letterdrawerscolor !important;
                                        >.courseindex-item {
                                            color: $letterdrawerscolor !important;
                                            &:hover {
                                                color: $icondrawerscolorhover !important;
                                                a,
                                                i {
                                                    color: $icondrawerscolorhover !important;
                                                }
                                            }
                                            &.pageitem {
                                                background-color: $iconfillerdrawerscolorhover !important;
                                                a,
                                                i {
                                                    color: $icondrawerscolorhover !important;
                                                }
                                            }
                                        }
                                        >.courseindex-item-content {
                                            [data-for="cmlist"] {
                                                >.courseindex-item {
                                                    &:hover {
                                                        i {
                                                            color: $icondrawerscolorhover !important;
                                                        }
                                                        a {
                                                            color: $icondrawerscolorhover !important;
                                                        }
                                                    }
                                                    &.pageitem {
                                                        background-color: $iconfillerdrawerscolorhover !important;
                                                        a,
                                                        i {
                                                            color: $icondrawerscolorhover !important;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    .courseindex-item {
                                        .courseindex-link {
                                            color: $letterdrawerscolor !important;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .drawer.drawer-right {
        .btn-add-content {
            border: 2px dashed $filterstext !important;
            color: grey !important;
            background-color: transparent !important;
            &:hover{
                i{
                    color: $primary !important;
                }
                background-color: transparent !important;
                color: $graytext !important;
                border-color: $graytext !important;
            }
        }
    }
}