.c_articles_rubricator {
    position: sticky;
    top: calc(var(--header-height) + 20px);

    .rubricator_title {
        font-size: 20px;
        font-weight: 700;
        color: var(--black-clr);
        margin-bottom: 16px;
    }

    .rubricator_row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 14px;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.2s ease;

        &:hover {
            background-color: var(--second-bg-grey-clr);
        }

        &.active {
            /*background-color: var(--green-light-clr);*/
            .rubricator_link{
                color: var(--green-clr);
            }
        }

        .rubricator_link {
            min-width: 0;
            display: block;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            color: var(--black-clr);
        }

        .rubricator_caret {
            flex-shrink: 0;
            width: 14px;
            height: 14px;
            margin-left: 8px;
            transition: transform 0.2s ease;
        }

        &[aria-expanded="true"] .rubricator_caret {
            transform: rotate(180deg);
        }
    }

    .rubricator_children .rubricator_row {
        padding-left: 28px;
    }

    .rubricator_row[aria-expanded="false"] + .rubricator_children {
        display: none;
    }

    .rubricator_children {
        overflow: hidden;

        &[aria-hidden="true"] {
            display: none;
        }
    }
}

.rubricator_overlay{
    display: none;
}

@media (max-width: 1024px) {
    .c_articles_rubricator {
        position: fixed;
        top: 0;
        left: -300px;
        width: 300px;
        height: 100svh;
        background: var(--first-bg-clr);
        z-index: var(--top-z-ind);
        padding: 16px;
        overflow-y: auto;
        transition: left 0.3s ease;
        border-right: 1px solid var(--grey-light-clr);

        &.open {
            left: 0;
        }
    }

    .rubricator_overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--black-light-clr);
        z-index: calc(var(--top-z-ind) - 1);
    }

    .c_articles_rubricator.open ~ .rubricator_overlay {
        display: block;
    }
}