@layer components {
  .theme-switcher {
    position: relative;
  }

  .theme-switcher__icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .theme-switcher__icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Light mode: show moon icon (click to go dark) */
  .theme-switcher__icon--light {
    display: flex;
  }

  .theme-switcher__icon--dark {
    display: none;
  }

  /* Dark mode: show sun icon (click to go light) */
  [data-theme="dark"] .theme-switcher__icon--light {
    display: none;
  }

  [data-theme="dark"] .theme-switcher__icon--dark {
    display: flex;
  }
}