// sidebar


@mixin rd-sidebar {
    // this will becomes .rd-page-wrapper .rd-sidebar
    .rd-sidebar {
        background-color: rgb(46, 46, 46);
        color: #ccc;
        display: none;
        height: auto;
        margin: 0;
        min-height: 100%;
        padding: 0;
        position: absolute;
        width: var(--sidebar-expanded-width);

        // .rd-page-wrapper .rd-sidebar a
        a {
            color: inherit;
        }

        // .rd-page-wrapper .rd-sidebar ul.rd-sidebar-item-list
        ul.rd-sidebar-item-list {
            // .rd-page-wrapper .rd-sidebar ul.rd-sidebar-item-list > li (item list of main menu).
            > li {
                // .rd-page-wrapper .rd-sidebar ul.rd-sidebar-item-list > li > a
                > a {
                    display: block;
                    overflow-wrap: break-word;
                    padding: var(--block-element-padding-vertical) 2.125rem var(--block-element-padding-vertical) var(--block-element-padding-horizontal);
                    word-break: break-all;
                    // .rd-page-wrapper .rd-sidebar ul.rd-sidebar-item-list > li > a > span.rd-sidebar-menu-text
                    > span.rd-sidebar-menu-text {
                        overflow-wrap: break-word;
                        word-break: break-all;
                    }
                    // .rd-page-wrapper .rd-sidebar ul.rd-sidebar-item-list > li > a > .sidebar-icon
                    .sidebar-icon {
                        font-size: 1.250rem;
                        transition: font-size var(--sidebar-transition-seconds);
                    }
                }
            }
            // .rd-page-wrapper .rd-sidebar ul.rd-sidebar-item-list li.divider
            li.divider {
                border-bottom: 1px solid var(--block-border-color);
                margin-bottom: var(--content-block-element-margin-vertical);
                margin-top: var(--content-block-element-margin-vertical);
                // .rd-page-wrapper .rd-sidebar ul.rd-sidebar-item-list li.divider a
                a {
                    display: none;
                }
            }
            li.sub-menu-heading {
                font-weight: 700;
                > a,
                > div,
                > span {
                    color: inherit;
                    font-size: 1rem;
                }
            }
        }

        // .rd-page-wrapper .rd-sidebar ul
        ul {
            list-style: none;
            margin: 0;
            li {
                list-style: none;
            }
        }
    }
}


@mixin rd-page-wrapperMini-screen-sidebar-visible {
    // this will becomes .rd-page-wrapper.mini-screen-sidebar-visible
    &.mini-screen-sidebar-visible {
        overflow-x: hidden;
        // .rd-page-wrapper.mini-screen-sidebar-visible > footer,
        // .rd-page-wrapper.mini-screen-sidebar-visible > main
        > footer,
        > main {
            transform: translateX(var(--sidebar-expanded-width));
        }
        // .rd-page-wrapper.mini-screen-sidebar-visible .rd-sidebar
        .rd-sidebar {
            display: block;
        }
        @media (min-width: $minimum-sidebar-breakpoint) {
            // this is in on tapped sidebar menu toggler and resize to medium screen size.
            // so, all the values for small screen should be reset.
            overflow-x: visible;
            // .rd-page-wrapper.mini-screen-sidebar-visible > footer,
            // .rd-page-wrapper.mini-screen-sidebar-visible > main
            > footer,
            > main {
                transform: none;
            }
            // .rd-page-wrapper.mini-screen-sidebar-visible .rd-sidebar
            .rd-sidebar {
                background-color: transparent;
                min-height: 0;
                position: static;
            }
        }
    }
}


@mixin rd-page-wrapperIs-collapsed_rd-sidebar {
    // this will becomes .rd-page-wrapper.is-collapsed .rd-sidebar
    .rd-sidebar {
        width: var(--sidebar-collapsed-width);
        // .rd-page-wrapper.is-collapsed .rd-sidebar ul.rd-sidebar-item-list
        ul.rd-sidebar-item-list {
            // .rd-page-wrapper.is-collapsed .rd-sidebar ul.rd-sidebar-item-list > li
            > li {
                // .rd-page-wrapper.is-collapsed .rd-sidebar ul.rd-sidebar-item-list > li > a
                > a {
                    // .rd-page-wrapper.is-collapsed .rd-sidebar ul.rd-sidebar-item-list > li > a > span.rd-sidebar-menu-text
                    > span.rd-sidebar-menu-text {
                        display: none;
                    }

                    // .rd-page-wrapper.is-collapsed .rd-sidebar ul.rd-sidebar-item-list > li > a > .sidebar-icon
                    > .sidebar-icon {
                        font-size: 1.563rem;
                    }
                }
            }
        }
    }
}


@mixin rd-sidebar-inner {
    // this will becomes .rd-page-wrapper .rd-sidebar-inner inside @media (min-width: $minimum-sidebar-breakpoint)
    .rd-sidebar-inner {
        // to use css position sticky, enable these code but it is not recommended because in long content page the menu will still stick to top until it matches the bottom of content.
        //bottom: 0;
        //position: sticky;
        //top: var(--navbar-height);
        z-index: calc(var(--sidebar-z-index) + 1);// fix sticky menu cause the menu is under everything that contain `position: relative;`.
    }
}