@import "dxHelpers/reset";
@import "dxHelpers/text";

:host {
    --dx-c-toc-padding-bottom: 80px;
}

.toc {
    display: flex;
    flex-direction: row;
    max-width: 240px;
    min-width: 80px;
    word-break: break-word;
}

.toc_content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: var(--dx-g-transition-hue-1x);
    padding-bottom: var(--dx-g-spacing-smd);
}

.toc_title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--dx-g-spacing-md);
}

.toc-content-header {
    width: 100%;
}

.toc-content-header[show-shadow="true"] {
    box-shadow: 0 4px 4px -2px var(--dx-g-gray-90);
}

.toc-content-header[show-shadow="true"] .toc_title {
    margin-bottom: var(--dx-g-spacing-sm);
}

.toc-items {
    overflow-y: auto;
    padding-bottom: var(--dx-c-toc-padding-bottom);
    padding-right: var(--dx-g-spacing-smd);
}

.toc-items[show-bottom-shadow="true"] {
    box-shadow: 0 4px 4px -2px var(--dx-g-gray-90);
}

.dx-text-display-8 {
    padding-top: var(--dx-g-spacing-sm);
    transition: var(--dx-g-transition-hue-1x);
}

.content-button {
    display: block;
    line-height: var(--dx-g-text-lg);
    color: var(--dx-g-blue-vibrant-20);
    font-family: var(--dx-g-font-sans);
    font-size: var(--dx-g-text-sm);
    text-align: left;
    padding: var(--dx-g-spacing-xs);
    padding-left: 11px;
    border-left: 3px solid transparent;
    transition: var(--dx-g-transition-hue-1x);
}

/* Indent TOC items by heading level: H2 base, H3+ progressively indented */
.toc-level-2 {
    padding-left: 11px;
}

.toc-level-3 {
    padding-left: calc(11px + var(--dx-g-spacing-md, 16px));
}

.toc-level-4 {
    padding-left: calc(11px + 2 * var(--dx-g-spacing-md, 16px));
}

.toc-level-5 {
    padding-left: calc(11px + 3 * var(--dx-g-spacing-md, 16px));
}

.toc-level-6 {
    padding-left: calc(11px + 4 * var(--dx-g-spacing-md, 16px));
}

.content-button.selected {
    border-color: var(--dx-g-blue-vibrant-50);
    color: var(--dx-g-blue-vibrant-50);
    font-weight: var(--dx-g-font-bold);
}

.content-button::after {
    content: attr(data-text);
    display: block;
    font-weight: var(--dx-g-font-bold);
    height: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    visibility: hidden;
}

.content-button:not(.selected):hover {
    color: var(--dx-g-blue-vibrant-40);
    border-color: var(--dx-g-blue-vibrant-40);
}