@layer components {
  .passkey-icon--dark {
    display: none;
  }

  .passkey-icon--light {
    html[data-theme="dark"] & {
      display: none;
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        display: none;
      }
    }
  }

  .passkey-icon--dark {
    html[data-theme="dark"] & {
      display: inline;
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        display: inline;
      }
    }
  }
}