// 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/index.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";
@import "carbon-components-svelte/css/popover";

// 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 80 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);
  }
}



@import "carbon-components/scss/globals/scss/_css--reset";


// src:[\s\n\t]*local\('([^']*?)'\),[\s\n\t]*local\('([^']*?)'\),[\s\n\t]*url\(([^']*?)\)[\s\n\t]*format\('woff'\);
@import './fonts/mono';
@import './fonts/sans';

@include exports('css--font-face') {
  @if not variable-exists('css--font-face') or $css--font-face == true {
    @include carbon--font-face-mono();
    @include carbon--font-face-sans();
    @if not variable-exists('css--plex') or $css--plex == false {
      @warn 'Usage of Helvetica font in `carbon-components` has been removed. IBM Plex will be emitted instead';
    }
  }
}

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

// Optionally include components that you need
@import 'carbon-components/scss/components/button/button';
@import 'carbon-components/scss/components/radio-button/radio-button';
@import 'carbon-components/scss/components/checkbox/checkbox';
@import 'carbon-components/scss/components/toggle/toggle';
@import 'carbon-components/scss/components/select/select';
@import 'carbon-components/scss/components/slider/slider';
@import 'carbon-components/scss/components/menu/menu';
@import 'carbon-components/scss/components/tile/tile';
@import 'carbon-components/scss/components/tooltip/tooltip';
@import 'carbon-components/scss/components/data-table-v2/data-table-v2';
@import 'carbon-components/scss/components/ui-shell/ui-shell';

// @import "carbon-components/scss/globals/scss/styles";
