.glossary-term{header { h2 { font-size: 1.4em; margin-block: .8em 0.4em; } } .contexts, footer { font-size: 90%; h2 { font-size: 1.1em; margin: .1em; display: inline-block; color: var(--color-on-tertiary); } ul { display: inline-block; padding: 0 .5em; margin: .1em .5em 1em; li { display: inline-block; + li::before { content: " | "; padding: 0 .5em; } } } } .contexts li { a { color: var(--color-on-tertiary-container); background-color: var(--color-tertiary-container); border-radius: .5em; padding: .2em .5em; text-decoration: none; } a:hover { outline: thin solid var(--color-outline-variant); } } footer { margin-top: 1em; > :first-child { margin-top: 1em; } } footer:has(*) { border-top: .2em solid var(--color-outline); }}[role=doc-glossary]{header nav { > h2 { display: inline-block; font-size: 1.1em; } > ul { padding: .1em .1em .1em .5em; list-style: none; display: inline-block; > li { display: inline-block; margin-inline-end: .25em; } } } .glossary-term { border-left: .15em solid oklch(from var(--color-on-secondary-container) l c h / 50%); padding-left: 1em; &:has(:hover) { border-left-color: var(--color-on-secondary-container) } h2 { font-size: 1.1em; } } .glossary-term[data-is-draft] { background-color: var(--color-error-container); .title h2 { color: var(--color-on-error-container); } } > p { padding: 1em; border: thin solid var(--color-on-secondary-container); }}