details { position: relative; } details > *, details .lightbox-wrapper { display: none; } details, summary { outline: none; } summary:first-of-type { cursor: pointer; display: block; } summary:before { content: "\25BA"; margin-right: 0.25em; } details[open] > *, details[open] .lightbox-wrapper { display: block; } details[open] > summary:before, details.open > summary:before { content: "\25BC"; } details[open] > summary:first-of-type ~ *, details.open > summary:first-of-type ~ * { display: block; } /* hide native indicator */ summary::-webkit-details-marker { display: none; } .elided { summary:before { content: "" !important; display: none; } summary { @include unselectable; display: flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; margin: 0; padding: 0; color: $primary-medium; background: $primary-low; border: 1px solid $primary-low-mid; width: 1.5em; line-height: 1; } summary:hover { color: $primary; background: $primary-low-mid; border-color: currentColor; } }