// =============================================================================
// :: General
// =============================================================================
/**
 * Contains all the styling used to create the layout and the look of the
 * components in the general styleguide. This styleguide is the base of
 * everything in the brandplatform and the different styleguides that may
 * or may not be present.
 *
 * IMPORTANT!!!
 * Do not add any styles that should visualise the brandplatform itself. Also
 * avoid styling the visualisation of the layouts within the brandlpatform.
 * They belong in the scss/brandplatform/scopes folder.
 */

@charset "utf-8";

// =============================================================================
// :: Vendors
// =============================================================================
/**
 * Third party styling used to correctly style libraries or reset/normalize
 * the standard browser CSS. Place on top to easily overwrite these properties.
 */

// @import
// 	"_vendors/";

// =============================================================================
// :: Tools - functions
// =============================================================================
/**
 * Functions used to pass values to and return a manipulated value. These
 * contain functionality and do not define slicing.
 */

@import
	"general/tools/functions/_units",
	"general/tools/functions/_maps",
	"general/tools/functions/_breakpoints";

// =============================================================================
// :: Tools - mixins
// =============================================================================
/**
 * Mixins used to make our lives in the wonderfull world of SCSS easier and
 * enjoyable.
 */

@import
	"general/tools/mixins/_breakpoints",
	"general/tools/mixins/_fonts",
	"general/tools/mixins/_placeholder",
	"general/tools/mixins/_responsive",
	"general/tools/mixins/_box-modal";

// =============================================================================
// :: Settings
// =============================================================================
/**
 * Variables and maps used to define the basis like colors, layout, typography,
 * breakpoints, container-widths, ...
 */

@import
	"general/settings/_breakpoints",
	"general/settings/_colors",
	"general/settings/_layout",
	"general/settings/_typography",
	"general/settings/_z-index";

// =============================================================================
// :: Tools - extends
// =============================================================================
/**
 * Extendable classes/components used to create more consistency and link
 * the styling of components that are not related together.
 */

@import
	"general/tools/extends/_heading",
	"general/tools/extends/_paragraph",
	"general/tools/extends/_list",
	"general/tools/extends/_box-modal";

// =============================================================================
// :: Utils
// =============================================================================
/**
 * Utility classes are used to apply one type of styling to the element.
 * These properties usually have an !important on them because when you apply
 * a utility, you want it to apply that style so that it is not canceled out
 * by a component. You should not try to overwrite a utility's styling.
 */

@import
	"general/utils/_spacing",
	"general/utils/_visibility",
	"general/utils/_text-align",
	"general/utils/_align",
	"general/utils/_animations";

// =============================================================================
// :: Base
// =============================================================================
/**
 * The base styling of the project. These files do not contain any classes and
 * are used to style HTML-tags or load in fonts. When starting the slicing,
 * everything starts here.
 */

@import
	"general/base/_normalize",
	"general/base/_root",
	"general/base/_heading",
	"general/base/_paragraph",
	"general/base/_fonts",
	"general/base/_link",
	"general/base/_button",
	"general/base/_img",
	"general/base/_list";

// =============================================================================
// :: Layouts
// =============================================================================
/**
 * Layouts are used in giving the structure to the pages and large collection of
 * components. These are more focused on the position and structure of elements
 * and are not as standalone as the components. They can be either contextual
 * or reusable.
 */

@import
	"general/layouts/_container",
	"general/layouts/_grid",
	"general/layouts/_indent",
	"general/layouts/_section",
	"general/layouts/_form";

// =============================================================================
// :: Components
// =============================================================================
/**
 * Components form the basis of everything on a project. They can be either
 * used as standalone blocks of predefined tags and content or contextual to a
 * certain degree, but different from layouts.
 */

@import
	"general/components/_article",
	"general/components/_author",
	"general/components/_button",
	"general/components/_card",
	"general/components/_bubble",
	"general/components/_chat",
	"general/components/_circles",
	"general/components/_collapse",
	"general/components/_contact",
	"general/components/_cta",
	"general/components/_faq",
	"general/components/_feedback",
	"general/components/_flyout",
	"general/components/_footer",
	"general/components/_formfield",
	"general/components/_guide",
	"general/components/_hamburger",
	"general/components/_header",
	"general/components/_hero",
	"general/components/_highlight",
	"general/components/_input",
	"general/components/_interest-rate",
	"general/components/_interest-table",
	"general/components/_intro-faq",
	"general/components/_link",
	"general/components/_logo",
	"general/components/_nav",
	"general/components/_page-intro",
	"general/components/_pop-up",
	"general/components/_question",
	"general/components/_spotlight",
	"general/components/_step",
	"general/components/_steps-list",
	"general/components/_summary",
	"general/components/_tip",
	"general/components/_topnav",
	"general/components/_usp-list",
	"general/components/_usp";

// =============================================================================
// :: Scopes
// =============================================================================
/**
 * Scopes can be used as overwrites of third-party styling or used to style tags
 * within a certain editor that should not influence the base styling. Do not
 * overuse these.
 */

@import
	"general/scopes/_wysiwyg-default";

// =============================================================================
// :: Vendor-overrides
// =============================================================================
/**
 * Third party styling used to correctly style libraries or reset/normalize
 * the standard browser CSS. Place on top to easily overwrite these properties.
 */

@import
	"general/vendor-overrides/_umbraco-editor";

// =============================================================================
// :: Shame!!!
// =============================================================================
/**
 * A file that should only contain hacks or any dirty CSS that is used to make
 * an unresolvable problem go away. In an ideal world, where there is just one
 * browser, no Internet Exploder and every property supported, this file should
 * be empty.
 */

@import
	"general/_shame";