// What is this document for:
// https://stenciljs.com/docs/styling#global-styles
// https://stenciljs.com/docs/config#globalstyle

/* Multibrand tokens: Scania colors */
@import '../../../../color/scania-color-primitives';
@import '../../../../color/scania-brand-usage';

/* Multibrand tokens: Scania typography */
@import '../../../../typography/tokens/typography-scania';

/* Multibrand tokens: Scania spacing */
@import '../../../../spacing/units';
@import '../../../../spacing/radius';
@import '../../../../spacing/scania-units';

// Motion
@import '../../../../motion';

// Colors
@import '../../../../color/color';

// Grid (Deprecated - will be removed in version 2.0)
@import '../../../../grid-deprecated/grid-deprecated';

// Grid new
@import '../../../../grid/grid';

// Typography
@import '../../../../typography/scania-fonts';
@import '../../../../typography/scania-fonts-vars';
@import '../../../../typography/scania-fonts-selectors';

// Logos
@import '../../../../logotype/logotype-scania';

// Vars
@import '_variables';
@import 'scrollbar-vars';
@import 'focus-vars';

// Utility classes
@import '_utility-classes';

//Web component theme variables
@import '../components/accordion/accordion-vars';
@import '../components/banner/banner-vars';
@import '../components/block/block-vars';
@import '../components/breadcrumbs/breadcrumbs-vars';
@import '../components/button/button-vars';
@import '../components/card/card-vars';
@import '../components/checkbox/checkbox-vars';
@import '../components/chip/chip-vars';
@import '../components/table/table-vars';
@import '../components/datetime/datetime-vars';
@import '../components/divider/divider-vars';
@import '../components/dropdown/dropdown-vars';
@import '../components/dropdown/dropdown-option/dropdown-option-vars';
@import '../components/footer/footer-vars';
@import '../components/header/header-item/header-item-global';
@import '../components/header/header-vars';
@import '../components/link/link-vars';
@import '../components/modal/modal-vars';
@import '../components/popover-canvas/popover-canvas-vars';
@import '../components/popover-menu/popover-menu-vars';
@import '../components/radio-button/radio-button-vars';
@import '../components/side-menu/side-menu-item/side-menu-item-global';
@import '../components/side-menu/side-menu-vars';
@import '../components/slider/slider-vars';
@import '../components/stepper/stepper-vars';
@import '../components/tabs/folder-tabs/folder-tabs-vars';
@import '../components/tabs/inline-tabs/inline-tabs-vars';
@import '../components/tabs/navigation-tabs/navigation-tabs-vars';
@import '../components/textarea/textarea-vars';
@import '../components/text-field/text-field-vars';
@import '../components/toast/toast-vars';
@import '../components/toggle/toggle-vars';
@import '../components/tooltip/tooltip-vars';

// Beta components
@import '../components/_beta/date-picker/date-picker-single/date-picker-vars';

body {
  font-family: 'Scania Sans Semi Condensed', 'Scania Sans Condensed', Arial, Helvetica, sans-serif;
  font-size: 14px;
  margin: 0;
  flex: 1;
}

:root,
.tds-mode-light {
  color: var(--tds-grey-958);
  background-color: var(--tds-white);

  &.tds-mode-variant-primary,
  & .tds-mode-variant-primary {
    color: var(--tds-grey-958);
    background-color: var(--tds-white);
  }

  &.tds-mode-variant-secondary,
  & .tds-mode-variant-secondary {
    color: var(--tds-grey-958);
    background-color: var(--tds-grey-50);
  }
}

.tds-mode-dark {
  color: var(--tds-grey-100);
  background-color: var(--tds-grey-958);

  &.tds-mode-variant-primary,
  & .tds-mode-variant-primary {
    color: var(--tds-grey-100);
    background-color: var(--tds-grey-958);
  }

  &.tds-mode-variant-secondary,
  & .tds-mode-variant-secondary {
    color: var(--tds-grey-100);
    background-color: var(--tds-grey-900);
  }
}

@import 'shame';