@import '../../../styles/variables';
@import '../../../styles/mixins';

.dc-mini-toc {
    $class: &;

    &__title {
        @include text-size(body-2);
        font-weight: 500;
        color: var(--yc-color-text-primary);
        margin-bottom: 12px;
    }

    &__sections {
        @include reset-list-style();

        height: calc(
            100vh - var(--dc-header-height, #{$headerHeight}) - #{$miniTocOffset} - var(--dc-subheader-height)
        );
        overflow-y: auto;
        overflow-x: hidden;
    }

    &__section {
        display: block;

        & > #{$class}__section-link {
            border-left-color: var(--yc-color-line-generic);
        }

        &-link {
            display: flex;
            align-items: center;
            padding: 6px 6px 6px 12px;
            min-height: 28px;

            color: var(--yc-color-text-secondary);
            border-left: 2px solid transparent;
            text-decoration: none;

            &:hover {
                color: var(--yc-color-text-complementary);
            }
        }

        &_child {
            #{$class}__section-link {
                padding-left: 25px;
            }
        }

        &_active > #{$class}__section-link {
            color: var(--yc-color-text-primary);
            border-left-color: var(--yc-color-text-primary);
        }
    }
}