// SF design system imports
@import "sf-design-system/src/components/00-design-tokens/_variables.scss";
@import "sf-design-system/src/components/00-design-tokens/_colors.scss";
@import "sf-design-system/src/components/00-design-tokens/_functions.scss";
@import "sf-design-system/src/components/00-design-tokens/_mixins.scss";
@import "sf-design-system/src/components/00-design-tokens/_typography-mixins.scss";
@import "sf-design-system/src/components/00-design-tokens/_breakpoints.scss";

// variables
@import "./tokens";

// functions + mixins
@import "./tools";

// scope everything to the <div class="formio-sfds"> element rendered by formio.js
.formio-sfds {
  @import "sf-design-system/src/components/00-design-tokens/_base.scss";
  @import "sf-design-system/src/components/00-design-tokens/_typography.scss";

  // these are the actual styles
  @import "./forms";
  @import "./grid";
  @import "./flexbox";
  @import "./layout";
  @import "./typography";
  @import "./utilities";
  @import "./overrides";
}

@import "./flatpickr";