// =============================================================================
// :: Main
// =============================================================================
/**
 * Contains all the styling used to create the layout and the look of the
 * components in the styleguide.
 *
 * 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/_normalize";

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

@import
	"tools/mixins/_breakpoints",
	"tools/mixins/_fonts",
	"tools/extends/_icon",
	"tools/extends/_icons",
	"tools/mixins/_placeholder",
	"tools/mixins/_outline";

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

@import
	"settings/_colors",
	"settings/_layout",
	"settings/_breakpoints",
	"settings/_typography",
	"settings/_media",
	"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
	"tools/extends/_heading",
	"tools/extends/_paragraph",
	"tools/extends/_list",
	"tools/extends/_box-modal",
	"tools/extends/_icon",
	"tools/extends/_link";

// =============================================================================
// :: 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
	"utils/_margin",
	"utils/_padding",
	"utils/_border",
	"utils/_visibility",
	"utils/_height",
	"utils/_spacing",
	"utils/_text-align";

// =============================================================================
// :: 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
	"base/_root",
	"base/_heading",
	"base/_paragraph",
	"base/_fonts",
	"base/_link",
	"base/_button",
	"base/_img",
	"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
	"layouts/_container",
	"layouts/_grid",
	"layouts/_section",
	"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
	"components/_layout",
	"components/_typography",
	"components/_button",
	"components/_input",
	"components/_checkbox",
	"components/_icons",
	"components/_link",
	"components/_list",
	"components/_section",
	"components/_booking-info",
	"components/_form",
	"components/_overlay",
	"components/_route",
	"components/_page",
	"components/_footer",
	"components/_header",
	"components/_booking",
	"components/_home";

// =============================================================================
// :: 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
	"scopes/_wysiwyg-default";