main.learn { figure[data-chart="series"] { > footer { > div { display: flex; flex-wrap: wrap; gap: 0.125rem 0.5rem; } fieldset { display: flex; gap: 0.25rem; margin: 0; padding: 0; border: 0; text-transform: uppercase; legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } label { position: relative; display: block; cursor: pointer; } input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } span { display: block; padding: 0.25rem; border-radius: 0.25rem; color: var(--gray); } label:hover span { color: var(--black); background: var(--white); } label:has(:checked):not(:hover) span { color: var(--black); background: var(--gray); } label:active span { color: var(--black); background: var(--orange); } label:has(:focus-visible) span { outline: 1px solid var(--orange); outline-offset: 0.125rem; } } button[data-chart="fullscreen"] { padding: 0.25rem; border: 0; border-radius: 0.25rem; color: var(--gray); background: none; font: inherit; line-height: inherit; text-transform: uppercase; cursor: pointer; &:hover { color: var(--black); background: var(--white); } &[aria-pressed="true"] { color: var(--black); background: var(--green); } &:active { color: var(--black); background: var(--orange); } &:focus-visible { outline: 1px solid var(--orange); outline-offset: 0.125rem; } } } } }