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

$iconSize: 18px;
$toggleSize: 10px;
$leftOffset: 57px;

@mixin toc-header {
    @include text-size(body-2);
    font-weight: 500;
}

.dc-toc {
    $class: &;

    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--dc-header-height, #{$headerHeight}));
    overflow-y: hidden;
    border-right: 1px solid var(--yc-color-line-generic);

    &__empty {
        padding: 5px 15px 5px 24px;
    }

    &__top {
        flex-grow: 0;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        padding: 10px 10px 8px 0;

        &_scrolled {
            border-bottom: 1px solid var(--yc-color-line-generic);
        }

        &-header-icon {
            display: flex;
            margin-right: 5px;
            flex-shrink: 0;
        }

        &-header {
            flex-grow: 0;
            $headerClass: &;
            position: relative;

            @include text-size(body-2);
            font-weight: 500;

            &_link {
                @include reset-link-style();
                display: flex;
                align-items: center;

                &:hover {
                    @include link();

                    color: var(--yc-color-text-primary);
                }
            }
        }
    }

    &__bottom {
        flex-grow: 0;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        padding: 4px 10px 20px 0;

        &_scrolled {
            border-top: 1px solid var(--yc-color-line-generic);
        }
    }

    &__content {
        --yc-scrollbar-width: 6px;
        --yc-scrollbar-thin-width: 6px;

        position: relative;
        flex-grow: 1;
        overflow-y: auto;
        scrollbar-width: thin;

        &_offset_top {
            padding-top: 24px;
        }
    }

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

        display: block;

        &-item {
            cursor: pointer;
            user-select: none;

            &_main > *:first-child {
                color: var(--yc-color-text-primary);
            }

            &:not(&_opened) > #{$class}__list {
                display: none;
            }

            // recurcive padding
            > #{$class}__list {
                padding-left: 20px;
            }
        }
    }

    &__content > &__list {
        padding-right: 21px;
        padding-bottom: 30px;
    }
}