@amsterdam/design-system-css/dist/table-of-contents/table-of-contents.css

Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.

.ams-table-of-contents{display:flex;flex-direction:column;font-family:var(--ams-table-of-contents-font-family);font-size:var(--ams-table-of-contents-font-size);font-weight:var(--ams-table-of-contents-font-weight);gap:var(--ams-table-of-contents-gap);line-height:var(--ams-table-of-contents-line-height)}.ams-table-of-contents__list{list-style:none;margin-block:0;padding-inline-start:0;display:flex;flex-direction:column;gap:var(--ams-table-of-contents-list-gap);hyphenate-limit-chars:var(--ams-typography-hyphenate-limit-chars);hyphens:auto;overflow-wrap:break-word;text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-table-of-contents__list .ams-table-of-contents__list{padding-block-start:var(--ams-table-of-contents-list-list-padding-block-start);padding-inline-start:var(--ams-table-of-contents-list-list-padding-inline-start)}.ams-table-of-contents__item{column-gap:var(--ams-table-of-contents-item-gap);display:grid;grid-template-columns:1fr}.ams-table-of-contents__link{color:var(--ams-table-of-contents-link-color);min-inline-size:0;outline-offset:var(--ams-table-of-contents-link-outline-offset);text-decoration-line:var(--ams-table-of-contents-link-text-decoration-line);text-decoration-thickness:var(--ams-table-of-contents-link-text-decoration-thickness);text-underline-offset:var(--ams-table-of-contents-link-text-underline-offset)}.ams-table-of-contents__link:hover{color:var(--ams-table-of-contents-link-hover-color);text-decoration-line:var(--ams-table-of-contents-link-hover-text-decoration-line)}.ams-table-of-contents__link[aria-current=page]{color:var(--ams-table-of-contents-link-current-color);font-weight:var(--ams-table-of-contents-link-current-font-weight)}.ams-table-of-contents__button{color:var(--ams-table-of-contents-button-color)}.ams-table-of-contents__button:hover{background-color:rgba(0,0,0,0);color:var(--ams-table-of-contents-button-hover-color)}.ams-table-of-contents__button svg{transition:none}@media(prefers-reduced-motion: no-preference){.ams-table-of-contents__button svg{transition:rotate var(--ams-table-of-contents-button-icon-transition-duration) var(--ams-table-of-contents-button-icon-transition-timing-function)}}.ams-table-of-contents__button[aria-expanded=true] svg{rotate:-180deg}.ams-table-of-contents__item--collapsed>.ams-table-of-contents__list{display:none}@media print{.ams-table-of-contents__item--collapsed>.ams-table-of-contents__list{display:flex}}.ams-table-of-contents--collapsible{--_ams-table-of-contents-button-column-inline-size: calc(1em * var(--ams-table-of-contents-line-height))}.ams-table-of-contents--collapsible .ams-table-of-contents__item{grid-template-columns:var(--_ams-table-of-contents-button-column-inline-size) 1fr}.ams-table-of-contents--collapsible .ams-table-of-contents__item>.ams-table-of-contents__list{grid-column:2;padding-inline-start:0}.ams-table-of-contents--collapsible .ams-table-of-contents__link{grid-column:2}/*# sourceMappingURL=table-of-contents.css.map */