@layer components {
  .theme-options {
    input[type="radio"] {
      block-size: 1px;
      border: 0;
      clip: rect(0, 0, 0, 0);
      inline-size: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      white-space: nowrap;
    }
  }

  .theme-option--red { --btn-background: oklch(var(--lch-red)); }
  .theme-option--orange { --btn-background: oklch(var(--lch-orange)); }
  .theme-option--green { --btn-background: oklch(var(--lch-green)); }
  .theme-option--blue { --btn-background: oklch(var(--lch-blue)); }
  .theme-option--purple { --btn-background: oklch(var(--lch-purple)); }

  input[type="radio"]:not(:checked) + .theme-option {
    img { visibility: hidden; }
  }
}