@layer components {
  .theme-toggle {
    inline-size: 2rem;
    block-size: 2rem;
    min-block-size: 2rem;
    padding: 0;
    border-radius: 50%;

    &[hidden] { display: none; }
    & svg { inline-size: 1.125rem; block-size: 1.125rem; }
    &[data-scheme="dark"] .icon-moon,
    &:not([data-scheme="dark"]) .icon-sun { display: none; }

    @media (pointer: coarse) {
      inline-size: 2.75rem;
      block-size: 2.75rem;
    }
  }
}