<script>
  import { Router } from "@sveltech/routify";
  import { routes } from "../.routify/routes";
</script>

<Router routes="{routes}" />

<style lang="scss" global>
  // This is a recipe for dynamic, client-side theming
  // All Carbon themes are included (White, Gray 10, Gray 90, Gray 100)

  $feature-flags: (
    // Custom CSS properties must be enabled to dynamically switch themes
    enable-css-custom-properties: true,
    ui-shell: true,
    grid-columns-16: true
  );

  $css--font-face: true;
  $css--helpers: true;
  $css--body: true;
  $css--use-layer: true;
  $css--reset: true;
  $css--default-type: true;
  $css--plex: true;

  // Use all Carbon themes
  @import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
  @import "carbon-components/scss/globals/scss/component-tokens";
  @import "carbon-components/src/components/tag/tag";
  @import "carbon-components/src/components/notification/inline-notification";
  @import "carbon-components/src/components/notification/toast-notification";

  // The default theme is "white" (White)
  :root {
    @include carbon--theme($carbon--theme--white, true) {
      @include emit-component-tokens($tag-colors);
      @include emit-component-tokens($notification-colors);
    }
  }

  // Set the <html> theme attribute to "g10" to use the Gray 10 theme
  // <html theme="g10">
  :root[theme="g10"] {
    @include carbon--theme($carbon--theme--g10, true) {
      @include emit-component-tokens($tag-colors);
      @include emit-component-tokens($notification-colors);
    }
  }

  // Set the <html> theme attribute to "g80" to use the Gray 90 theme
  // <html theme="g80">
  :root[theme="g80"] {
    @include carbon--theme($carbon--theme--g80, true) {
      @include emit-component-tokens($tag-colors);
      @include emit-component-tokens($notification-colors);
    }
  }

  // Set the <html> theme attribute to "g90" to use the Gray 90 theme
  // <html theme="g90">
  :root[theme="g90"] {
    @include carbon--theme($carbon--theme--g90, true) {
      @include emit-component-tokens($tag-colors);
      @include emit-component-tokens($notification-colors);
    }
  }

  // Set the <html> theme attribute to "g100" to use the Gray 100 theme
  // <html theme="g100">
  :root[theme="g100"] {
    @include carbon--theme($carbon--theme--g100, true) {
      @include emit-component-tokens($tag-colors);
      @include emit-component-tokens($notification-colors);
    }
  }

  // Programmatically update the theme in JavaScript:
  // document.documentElement.setAttribute("theme", "g90");

  @import "carbon-components/scss/globals/scss/_css--reset";
  @import "carbon-components/scss/globals/scss/_css--font-face";
  @import "carbon-components/scss/globals/scss/_css--helpers";
  @import "carbon-components/scss/globals/scss/_css--body";
  @import "carbon-components/scss/globals/grid/grid";

  @import "carbon-components/src/components/treeview/treeview";

  // Import all component styles
  @import "carbon-components/scss/globals/scss/styles";
</style>
