@use '../apps/red-ui/src/assets/styles/variables';
@use '../libs/common-ui/src/assets/styles/common-mixins';
@use '../libs/common-ui/src/assets/styles/common-variables';
@use 'mixin';

.site-sidebar {
    background-color: variables.$accent;

    .logo {
        padding: 24px 0 30px 0 !important;
    }

    @include common-mixins.scroll-bar;
}

.site-sidebar-search {
    padding: 0 24px;

    @include mixin.search-input;

    .search-field {
        padding: 7px 13px;
    }
}

.nav-site-sidebar {
    margin-top: 16px;

    .topic-link {
        padding-top: 11px;
        padding-bottom: 11px;
        font-size: 14px;
        line-height: 18px;
        color: #d3d5da;

        &:hover {
            background-color: variables.$grey-10;
        }
    }

    .active > .topic-link {
        background-color: variables.$grey-10;
    }

    .active > a {
        color: variables.$white;
        font-weight: 600;
    }

    > li {
        > a {
            padding-left: 24px;
        }

        > ul > li {
            > a {
                padding-left: 32px;
            }

            > ul > li > a {
                padding-left: 40px;
            }
        }
    }
}

.toc {
    .glyphicon {
        top: 5px;
    }

    > li > .topic-link > .glyphicon {
        margin-top: 4px;
    }
}