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

    @media (hover: hover) and (pointer: fine) {
      :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[data-press] span, button[data-chart="fullscreen"][data-press]) {
      color: var(--black);
      background: var(--white);
    }

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