@total_onion/onion-library 1.0.3 → 1.0.5

package/components/fields-core-mixins/core-mixins.scss

@@ -1,1076 +0,0 @@
-// LIBRARY FILE - Do not modify/override here as your changes will be lost when the package is updated.
-@use 'Assets/scss/theme/breakpoints';
-@use 'Assets/scss/modules/library-modules/core-functions/core-functions';
-@use 'sass:math';
-
-@mixin textStyle() {
-	font-weight: var(--font-weight, var(--default-font-weight));
-	text-align: var(--text-align);
-	text-transform: var(--text-transform);
-	color: var(--text-colour);
-}
-
-@mixin device($size: '768px', $type: 'min-width') {
-	@media screen and (#{$type}: #{$size}) {
-		@content;
-	}
-}
-
-@mixin defaultThemeTextColours() {
-	color: var(--default-text-colour-mobile, var(--theme-primary-text-colour));
-
-	@include device(breakpoints.$tabPortrait) {
-		color: var(
-			--default-text-colour-portrait,
-			var(--default-text-colour-desktop)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		color: var(
-			--default-text-colour-desktop,
-			var(--theme-primary-text-colour)
-		);
-	}
-}
-@mixin defaultTextTransform() {
-	text-transform: var(--default-text-transform-mobile);
-
-	@include device(breakpoints.$tabPortrait) {
-		text-transform: var(
-			--default-text-transform-portrait,
-			var(--default-text-transform-desktop)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		text-transform: var(--default-text-transform-desktop);
-	}
-}
-@mixin defaultTextAlign() {
-	text-align: var(--default-text-align-mobile);
-
-	@include device(breakpoints.$tabPortrait) {
-		text-align: var(
-			--default-text-align-portrait,
-			var(--default-text-align-desktop)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		text-align: var(--default-text-align-desktop);
-	}
-}
-@mixin defaultFontWeight() {
-	font-weight: var(--default-font-weight-mobile, var(--default-font-weight));
-
-	@include device(breakpoints.$tabPortrait) {
-		font-weight: var(
-			--default-font-weight-portrait,
-			var(--default-font-weight)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-weight: var(
-			--default-font-weight-desktop,
-			var(--default-font-weight)
-		);
-	}
-}
-
-@mixin defaultFontStyle() {
-	font-style: var(--default-font-style-mobile);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-style: var(
-			--default-font-style-portrait,
-			var(--default-font-style-desktop)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-style: var(--default-font-style-desktop);
-	}
-}
-
-@mixin contentMaxWidth() {
-	@include device(breakpoints.$tabLandscape) {
-		max-width: var(--global-content-max-width);
-		margin-left: auto;
-		margin-right: auto;
-	}
-}
-
-@mixin responsiveShowHide($defaultDisplay: block) {
-	display: var(--display-mobile, $defaultDisplay);
-
-	@include device(breakpoints.$tabPortrait) {
-		display: var(--display-portrait, $defaultDisplay);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		display: var(--display-desktop, $defaultDisplay);
-	}
-}
-
-@mixin lockPosition() {
-	overflow: hidden;
-	touch-action: none;
-	-webkit-overflow-scrolling: none;
-	overscroll-behavior: none;
-}
-
-@mixin contentImage() {
-	place-self: var(--image-position-vertical) var(--image-position-horizontal);
-	width: 100%;
-	translate: var(--image-position-offset-horizontal)
-		var(--image-position-offset-vertical);
-	rotate: var(--image-rotation);
-	z-index: -1;
-	border-radius: var(--content-image-border-radius);
-	max-width: core-functions.fluidSize(
-		var(--image-max-width-mobile),
-		'portrait'
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		max-width: core-functions.fluidSize(
-			var(--image-max-width-portrait),
-			'portrait'
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		max-width: core-functions.fluidSize(
-			var(--image-max-width-landscape),
-			'landscape'
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		max-width: core-functions.fluidSize(
-			var(--image-max-width-desktop),
-			'desktop'
-		);
-	}
-}
-
-@mixin boxShadow() {
-	box-shadow: core-functions.fluidSize(var(--box-shadow-offset-x), 'static')
-		core-functions.fluidSize(var(--box-shadow-offset-y), 'static')
-		core-functions.fluidSize(var(--box-shadow-blur), 'static')
-		core-functions.fluidSize(var(--box-shadow-spread), 'static')
-		var(--box-shadow-colour) var(--box-shadow-position);
-	&:hover {
-		box-shadow: core-functions.fluidSize(
-				var(--box-shadow-hover-offset-x),
-				'static'
-			)
-			core-functions.fluidSize(var(--box-shadow-hover-offset-y), 'static')
-			core-functions.fluidSize(var(--box-shadow-hover-blur), 'static')
-			core-functions.fluidSize(var(--box-shadow-hover-spread), 'static')
-			var(--box-shadow-hover-colour) var(--box-shadow-hover-position);
-	}
-}
-
-@mixin textShadow() {
-	text-shadow: core-functions.fluidSize(var(--text-shadow-offset-x), 'static')
-		core-functions.fluidSize(var(--text-shadow-offset-y), 'static')
-		core-functions.fluidSize(var(--text-shadow-blur), 'static')
-		var(--text-shadow-colour);
-}
-
-//Typography Mixins
-@mixin h1-l {
-	letter-spacing: var(--h1-l-letter-spacing);
-	line-height: var(--h1-l-line-height);
-	font-family: var(--h1-l-font-family);
-	--default-font-weight: var(--h1-l-default-font-weight);
-	font-weight: var(--default-font-weight);
-
-	strong,
-	b {
-		font-weight: var(--h1-l-bold-font-weight);
-	}
-
-	font-size: clamp(
-		var(--h-xl-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--h1-l-mobile), 'mobile'),
-		var(--h-xl-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--h-xl-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--h1-l-portrait), 'portrait'),
-			var(--h-xl-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--h-xl-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--h1-l-landscape), 'landscape'),
-			var(--h-xl-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--h-xl-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--h1-l-desktop), 'desktop'),
-			var(--h-xl-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin h1 {
-	letter-spacing: var(--h1-letter-spacing);
-	line-height: var(--h1-line-height);
-	font-family: var(--h1-font-family);
-	--default-font-weight: var(--h1-default-font-weight);
-	font-weight: var(--default-font-weight);
-
-	strong,
-	b {
-		font-weight: var(--h1-bold-font-weight);
-	}
-
-	font-size: clamp(
-		var(--h-l-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--h1-mobile), 'mobile'),
-		var(--h-l-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--h-l-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--h1-portrait), 'portrait'),
-			var(--h-l-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--h-l-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--h1-landscape), 'landscape'),
-			var(--h-l-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--h-l-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--h1-desktop), 'desktop'),
-			var(--h-l-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin h2 {
-	letter-spacing: var(--h2-letter-spacing);
-	line-height: var(--h2-line-height);
-	font-family: var(--h2-font-family);
-	--default-font-weight: var(--h2-default-font-weight);
-	font-weight: var(--default-font-weight);
-
-	strong,
-	b {
-		font-weight: var(--h2-bold-font-weight);
-	}
-
-	font-size: clamp(
-		var(--h-m-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--h2-mobile), 'mobile'),
-		var(--h-m-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--h-m-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--h2-portrait), 'portrait'),
-			var(--h-m-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--h-m-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--h2-landscape), 'landscape'),
-			var(--h-m-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--h-m-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--h2-desktop), 'desktop'),
-			var(--h-m-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin h3 {
-	letter-spacing: var(--h3-letter-spacing);
-	line-height: var(--h3-line-height);
-	font-family: var(--h3-font-family);
-	--default-font-weight: var(--h3-default-font-weight);
-	font-weight: var(--default-font-weight);
-
-	strong,
-	b {
-		font-weight: var(--h3-bold-font-weight);
-	}
-
-	font-size: clamp(
-		var(--h-s-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--h3-mobile), 'mobile'),
-		var(--h-s-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--h-s-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--h3-portrait), 'portrait'),
-			var(--h-s-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--h-s-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--h3-landscape), 'landscape'),
-			var(--h-s-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--h-s-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--h3-desktop), 'desktop'),
-			var(--h-s-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin h4 {
-	letter-spacing: var(--h4-letter-spacing);
-	line-height: var(--h4-line-height);
-	font-family: var(--h4-font-family);
-	--default-font-weight: var(--h4-default-font-weight);
-	font-weight: var(--default-font-weight);
-
-	strong,
-	b {
-		font-weight: var(--h4-bold-font-weight);
-	}
-
-	font-size: clamp(
-		var(--h-xs-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--h4-mobile), 'mobile'),
-		var(--h-xs-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--h-xs-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--h4-portrait), 'portrait'),
-			var(--h-xs-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--h-xs-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--h4-landscape), 'landscape'),
-			var(--h-xs-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--h-xs-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--h4-desktop), 'desktop'),
-			var(--h-xs-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin h5 {
-	letter-spacing: var(--h5-letter-spacing);
-	line-height: var(--h5-line-height);
-	font-family: var(--h5-font-family);
-	--default-font-weight: var(--h5-default-font-weight);
-	font-weight: var(--default-font-weight);
-
-	strong,
-	b {
-		font-weight: var(--h5-bold-font-weight);
-	}
-
-	font-size: clamp(
-		var(--h-xxs-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--h5-mobile), 'mobile'),
-		var(--h-xxs-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--h-xxs-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--h5-portrait), 'portrait'),
-			var(--h-xxs-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--h-xxs-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--h5-landscape), 'landscape'),
-			var(--h-xxs-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--h-xxs-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--h5-desktop), 'desktop'),
-			var(--h-xxs-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin h6 {
-	letter-spacing: var(--h6-letter-spacing);
-	line-height: var(--h6-line-height);
-	font-family: var(--h6-font-family);
-	--default-font-weight: var(--h6-default-font-weight);
-	font-weight: var(--default-font-weight);
-
-	strong,
-	b {
-		font-weight: var(--h6-bold-font-weight);
-	}
-
-	font-size: clamp(
-		var(--h-xxxs-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--h6-mobile), 'mobile'),
-		var(--h-xxxs-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--h-xxxs-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--h6-portrait), 'portrait'),
-			var(--h-xxxs-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--h-xxxs-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--h6-landscape), 'landscape'),
-			var(--h-xxxs-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--h-xxxs-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--h6-desktop), 'desktop'),
-			var(--h-xxxs-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin sh1 {
-	letter-spacing: var(--sh1-letter-spacing);
-	line-height: var(--sh1-line-height);
-	font-family: var(--sh1-font-family);
-	--default-font-weight: var(--sh1-default-font-weight);
-	font-weight: var(--default-font-weight);
-
-	strong,
-	b {
-		font-weight: var(--sh1-bold-font-weight);
-	}
-
-	font-size: clamp(
-		var(--sh-xl-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--sh1-mobile), 'mobile'),
-		var(--sh-xl-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--sh-xl-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--sh1-portrait), 'portrait'),
-			var(--sh-xl-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--sh-xl-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--sh1-landscape), 'landscape'),
-			var(--sh-xl-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--sh-xl-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--sh1-desktop), 'desktop'),
-			var(--sh-xl-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin sh2 {
-	letter-spacing: var(--sh2-letter-spacing);
-	line-height: var(--sh2-line-height);
-	font-family: var(--sh2-font-family);
-	--default-font-weight: var(--sh2-default-font-weight);
-	font-weight: var(--default-font-weight);
-
-	strong,
-	b {
-		font-weight: var(--sh2-bold-font-weight);
-	}
-
-	font-size: clamp(
-		var(--sh-l-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--sh2-mobile), 'mobile'),
-		var(--sh-l-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--sh-l-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--sh2-portrait), 'portrait'),
-			var(--sh-l-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--sh-l-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--sh2-landscape), 'landscape'),
-			var(--sh-l-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--sh-l-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--sh2-desktop), 'desktop'),
-			var(--sh-l-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin sh3 {
-	letter-spacing: var(--sh3-letter-spacing);
-	line-height: var(--sh3-line-height);
-	font-family: var(--sh3-font-family);
-	--default-font-weight: var(--sh3-default-font-weight);
-	font-weight: var(--default-font-weight);
-
-	strong,
-	b {
-		font-weight: var(--sh3-bold-font-weight);
-	}
-
-	font-size: clamp(
-		var(--sh-m-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--sh3-mobile), 'mobile'),
-		var(--sh-m-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--sh-m-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--sh3-portrait), 'portrait'),
-			var(--sh-m-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--sh-m-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--sh3-landscape), 'landscape'),
-			var(--sh-m-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--sh-m-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--sh3-desktop), 'desktop'),
-			var(--sh-m-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin sh4 {
-	letter-spacing: var(--sh4-letter-spacing);
-	line-height: var(--sh4-line-height);
-	font-family: var(--sh4-font-family);
-	--default-font-weight: var(--sh4-default-font-weight);
-	font-weight: var(--default-font-weight);
-
-	strong,
-	b {
-		font-weight: var(--sh4-bold-font-weight);
-	}
-
-	font-size: clamp(
-		var(--sh-s-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--sh4-mobile), 'mobile'),
-		var(--sh-s-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--sh-s-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--sh4-portrait), 'portrait'),
-			var(--sh-s-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--sh-s-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--sh4-landscape), 'landscape'),
-			var(--sh-s-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--sh-s-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--sh4-desktop), 'desktop'),
-			var(--sh-s-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin sh5 {
-	letter-spacing: var(--sh5-letter-spacing);
-	line-height: var(--sh5-line-height);
-	font-family: var(--sh5-font-family);
-	--default-font-weight: var(--sh5-default-font-weight);
-	font-weight: var(--default-font-weight);
-
-	strong,
-	b {
-		font-weight: var(--sh5-bold-font-weight);
-	}
-
-	font-size: clamp(
-		var(--sh-xs-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--sh5-mobile), 'mobile'),
-		var(--sh-xs-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--sh-xs-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--sh5-portrait), 'portrait'),
-			var(--sh-xs-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--sh-xs-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--sh5-landscape), 'landscape'),
-			var(--sh-xs-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--sh-xs-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--sh5-desktop), 'desktop'),
-			var(--sh-xs-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin sh6 {
-	letter-spacing: var(--sh6-letter-spacing);
-	line-height: var(--sh6-line-height);
-	font-family: var(--sh6-font-family);
-	--default-font-weight: var(--sh6-default-font-weight);
-	font-weight: var(--default-font-weight);
-
-	strong,
-	b {
-		font-weight: var(--sh6-bold-font-weight);
-	}
-
-	font-size: clamp(
-		var(--sh-xxs-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--sh6-mobile), 'mobile'),
-		var(--sh-xxs-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--sh-xxs-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--sh6-portrait), 'portrait'),
-			var(--sh-xxs-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--sh-xxs-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--sh6-landscape), 'landscape'),
-			var(--sh-xxs-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--sh-xxs-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--sh6-desktop), 'desktop'),
-			var(--sh-xxs-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin p-l {
-	line-height: var(--paragraph-line-height);
-	letter-spacing: var(--paragraph-letter-spacing);
-	font-family: var(--paragraph-font-family);
-
-	strong,
-	b {
-		font-weight: var(--paragraph-bold-font-weight);
-	}
-
-	&:has(.font-tertiary) {
-		line-height: calc(
-			var(--paragraph-line-height) *
-				var(--global-line-height-multiplier-tertiary)
-		);
-	}
-
-	em {
-		font-style: italic;
-	}
-
-	font-size: clamp(
-		var(--p-l-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--p-l-mobile), 'mobile'),
-		var(--p-l-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--p-l-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--p-l-portrait), 'portrait'),
-			var(--p-l-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--p-l-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--p-l-landscape), 'landscape'),
-			var(--p-l-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--p-l-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--p-l-desktop), 'desktop'),
-			var(--p-l-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin p {
-	line-height: var(--paragraph-line-height);
-	letter-spacing: var(--paragraph-letter-spacing);
-	font-family: var(--paragraph-font-family);
-	--default-font-weight: var(--paragraph-default-font-weight);
-	font-weight: var(--default-font-weight);
-
-	strong,
-	b {
-		font-weight: var(--paragraph-bold-font-weight);
-	}
-
-	&:has(.font-tertiary) {
-		line-height: calc(
-			var(--paragraph-line-height) *
-				var(--global-line-height-multiplier-tertiary)
-		);
-	}
-
-	em {
-		font-style: italic;
-	}
-
-	font-size: clamp(
-		var(--p-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--p-mobile), 'mobile'),
-		var(--p-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--p-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--p-portrait), 'portrait'),
-			var(--p-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--p-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--p-landscape), 'landscape'),
-			var(--p-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--p-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--p-desktop), 'desktop'),
-			var(--p-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin p-s {
-	line-height: var(--paragraph-line-height);
-	letter-spacing: var(--paragraph-letter-spacing);
-	font-family: var(--paragraph-font-family);
-
-	strong,
-	b {
-		font-weight: var(--paragraph-bold-font-weight);
-	}
-
-	&:has(.font-tertiary) {
-		line-height: calc(
-			var(--paragraph-line-height) *
-				var(--global-line-height-multiplier-tertiary)
-		);
-	}
-
-	em {
-		font-style: italic;
-	}
-
-	font-size: clamp(
-		var(--p-s-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--p-s-mobile), 'mobile'),
-		var(--p-s-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--p-s-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--p-s-portrait), 'portrait'),
-			var(--p-s-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--p-s-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--p-s-landscape), 'landscape'),
-			var(--p-s-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--p-s-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--p-s-desktop), 'desktop'),
-			var(--p-s-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin p-xs {
-	line-height: var(--paragraph-line-height);
-	letter-spacing: var(--paragraph-letter-spacing);
-	font-family: var(--paragraph-font-family);
-
-	strong,
-	b {
-		font-weight: var(--paragraph-bold-font-weight);
-	}
-
-	&:has(.font-tertiary) {
-		line-height: calc(
-			var(--paragraph-line-height) *
-				var(--global-line-height-multiplier-tertiary)
-		);
-	}
-
-	em {
-		font-style: italic;
-	}
-
-	font-size: clamp(
-		var(--p-xs-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--p-xs-mobile), 'mobile'),
-		var(--p-xs-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--p-xs-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--p-xs-portrait), 'portrait'),
-			var(--p-xs-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--p-xs-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--p-xs-landscape), 'landscape'),
-			var(--p-xs-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--p-xs-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--p-xs-desktop), 'desktop'),
-			var(--p-xs-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin p-xxs {
-	line-height: var(--paragraph-line-height);
-	letter-spacing: var(--paragraph-letter-spacing);
-	font-family: var(--paragraph-font-family);
-
-	strong,
-	b {
-		font-weight: var(--paragraph-bold-font-weight);
-	}
-
-	&:has(.font-tertiary) {
-		line-height: calc(
-			var(--paragraph-line-height) *
-				var(--global-line-height-multiplier-tertiary)
-		);
-	}
-
-	em {
-		font-style: italic;
-	}
-
-	font-size: clamp(
-		var(--p-xxs-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--p-xxs-mobile), 'mobile'),
-		var(--p-xxs-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--p-xxs-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--p-xxs-portrait), 'portrait'),
-			var(--p-xxs-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--p-xxs-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--p-xxs-landscape), 'landscape'),
-			var(--p-xxs-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--p-xxs-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--p-xxs-desktop), 'desktop'),
-			var(--p-xxs-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin p-xxxs {
-	line-height: var(--paragraph-line-height);
-	letter-spacing: var(--paragraph-letter-spacing);
-	font-family: var(--paragraph-font-family);
-
-	strong,
-	b {
-		font-weight: var(--paragraph-bold-font-weight);
-	}
-
-	&:has(.font-tertiary) {
-		line-height: calc(
-			var(--paragraph-line-height) *
-				var(--global-line-height-multiplier-tertiary)
-		);
-	}
-
-	em {
-		font-style: italic;
-	}
-
-	font-size: clamp(
-		var(--p-xxxs-font-size-min-mobile, 10px),
-		core-functions.fontSize(var(--p-xxxs-mobile), 'mobile'),
-		var(--p-xxxs-font-size-max-mobile, 180px)
-	);
-
-	@include device(breakpoints.$tabPortrait) {
-		font-size: clamp(
-			var(--p-xxxs-font-size-min-mobile, 10px),
-			core-functions.fontSize(var(--p-xxxs-portrait), 'portrait'),
-			var(--p-xxxs-font-size-max-mobile, 180px)
-		);
-	}
-
-	@include device(breakpoints.$tabLandscape) {
-		font-size: clamp(
-			var(--p-xxxs-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--p-xxxs-landscape), 'landscape'),
-			var(--p-xxxs-font-size-max-desktop, 180px)
-		);
-	}
-
-	@include device(breakpoints.$desktop) {
-		font-size: clamp(
-			var(--p-xxxs-font-size-min-desktop, 10px),
-			core-functions.fontSize(var(--p-xxxs-desktop), 'desktop'),
-			var(--p-xxxs-font-size-max-desktop, 180px)
-		);
-	}
-}
-
-@mixin fontPrimary() {
-	font-family: var(--primary-font-family), sans-serif;
-	--font-size-multiplier: var(--global-font-multiplier-primary);
-}
-
-@mixin fontSecondary() {
-	font-family: var(--secondary-font-family), sans-serif;
-	--font-size-multiplier: var(--global-font-multiplier-secondary);
-}
-
-@mixin fontTertiary() {
-	font-family: var(--tertiary-font-family), sans-serif;
-	--font-size-multiplier: var(--global-font-multiplier-tertiary);
-}
-
-@mixin fontQuaternary() {
-	font-family: var(--quaternary-font-family), sans-serif;
-	--font-size-multiplier: var(--global-font-multiplier-quaternary);
-}