@define-mixin resetButton {
	appearance: none;
	background: none;
	border: none;
	border-radius: 0;
	cursor: pointer;
}

@define-mixin noList {
	list-style: none;
	margin: 0;
	padding: 0;

	& li {
		padding: 0;
		margin: 0;
	}
}

@define-mixin heading {
	font-family: var(--font-head);
	font-weight: 700;
	margin: 0;
	padding: 0;
}

@define-mixin hero1 {
	font-size: var(--size-hero1-mobile);
	line-height: var(--lineheight-hero1-mobile);

	@media (--screen-lg) {
		font-size: var(--size-hero1-desktop);
		line-height: var(--lineheight-hero1-desktop);
	}
}

@define-mixin hero2 {
	font-size: var(--size-hero2-mobile);
	line-height: var(--lineheight-hero2-mobile);

	@media (--screen-lg) {
		font-size: var(--size-hero2-desktop);
		line-height: var(--lineheight-hero2-desktop);
	}
}

@define-mixin hero3 {
	font-size: var(--size-hero3-mobile);
	line-height: var(--lineheight-hero3-mobile);

	@media (--screen-lg) {
		font-size: var(--size-hero3-desktop);
		line-height: var(--lineheight-hero3-desktop);
	}
}

@define-mixin eyebrow {
	position: relative;
	font-size: var(--size-eyebrow-mobile);
	line-height: var(--lineheight-eyebrow-mobile);
	margin: 10px 0;

	&:before {
		content: '';
		display: block;
		width: 60px;
		border-top: solid 2px var(--color-primary);
		margin-bottom: 20px;
	}

	@media (--screen-lg) {
		font-size: var(--size-eyebrow-desktop);
		line-height: var(--size-eyebrow-desktop);
	}
}

@define-mixin h1 {
	font-size: var(--size-h1-mobile);
	line-height: var(--lineheight-h1-mobile);

	@media (--screen-lg) {
		font-size: var(--size-h1-desktop);
		line-height: var(--lineheight-h1-desktop);
	}
}

@define-mixin h2 {
	font-size: var(--size-h2-mobile);
	line-height: var(--lineheight-h2-mobile);

	@media (--screen-lg) {
		font-size: var(--size-h2-desktop);
		line-height: var(--lineheight-h2-desktop);
	}
}

@define-mixin h3 {
	font-size: var(--size-h3-mobile);
	line-height: var(--lineheight-h3-mobile);

	@media (--screen-lg) {
		font-size: var(--size-h3-desktop);
		line-height: var(--lineheight-h3-desktop);
	}
}

@define-mixin h4 {
	font-size: var(--size-h4-mobile);
	line-height: var(--lineheight-h4-mobile);

	@media (--screen-lg) {
		font-size: var(--size-h4-desktop);
		line-height: var(--lineheight-h4-desktop);
	}
}

@define-mixin h5 {
	font-size: var(--size-h5-mobile);
	line-height: var(--lineheight-h5-mobile);

	@media (--screen-lg) {
		font-size: var(--size-h5-desktop);
		line-height: var(--lineheight-h5-desktop);
	}
}

@define-mixin h6 {
	font-size: var(--size-h6-mobile);
	line-height: var(--lineheight-h6-mobile);

	@media (--screen-lg) {
		font-size: var(--size-h6-desktop);
		line-height: var(--lineheight-h6-desktop);
	}
}

@define-mixin subtitle {
	font-size: var(--size-subtitle-mobile);
	line-height: var(--lineheight-subtitle-mobile);

	@media (--screen-lg) {
		font-size: var(--size-subtitle-desktop);
		line-height: var(--lineheight-subtitle-desktop);
	}
}

@define-mixin lead {
	font-size: var(--size-lead-mobile);
	line-height: var(--lineheight-lead-mobile);

	@media (--screen-lg) {
		font-size: var(--size-lead-desktop);
		line-height: var(--lineheight-lead-desktop);
	}
}

@define-mixin strong {
	font-weight: 700;
}

@define-mixin text {
	color: var(--color-gray-medium);
	font-size: var(--size-text-mobile);
	line-height: var(--lineheight-text-mobile);

	@media (--screen-lg) {
		font-size: var(--size-text-desktop);
		line-height: var(--lineheight-text-desktop);
	}
}

