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

.umb-grid.umb-property-editor {
	// =========================================================================
	// :: 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";

	// =========================================================================
	// :: 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/_chat",
		"general/components/_circles",
		"general/components/_bubble",
		"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";

	.c-article {
		margin-top: 0;
	}

	.c-bubble__image {
		display: none;
	}

	.l-section--with-curve {
		display: none;
	}

	.u-umbraco-preview {
		display: block;
	}
}