brk/website_next/learn/charts/controls/style.css

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;
        }

        label:has(:checked):not(:hover) span {
          color: var(--black);
          background: var(--gray);
        }
      }

      button[data-chart="fullscreen"] {
        border: 0;
        background: none;
        font: inherit;
        line-height: inherit;
        text-transform: uppercase;
        cursor: pointer;

        &[aria-pressed="true"] {
          color: var(--black);
          background: var(--green);
        }
      }

      :is(label > span, button[data-chart="fullscreen"]) {
        padding: 0.25rem;
        border-radius: 0.25rem;
        color: var(--gray);
      }

      :is(label:hover span, button[data-chart="fullscreen"]:hover) {
        color: var(--black);
        background: var(--white);
      }

      :is(label:active span, button[data-chart="fullscreen"]:active) {
        color: var(--black);
        background: var(--orange);
      }

      :is(
          label:has(:focus-visible) span,
          button[data-chart="fullscreen"]:focus-visible
        ) {
        outline: 1px solid var(--orange);
        outline-offset: 0.125rem;
      }
    }
  }
}