@define-mixin small {
	display: inline-block;
	font-size: var(--size-small-mobile);
	line-height: var(--lineheight-small-mobile);

	@media (--screen-lg) {
		font-size: var(--size-small-desktop);
		line-height: var(--lineheight-small-desktop);
	}
}

@define-mixin blockquote {
	font-size: var(--size-text-mobile);
	line-height: var(--lineheight-text-mobile);
	position: relative;
	display: block;
	margin: 0;
	padding: 0;

	@media (--screen-lg) {
		font-size: var(--size-text-desktop);
		line-height: var(--lineheight-text-desktop);
	}
}

@define-mixin unorderedList {
	@mixin noList;
	display: block;

	& li {
		display: inline-block;
		width: 100%;
		position: relative;
		padding: 0 0 0 15px;
		color: var(--color-secondary);

		& p {
			margin: 0;
			padding: 0;
		}

		&:before {
			content: '';
			display: block;
			position: absolute;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: var(--color-primary);
			top: 8px;
			left: 0;

			@media (--screen-lg) {
				top: 10px;
			}
		}
	}
}

@define-mixin orderedList {
	@mixin noList;
	display: block;

	& li {
		display: inline-block;
		width: 100%;
		position: relative;
		padding: 0 0 0 20px;
		color: var(--color-secondary);

		& p {
			margin: 0;
			padding: 0;
		}

		&:first-child {
			counter-reset: section;
		}

		&:before {
			content: '';
			display: block;
			position: absolute;
			border-radius: 50%;
			top: 0;
			left: 0;
			counter-increment: section;
			content: counters(section, '.') '.';
			font-weight: bold;
			color: var(--color-primary);
		}
	}
}

@define-mixin specialList {
	@mixin noList;
	display: block;

	& li {
		display: inline-block;
		width: 100%;
		position: relative;
		padding: 0 0 0 25px;
		color: var(--color-secondary);

		& p {
			margin: 0;
			padding: 0;
		}

		&:before {
			content: '🍒';
			display: block;
			position: absolute;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: var(--color-primary);
			top: 3px;
			left: 0;
		}
	}
}

@define-mixin container {
	max-width: var(--max-width);
	margin: auto;
	padding-right: var(--margin-container-mobile);
	padding-left: var(--margin-container-mobile);

	@media (--screen-lg) {
		padding-right: var(--margin-container-desktop);
		padding-left: var(--margin-container-desktop);
	}

	@media (--screen-xxxl) {
		max-width: 1704px;
	}
}

@define-mixin containerFluid {
	width: 100%;
	max-width: 100%;
	padding-right: var(--margin-container-mobile);
	padding-left: var(--margin-container-mobile);
	margin-right: auto;
	margin-left: auto;

	@media (--screen-lg) {
		padding-right: var(--margin-container-desktop);
		padding-left: var(--margin-container-desktop);
	}
}

@define-mixin containerChild {
	padding-right: 0;
	padding-left: 0;

	@media (--screen-lg) {
		padding-right: 0;
		padding-left: 0;
	}
}

@define-mixin row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

@define-mixin col {
	position: relative;
	min-height: 1px;
	box-sizing: border-box;
}

