@layer base {
  [data-color-scheme="light"] {
    color-scheme: light;
  }

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

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

  [data-color-scheme="light"] {
    .icon--color-scheme-light {
      display: inline-flex;
    }

    .icon--color-scheme-dark {
      display: none;
    }
  }

  [data-color-scheme="dark"] {
    .icon--color-scheme-light {
      display: none;
    }

    .icon--color-scheme-dark {
      display: inline-flex;
    }
  }

  [data-color-scheme="system"] {
    @media (prefers-color-scheme: light) {
      .icon--color-scheme-light {
        display: inline-flex;
      }

      .icon--color-scheme-dark {
        display: none;
      }
    }

    @media (prefers-color-scheme: dark) {
      .icon--color-scheme-light {
        display: none;
      }

      .icon--color-scheme-dark {
        display: inline-flex;
      }
    }
  }
}