html[data-color-scheme="light"] {
  color-scheme: light;
}

html[data-color-scheme="dark"] {
  color-scheme: dark;
}

olivero-dark-mode-chooser {
  --radius: 1.5em;
  --padding: 3px;
  --border-width: 2px;

  display: block;
  /* Rounded borders makes the widget look mis-aligned unless shifted a bit. */
  margin-inline-start: -3px;

  fieldset {
    display: inline;
    padding: var(--padding);
    border: var(--border-width) solid #ccc;
    border-radius: var(--radius);
  }

  label {
    display: inline-flex;
    padding: 0.25em 0.5em;
    cursor: pointer;
    user-select: none;
    text-align: center;
    border-radius: calc(var(--radius) - var(--padding));

    &:has(input:checked) {
      color: #333;
      background-color: #ccc;
    }

    &:focus-within {
      outline: var(--border-width) solid light-dark(#333, #fff);
    }

    .site-footer &:focus-within {
      outline-color: #fff;
    }
  }

  @supports not (color: light-dark(black, white)) {
    display: none;
  }
}