:global {
	& div[data-container] {
		@mixin container;
	}

	& div[data-fluid="true"] {
		@mixin containerFluid;
	}

	& div[data-child="true"] {
		@mixin containerChild;
	}

	& div[data-row] {
		@mixin row;
	}

	& div[justify-content="flex-start"] {
		justify-content: flex-start;
	}

	& div[justify-content="flex-end"] {
		justify-content: flex-end;
	}

	& div[justify-content="center"] {
		justify-content: center;
	}

	& div[justify-content="space-between"] {
		justify-content: space-between;
	}

	& div[justify-content="space-around"] {
		justify-content: space-around;
	}

	& div[justify-content=initial] {
		justify-content: initial;
	}

	& div[align-items="stretch"] {
		align-items: stretch;
	}

	& div[align-items="center"] {
		align-items: center;
	}

	& div[align-items="flex-start"] {
		align-items: flex-start;
	}

	& div[align-items="flex-end"] {
		align-items: flex-end;
	}

	& div[align-items="baseline"] {
		align-items: baseline;
	}

	& div[align-items="initial"] {
		align-items: initial;
	}

	& div[xs-gaps="none"] {
		@media (--screen-xs) {
			margin-right: var(--margin-row-none);
			margin-left: var(--margin-row-none);

			& [data-col] {
				padding-right: var(--gutter-col-none);
				padding-left: var(--gutter-col-none);
			}
		}
	}

	& div[xs-gaps="default"] {
		@media (--screen-xs) {
			margin-right: var(--margin-row-default);
			margin-left: var(--margin-row-default);

			& [data-col] {
				padding-right: var(--gutter-col-default);
				padding-left: var(--gutter-col-default);
			}
		}
	}

	& div[xs-gaps="medium"] {
		@media (--screen-xs) {
			margin-right: var(--margin-row-medium);
			margin-left: var(--margin-row-medium);

			& [data-col] {
				padding-right: var(--gutter-col-medium);
				padding-left: var(--gutter-col-medium);
			}
		}
	}

	& div[xs-gaps="big"] {
		@media (--screen-xs) {
			margin-right: var(--margin-row-big);
			margin-left: var(--margin-row-big);

			& [data-col] {
				padding-right: var(--gutter-col-big);
				padding-left: var(--gutter-col-big);
			}
		}
	}

	& div[sm-gaps="none"] {
		@media (--screen-sm) {
			margin-right: var(--margin-row-none);
			margin-left: var(--margin-row-none);

			& [data-col] {
				padding-right: var(--gutter-col-none);
				padding-left: var(--gutter-col-none);
			}
		}
	}

	& div[sm-gaps="default"] {
		@media (--screen-sm) {
			margin-right: var(--margin-row-default);
			margin-left: var(--margin-row-default);

			& [data-col] {
				padding-right: var(--gutter-col-default);
				padding-left: var(--gutter-col-default);
			}
		}
	}

	& div[sm-gaps="medium"] {
		@media (--screen-sm) {
			margin-right: var(--margin-row-medium);
			margin-left: var(--margin-row-medium);

			& [data-col] {
				padding-right: var(--gutter-col-medium);
				padding-left: var(--gutter-col-medium);
			}
		}
	}

	& div[sm-gaps="big"] {
		@media (--screen-sm) {
			margin-right: var(--margin-row-big);
			margin-left: var(--margin-row-big);

			& [data-col] {
				padding-right: var(--gutter-col-big);
				padding-left: var(--gutter-col-big);
			}
		}
	}

	& div[md-gaps="none"] {
		@media (--screen-md) {
			margin-right: var(--margin-row-none);
			margin-left: var(--margin-row-none);

			& [data-col] {
				padding-right: var(--gutter-col-none);
				padding-left: var(--gutter-col-none);
			}
		}
	}

	& div[md-gaps="default"] {
		@media (--screen-md) {
			margin-right: var(--margin-row-default);
			margin-left: var(--margin-row-default);

			& [data-col] {
				padding-right: var(--gutter-col-default);
				padding-left: var(--gutter-col-default);
			}
		}
	}

	& div[md-gaps="medium"] {
		@media (--screen-md) {
			margin-right: var(--margin-row-medium);
			margin-left: var(--margin-row-medium);

			& [data-col] {
				padding-right: var(--gutter-col-medium);
				padding-left: var(--gutter-col-medium);
			}
		}
	}

	& div[md-gaps="big"] {
		@media (--screen-md) {
			margin-right: var(--margin-row-big);
			margin-left: var(--margin-row-big);

			& [data-col] {
				padding-right: var(--gutter-col-big);
				padding-left: var(--gutter-col-big);
			}
		}
	}

	& div[lg-gaps="none"] {
		@media (--screen-lg) {
			margin-right: var(--margin-row-none);
			margin-left: var(--margin-row-none);

			& [data-col] {
				padding-right: var(--gutter-col-none);
				padding-left: var(--gutter-col-none);
			}
		}
	}

	& div[lg-gaps="default"] {
		@media (--screen-lg) {
			margin-right: var(--margin-row-default);
			margin-left: var(--margin-row-default);

			& [data-col] {
				padding-right: var(--gutter-col-default);
				padding-left: var(--gutter-col-default);
			}
		}
	}

	& div[lg-gaps="medium"] {
		@media (--screen-lg) {
			margin-right: var(--margin-row-medium);
			margin-left: var(--margin-row-medium);

			& [data-col] {
				padding-right: var(--gutter-col-medium);
				padding-left: var(--gutter-col-medium);
			}
		}
	}

	& div[lg-gaps="big"] {
		@media (--screen-lg) {
			margin-right: var(--margin-row-big);
			margin-left: var(--margin-row-big);

			& [data-col] {
				padding-right: var(--gutter-col-big);
				padding-left: var(--gutter-col-big);
			}
		}
	}

	& div[xl-gaps="none"] {
		@media (--screen-xl) {
			margin-right: var(--margin-row-none);
			margin-left: var(--margin-row-none);

			& [data-col] {
				padding-right: var(--gutter-col-none);
				padding-left: var(--gutter-col-none);
			}
		}
	}

	& div[xl-gaps="default"] {
		@media (--screen-xl) {
			margin-right: var(--margin-row-default);
			margin-left: var(--margin-row-default);

			& [data-col] {
				padding-right: var(--gutter-col-default);
				padding-left: var(--gutter-col-default);
			}
		}
	}

	& div[xl-gaps="medium"] {
		@media (--screen-xl) {
			margin-right: var(--margin-row-medium);
			margin-left: var(--margin-row-medium);

			& [data-col] {
				padding-right: var(--gutter-col-medium);
				padding-left: var(--gutter-col-medium);
			}
		}
	}

	& div[xl-gaps="big"] {
		@media (--screen-xl) {
			margin-right: var(--margin-row-big);
			margin-left: var(--margin-row-big);

			& [data-col] {
				padding-right: var(--gutter-col-big);
				padding-left: var(--gutter-col-big);
			}
		}
	}

	& div[xxl-gaps="none"] {
		@media (--screen-xxl) {
			margin-right: var(--margin-row-none);
			margin-left: var(--margin-row-none);

			& [data-col] {
				padding-right: var(--gutter-col-none);
				padding-left: var(--gutter-col-none);
			}
		}
	}

	& div[xxl-gaps="default"] {
		@media (--screen-xxl) {
			margin-right: var(--margin-row-default);
			margin-left: var(--margin-row-default);

			& [data-col] {
				padding-right: var(--gutter-col-default);
				padding-left: var(--gutter-col-default);
			}
		}
	}

	& div[xxl-gaps="medium"] {
		@media (--screen-xxl) {
			margin-right: var(--margin-row-medium);
			margin-left: var(--margin-row-medium);

			& [data-col] {
				padding-right: var(--gutter-col-medium);
				padding-left: var(--gutter-col-medium);
			}
		}
	}

	& div[xxl-gaps="big"] {
		@media (--screen-xxl) {
			margin-right: var(--margin-row-big);
			margin-left: var(--margin-row-big);

			& [data-col] {
				padding-right: var(--gutter-col-big);
				padding-left: var(--gutter-col-big);
			}
		}
	}

	& div[xxxl-gaps="none"] {
		@media (--screen-xxxl) {
			margin-right: var(--margin-row-none);
			margin-left: var(--margin-row-none);

			& [data-col] {
				padding-right: var(--gutter-col-none);
				padding-left: var(--gutter-col-none);
			}
		}
	}

	& div[xxxl-gaps="default"] {
		@media (--screen-xxxl) {
			margin-right: var(--margin-row-default);
			margin-left: var(--margin-row-default);

			& [data-col] {
				padding-right: var(--gutter-col-default);
				padding-left: var(--gutter-col-default);
			}
		}
	}

	& div[xxxl-gaps="medium"] {
		@media (--screen-xxxl) {
			margin-right: var(--margin-row-medium);
			margin-left: var(--margin-row-medium);

			& [data-col] {
				padding-right: var(--gutter-col-medium);
				padding-left: var(--gutter-col-medium);
			}
		}
	}

	& div[xxxl-gaps="big"] {
		@media (--screen-xxxl) {
			margin-right: var(--margin-row-big);
			margin-left: var(--margin-row-big);

			& [data-col] {
				padding-right: var(--gutter-col-big);
				padding-left: var(--gutter-col-big);
			}
		}
	}

	& div[data-col] {
		@mixin col;
	}
}