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