@clayui/css 3.161.0 → 3.163.0

package/src/scss/atlas-custom-properties/variables/_popovers.scss

@@ -1,565 +1,533 @@
-@if ($enable-atlas-custom-properties) {
-	$popover-bg: var(--popover-background-color, $white);
-	$popover-border-color: var(--popover-border-color, transparent);
-	$popover-border-width: var(--popover-border-width, $border-width);
-
-	$popover-border-radius: var(--popover-border-radius, $border-radius);
-	$popover-inner-border-radius: var(
-		--popover-inner-border-radius,
-		calc(#{$popover-border-radius} - #{$popover-border-width})
-	);
-
-	$popover-box-shadow: var(
-		--popover-box-shadow,
-		0 1px 15px -2px rgba(0, 0, 0, 0.2)
-	);
-	$popover-font-size: var(--popover-font-size, $font-size-sm);
-	$popover-max-width: var(--popover-max-width, 232px);
-
-	$popover-inline-scroller-max-height: var(
-		--popover-inline-scroller-max-height,
-		238px
-	);
-
-	$popover-header-bg: var(--popover-header-background-color, $white);
-	$popover-header-border-color: var(--popover-header-border-color, $gray-300);
-	$popover-header-color: var(--popover-header-color, $gray-900);
-	$popover-header-font-size: var(--popover-header-font-size, 14px);
-	$popover-header-font-weight: var(
-		--popover-header-font-weight,
-		$font-weight-semi-bold
-	);
-	$popover-header-margin-x: var(--popover-header-margin-x, 16px);
-	$popover-header-margin-y: var(--popover-header-margin-y, 0);
-	$popover-header-padding-x: var(--popover-header-padding-x, 0);
-	$popover-header-padding-y: var(--popover-header-padding-y, 12px);
-
-	$popover-body-color: var(--popover-body-color, $gray-600);
-	$popover-body-padding-x: var(--popover-body-padding-x, 16px);
-	$popover-body-padding-y: var(--popover-body-padding-y, 12px);
-
-	$popover-offset-border-width: var(
-		--popover-offset-border-width,
-		$popover-inner-border-radius
-	);
-
-	$popover-arrow-color: var(--popover-arrow-color, $popover-bg);
-	$popover-arrow-height: var(--popover-arrow-height, 4.8px);
-	$popover-arrow-offset: var(--popover-arrow-offset, 10px);
-	$popover-arrow-width: var(
-		--popover-arrow-width,
-		calc(#{$popover-arrow-height} * 2)
-	);
-
-	$popover-arrow-outer-color: var(--popover-arrow-outer-color, transparent);
-
-	$popover-bottom-arrow-color: var(
-		--popover-bottom-arrow-color,
-		$popover-header-bg
-	);
-	$popover-bottom-left-arrow-color: var(
-		--popover-bottom-left-arrow-color,
-		$popover-header-bg
-	);
-	$popover-bottom-right-arrow-color: var(
-		--popover-bottom-right-arrow-color,
-		$popover-header-bg
-	);
-	$popover-left-arrow-color: var(
-		--popover-left-arrow-color,
-		$popover-arrow-color
-	);
-	$popover-left-bottom-arrow-color: var(
-		--popover-left-bottom-arrow-color,
-		$popover-arrow-color
-	);
-	$popover-left-top-arrow-color: var(
-		--popover-left-top-arrow-color,
-		$popover-header-bg
-	);
-	$popover-right-arrow-color: var(
-		--popover-right-arrow-color,
-		$popover-arrow-color
-	);
-	$popover-right-bottom-arrow-color: var(
-		--popover-right-bottom-arrow-color,
-		$popover-arrow-color
-	);
-	$popover-right-top-arrow-color: var(
-		--popover-right-top-arrow-color,
-		$popover-header-bg
-	);
-	$popover-top-arrow-color: var(
-		--popover-top-arrow-color,
-		$popover-arrow-color
-	);
-	$popover-top-left-arrow-color: var(
-		--popover-top-left-arrow-color,
-		$popover-arrow-color
-	);
-	$popover-top-right-arrow-color: var(
-		--popover-top-right-arrow-color,
-		$popover-arrow-color
-	);
-
-	// .popover
-
-	$popover: ();
-	$popover: map-deep-merge(
-		(
-			background-clip: padding-box,
-			background-color: $popover-bg,
-			border:
-				var(
-					--popover-border,
-					$popover-border-width solid $popover-border-color
-				),
-			border-radius: clay-enable-rounded($popover-border-radius),
-			box-shadow: clay-enable-shadows($popover-box-shadow),
+$popover-bg: var(--popover-background-color, $white) !default;
+$popover-border-color: var(--popover-border-color, transparent) !default;
+$popover-border-width: var(--popover-border-width, $border-width) !default;
+
+$popover-border-radius: var(--popover-border-radius, $border-radius) !default;
+$popover-inner-border-radius: var(
+	--popover-inner-border-radius,
+	calc(#{$popover-border-radius} - #{$popover-border-width})
+) !default;
+
+$popover-box-shadow: var(
+	--popover-box-shadow,
+	0 1px 15px -2px rgba(0, 0, 0, 0.2)
+) !default;
+$popover-font-size: var(--popover-font-size, $font-size-sm) !default;
+$popover-max-width: var(--popover-max-width, 232px) !default;
+
+$popover-inline-scroller-max-height: var(
+	--popover-inline-scroller-max-height,
+	238px
+) !default;
+
+$popover-header-bg: var(--popover-header-background-color, $white) !default;
+$popover-header-border-color: var(
+	--popover-header-border-color,
+	$gray-300
+) !default;
+$popover-header-color: var(--popover-header-color, $gray-900) !default;
+$popover-header-font-size: var(--popover-header-font-size, 14px) !default;
+$popover-header-font-weight: var(
+	--popover-header-font-weight,
+	$font-weight-semi-bold
+) !default;
+$popover-header-margin-x: var(--popover-header-margin-x, 16px) !default;
+$popover-header-margin-y: var(--popover-header-margin-y, 0) !default;
+$popover-header-padding-x: var(--popover-header-padding-x, 0) !default;
+$popover-header-padding-y: var(--popover-header-padding-y, 12px) !default;
+
+$popover-body-color: var(--popover-body-color, $gray-600) !default;
+$popover-body-padding-x: var(--popover-body-padding-x, 16px) !default;
+$popover-body-padding-y: var(--popover-body-padding-y, 12px) !default;
+
+$popover-offset-border-width: var(
+	--popover-offset-border-width,
+	$popover-inner-border-radius
+) !default;
+
+$popover-arrow-color: var(--popover-arrow-color, $popover-bg) !default;
+$popover-arrow-height: var(--popover-arrow-height, 4.8px) !default;
+$popover-arrow-offset: var(--popover-arrow-offset, 10px) !default;
+$popover-arrow-width: var(
+	--popover-arrow-width,
+	calc(#{$popover-arrow-height} * 2)
+) !default;
+
+$popover-arrow-outer-color: var(
+	--popover-arrow-outer-color,
+	transparent
+) !default;
+
+$popover-bottom-arrow-color: var(
+	--popover-bottom-arrow-color,
+	$popover-header-bg
+) !default;
+$popover-bottom-left-arrow-color: var(
+	--popover-bottom-left-arrow-color,
+	$popover-header-bg
+) !default;
+$popover-bottom-right-arrow-color: var(
+	--popover-bottom-right-arrow-color,
+	$popover-header-bg
+) !default;
+$popover-left-arrow-color: var(
+	--popover-left-arrow-color,
+	$popover-arrow-color
+) !default;
+$popover-left-bottom-arrow-color: var(
+	--popover-left-bottom-arrow-color,
+	$popover-arrow-color
+) !default;
+$popover-left-top-arrow-color: var(
+	--popover-left-top-arrow-color,
+	$popover-header-bg
+) !default;
+$popover-right-arrow-color: var(
+	--popover-right-arrow-color,
+	$popover-arrow-color
+) !default;
+$popover-right-bottom-arrow-color: var(
+	--popover-right-bottom-arrow-color,
+	$popover-arrow-color
+) !default;
+$popover-right-top-arrow-color: var(
+	--popover-right-top-arrow-color,
+	$popover-header-bg
+) !default;
+$popover-top-arrow-color: var(
+	--popover-top-arrow-color,
+	$popover-arrow-color
+) !default;
+$popover-top-left-arrow-color: var(
+	--popover-top-left-arrow-color,
+	$popover-arrow-color
+) !default;
+$popover-top-right-arrow-color: var(
+	--popover-top-right-arrow-color,
+	$popover-arrow-color
+) !default;
+
+// .popover
+
+$popover: () !default;
+$popover: map-deep-merge(
+	(
+		background-clip: padding-box,
+		background-color: $popover-bg,
+		border:
+			var(
+				--popover-border,
+				$popover-border-width solid $popover-border-color
+			),
+		border-radius: clay-enable-rounded($popover-border-radius),
+		box-shadow: clay-enable-shadows($popover-box-shadow),
+		display: block,
+		font-family: var(--popover-font-family, $font-family-base),
+		font-size: $popover-font-size,
+		font-style: normal,
+		font-weight: var(--popover-font-weight, $font-weight-normal),
+		left: var(--left, 0),
+		letter-spacing: var(--popover-letter-spacing, normal),
+		line-break: auto,
+		line-height: var(--popover-line-height, $line-height-base),
+		max-width: $popover-max-width,
+		position: absolute,
+		text-align: left,
+		text-decoration: none,
+		text-shadow: none,
+		text-transform: none,
+		top: 0,
+		white-space: normal,
+		word-break: normal,
+		word-spacing: normal,
+		word-wrap: break-word,
+
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
+
+		arrow: (
 			display: block,
-			font-family: var(--popover-font-family, $font-family-base),
-			font-size: $popover-font-size,
-			font-style: normal,
-			font-weight: var(--popover-font-weight, $font-weight-normal),
-			left: var(--left, 0),
-			letter-spacing: var(--popover-letter-spacing, normal),
-			line-break: auto,
-			line-height: var(--popover-line-height, $line-height-base),
-			max-width: $popover-max-width,
+			height: $popover-arrow-height,
+			margin: 0 $popover-border-radius,
 			position: absolute,
-			text-align: left,
-			text-decoration: none,
-			text-shadow: none,
-			text-transform: none,
-			top: 0,
-			white-space: normal,
-			word-break: normal,
-			word-spacing: normal,
-			word-wrap: break-word,
-
-			focus: (
-				box-shadow: $component-focus-box-shadow,
-				outline: 0,
-			),
+			width: $popover-arrow-width,
 
-			arrow: (
+			before: (
+				border-color: transparent,
+				border-style: solid,
+				content: '',
 				display: block,
-				height: $popover-arrow-height,
-				margin: 0 $popover-border-radius,
 				position: absolute,
-				width: $popover-arrow-width,
-
-				before: (
-					border-color: transparent,
-					border-style: solid,
-					content: '',
-					display: block,
-					position: absolute,
-				),
-
-				after: (
-					border-color: transparent,
-					border-style: solid,
-					content: '',
-					display: block,
-					position: absolute,
-				),
-			),
-
-			inline-scroller: (
-				max-height: $popover-inline-scroller-max-height,
 			),
-		),
-		$popover
-	);
-
-	// Popovers
 
-	$popovers: ();
-	$popovers: map-deep-merge(
-		(
-			popover: $popover,
-		),
-		$popovers
-	);
-
-	// .popover-header
-
-	$popover-header: ();
-	$popover-header: map-deep-merge(
-		(
-			color: $popover-header-color,
-			background-color: $popover-header-bg,
-			border-bottom:
-				$popover-border-width
-				solid
-				unquote('hsl(from #{$popover-header-bg} h s calc(l - 5))'),
-			border-color: $popover-header-border-color,
-			border-top-left-radius:
-				clay-enable-rounded($popover-offset-border-width),
-			border-top-right-radius:
-				clay-enable-rounded($popover-offset-border-width),
-			font-size: $popover-header-font-size,
-			font-weight: $popover-header-font-weight,
-			margin-bottom: $popover-header-margin-y,
-			margin-left: $popover-header-margin-x,
-			margin-right: $popover-header-margin-x,
-			margin-top: $popover-header-margin-y,
-			padding: $popover-header-padding-y $popover-header-padding-x,
-
-			empty: (
-				display: none,
+			after: (
+				border-color: transparent,
+				border-style: solid,
+				content: '',
+				display: block,
+				position: absolute,
 			),
 		),
-		$popover-header
-	);
-
-	// Popover Headers
 
-	$popover-headers: ();
-	$popover-headers: map-deep-merge(
-		(
-			popover-header: $popover-header,
+		inline-scroller: (
+			max-height: $popover-inline-scroller-max-height,
 		),
-		$popover-headers
-	);
-
-	// .popover-body
-
-	$popover-body: ();
-	$popover-body: map-merge(
-		(
-			border-bottom-left-radius:
-				clay-enable-rounded($popover-offset-border-width),
-			border-bottom-right-radius:
-				clay-enable-rounded($popover-offset-border-width),
-			color: $popover-body-color,
-			padding: $popover-body-padding-y $popover-body-padding-x,
+	),
+	$popover
+);
+
+// Popovers
+
+$popovers: () !default;
+$popovers: map-deep-merge(
+	(
+		popover: $popover,
+	),
+	$popovers
+);
+
+// .popover-header
+
+$popover-header: () !default;
+$popover-header: map-deep-merge(
+	(
+		color: $popover-header-color,
+		background-color: $popover-header-bg,
+		border-bottom: $popover-border-width solid
+			unquote('hsl(from #{$popover-header-bg} h s calc(l - 5))'),
+		border-color: $popover-header-border-color,
+		border-top-left-radius:
+			clay-enable-rounded($popover-offset-border-width),
+		border-top-right-radius:
+			clay-enable-rounded($popover-offset-border-width),
+		font-size: $popover-header-font-size,
+		font-weight: $popover-header-font-weight,
+		margin-bottom: $popover-header-margin-y,
+		margin-left: $popover-header-margin-x,
+		margin-right: $popover-header-margin-x,
+		margin-top: $popover-header-margin-y,
+		padding: $popover-header-padding-y $popover-header-padding-x,
+
+		empty: (
+			display: none,
 		),
-		$popover-body
-	);
-
-	// Popover Bodies
-
-	$popover-bodies: ();
-	$popover-bodies: map-deep-merge(
-		(
-			popover-body: $popover-body,
+	),
+	$popover-header
+);
+
+// Popover Headers
+
+$popover-headers: () !default;
+$popover-headers: map-deep-merge(
+	(
+		popover-header: $popover-header,
+	),
+	$popover-headers
+);
+
+// .popover-body
+
+$popover-body: () !default;
+$popover-body: map-merge(
+	(
+		border-bottom-left-radius:
+			clay-enable-rounded($popover-offset-border-width),
+		border-bottom-right-radius:
+			clay-enable-rounded($popover-offset-border-width),
+		color: $popover-body-color,
+		padding: $popover-body-padding-y $popover-body-padding-x,
+	),
+	$popover-body
+);
+
+// Popover Bodies
+
+$popover-bodies: () !default;
+$popover-bodies: map-deep-merge(
+	(
+		popover-body: $popover-body,
+	),
+	$popover-bodies
+);
+
+// Popover Widths
+
+$popover-widths: () !default;
+$popover-widths: map-deep-merge(
+	(
+		popover-width-lg: (
+			max-width: var(--popover-width-lg-max-width, 421px),
 		),
-		$popover-bodies
-	);
-
-	// Popover Widths
-
-	$popover-widths: ();
-	$popover-widths: map-deep-merge(
-		(
-			popover-width-lg: (
-				max-width: var(--popover-width-lg-max-width, 421px),
+	),
+	$popover-widths
+);
+
+// .clay-popover-top, .clay-popover-top-left, .clay-popover-top-right
+
+$clay-popover-top: () !default;
+$clay-popover-top: map-deep-merge(
+	(
+		margin-bottom: $popover-arrow-height,
+
+		arrow: (
+			left: 50%,
+			margin-left: calc(#{$popover-arrow-width} * -0.5),
+			bottom:
+				calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1),
+			margin: 0,
+
+			before: (
+				border-top-color: $popover-arrow-outer-color,
+				border-width: $popover-arrow-height
+					calc(#{$popover-arrow-width} * 0.5) 0,
+				bottom: 0,
 			),
-		),
-		$popover-widths
-	);
-
-	// .clay-popover-top, .clay-popover-top-left, .clay-popover-top-right
-
-	$clay-popover-top: ();
-	$clay-popover-top: map-deep-merge(
-		(
-			margin-bottom: $popover-arrow-height,
-
-			arrow: (
-				left: 50%,
-				margin-left: calc(#{$popover-arrow-width} * -0.5),
-				bottom:
-					calc(
-						(#{$popover-arrow-height} + #{$popover-border-width}) *
-							-1
-					),
-				margin: 0,
-
-				before: (
-					border-top-color: $popover-arrow-outer-color,
-					border-width:
-						$popover-arrow-height
-						calc(#{$popover-arrow-width} * 0.5)
-						0,
-					bottom: 0,
-				),
-
-				after: (
-					border-top-color: $popover-top-arrow-color,
-					border-width:
-						$popover-arrow-height
-						calc(#{$popover-arrow-width} * 0.5)
-						0,
-					bottom: $popover-border-width,
-				),
+
+			after: (
+				border-top-color: $popover-top-arrow-color,
+				border-width: $popover-arrow-height
+					calc(#{$popover-arrow-width} * 0.5) 0,
+				bottom: $popover-border-width,
 			),
 		),
-		$clay-popover-top
-	);
+	),
+	$clay-popover-top
+);
 
-	// .clay-popover-top-left
+// .clay-popover-top-left
 
-	$clay-popover-top-left: ();
-	$clay-popover-top-left: map-deep-merge(
-		(
-			arrow: (
-				left: $popover-arrow-offset,
-				margin: 0,
+$clay-popover-top-left: () !default;
+$clay-popover-top-left: map-deep-merge(
+	(
+		arrow: (
+			left: $popover-arrow-offset,
+			margin: 0,
 
-				after: (
-					border-top-color: $popover-top-left-arrow-color,
-				),
+			after: (
+				border-top-color: $popover-top-left-arrow-color,
 			),
 		),
-		$clay-popover-top-left
-	);
-
-	// .clay-popover-top-right
-
-	$clay-popover-top-right: ();
-	$clay-popover-top-right: map-deep-merge(
-		(
-			arrow: (
-				left: auto,
-				margin: 0,
-				right: $popover-arrow-offset,
-
-				after: (
-					border-top-color: $popover-top-right-arrow-color,
-				),
+	),
+	$clay-popover-top-left
+);
+
+// .clay-popover-top-right
+
+$clay-popover-top-right: () !default;
+$clay-popover-top-right: map-deep-merge(
+	(
+		arrow: (
+			left: auto,
+			margin: 0,
+			right: $popover-arrow-offset,
+
+			after: (
+				border-top-color: $popover-top-right-arrow-color,
 			),
 		),
-		$clay-popover-top-right
-	);
-
-	// .clay-popover-right, .clay-popover-right-bottom, .clay-popover-right-top
-
-	$clay-popover-right: ();
-	$clay-popover-right: map-deep-merge(
-		(
-			margin-left: $popover-arrow-height,
-
-			arrow: (
-				height: $popover-arrow-width,
-				left:
-					calc(
-						(#{$popover-arrow-height} + #{$popover-border-width}) *
-							-1
-					),
-				margin: calc(#{$popover-arrow-height} * -0.5) 0 0,
-				top: 50%,
-				width: $popover-arrow-height,
-
-				before: (
-					border-right-color: $popover-arrow-outer-color,
-					border-width:
-						calc(#{$popover-arrow-width} * 0.5)
-						$popover-arrow-height
-						calc(#{$popover-arrow-width} * 0.5)
-						0,
-					left: 0,
-				),
-
-				after: (
-					border-right-color: $popover-right-arrow-color,
-					border-width:
-						calc(#{$popover-arrow-width} * 0.5)
-						$popover-arrow-height
-						calc(#{$popover-arrow-width} * 0.5)
-						0,
-					left: $popover-border-width,
-				),
+	),
+	$clay-popover-top-right
+);
+
+// .clay-popover-right, .clay-popover-right-bottom, .clay-popover-right-top
+
+$clay-popover-right: () !default;
+$clay-popover-right: map-deep-merge(
+	(
+		margin-left: $popover-arrow-height,
+
+		arrow: (
+			height: $popover-arrow-width,
+			left:
+				calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1),
+			margin: calc(#{$popover-arrow-height} * -0.5) 0 0,
+			top: 50%,
+			width: $popover-arrow-height,
+
+			before: (
+				border-right-color: $popover-arrow-outer-color,
+				border-width: calc(#{$popover-arrow-width} * 0.5)
+					$popover-arrow-height calc(#{$popover-arrow-width} * 0.5) 0,
+				left: 0,
+			),
+
+			after: (
+				border-right-color: $popover-right-arrow-color,
+				border-width: calc(#{$popover-arrow-width} * 0.5)
+					$popover-arrow-height calc(#{$popover-arrow-width} * 0.5) 0,
+				left: $popover-border-width,
 			),
 		),
-		$clay-popover-right
-	);
-
-	// .clay-popover-right-bottom
-
-	$clay-popover-right-bottom: ();
-	$clay-popover-right-bottom: map-deep-merge(
-		(
-			arrow: (
-				bottom: $popover-arrow-offset,
-				margin: 0,
-				top: auto,
-
-				after: (
-					border-right-color: $popover-right-bottom-arrow-color,
-				),
+	),
+	$clay-popover-right
+);
+
+// .clay-popover-right-bottom
+
+$clay-popover-right-bottom: () !default;
+$clay-popover-right-bottom: map-deep-merge(
+	(
+		arrow: (
+			bottom: $popover-arrow-offset,
+			margin: 0,
+			top: auto,
+
+			after: (
+				border-right-color: $popover-right-bottom-arrow-color,
 			),
 		),
-		$clay-popover-right-bottom
-	);
+	),
+	$clay-popover-right-bottom
+);
 
-	// .clay-popover-right-top
+// .clay-popover-right-top
 
-	$clay-popover-right-top: ();
-	$clay-popover-right-top: map-deep-merge(
-		(
-			arrow: (
-				margin: 0,
-				top: $popover-arrow-offset,
+$clay-popover-right-top: () !default;
+$clay-popover-right-top: map-deep-merge(
+	(
+		arrow: (
+			margin: 0,
+			top: $popover-arrow-offset,
 
-				after: (
-					border-right-color: $popover-right-top-arrow-color,
-				),
+			after: (
+				border-right-color: $popover-right-top-arrow-color,
 			),
 		),
-		$clay-popover-right-top
-	);
-
-	// .clay-popover-bottom, .clay-popover-bottom-left, .clay-popover-bottom-right
-
-	$clay-popover-bottom: ();
-	$clay-popover-bottom: map-deep-merge(
-		(
-			margin-top: $popover-arrow-height,
-
-			arrow: (
-				left: 50%,
-				margin: 0 0 0 calc(#{$popover-arrow-width} * -0.5),
-				top:
-					calc(
-						(#{$popover-arrow-height} + #{$popover-border-width}) *
-							-1
-					),
-				before: (
-					border-bottom-color: $popover-arrow-outer-color,
-					border-width:
-						0
-						calc(#{$popover-arrow-width} * 0.5)
-						$popover-arrow-height
-						calc(#{$popover-arrow-width} * 0.5),
-					top: 0,
-				),
-
-				after: (
-					border-bottom-color: $popover-bottom-arrow-color,
-					border-width:
-						0
-						calc(#{$popover-arrow-width} * 0.5)
-						$popover-arrow-height
-						calc(#{$popover-arrow-width} * 0.5),
-					top: $popover-border-width,
-				),
+	),
+	$clay-popover-right-top
+);
+
+// .clay-popover-bottom, .clay-popover-bottom-left, .clay-popover-bottom-right
+
+$clay-popover-bottom: () !default;
+$clay-popover-bottom: map-deep-merge(
+	(
+		margin-top: $popover-arrow-height,
+
+		arrow: (
+			left: 50%,
+			margin: 0 0 0 calc(#{$popover-arrow-width} * -0.5),
+			top:
+				calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1),
+			before: (
+				border-bottom-color: $popover-arrow-outer-color,
+				border-width: 0 calc(#{$popover-arrow-width} * 0.5)
+					$popover-arrow-height calc(#{$popover-arrow-width} * 0.5),
+				top: 0,
+			),
+
+			after: (
+				border-bottom-color: $popover-bottom-arrow-color,
+				border-width: 0 calc(#{$popover-arrow-width} * 0.5)
+					$popover-arrow-height calc(#{$popover-arrow-width} * 0.5),
+				top: $popover-border-width,
 			),
 		),
-		$clay-popover-bottom
-	);
+	),
+	$clay-popover-bottom
+);
 
-	// .clay-popover-bottom-left
+// .clay-popover-bottom-left
 
-	$clay-popover-bottom-left: ();
-	$clay-popover-bottom-left: map-deep-merge(
-		(
-			arrow: (
-				left: $popover-arrow-offset,
-				margin: 0,
+$clay-popover-bottom-left: () !default;
+$clay-popover-bottom-left: map-deep-merge(
+	(
+		arrow: (
+			left: $popover-arrow-offset,
+			margin: 0,
 
-				after: (
-					border-bottom-color: $popover-bottom-left-arrow-color,
-				),
+			after: (
+				border-bottom-color: $popover-bottom-left-arrow-color,
 			),
 		),
-		$clay-popover-bottom-left
-	);
-
-	// .clay-popover-bottom-right
-
-	$clay-popover-bottom-right: ();
-	$clay-popover-bottom-right: map-deep-merge(
-		(
-			arrow: (
-				left: auto,
-				margin: 0,
-				right: $popover-arrow-offset,
-
-				after: (
-					border-bottom-color: $popover-bottom-right-arrow-color,
-				),
+	),
+	$clay-popover-bottom-left
+);
+
+// .clay-popover-bottom-right
+
+$clay-popover-bottom-right: () !default;
+$clay-popover-bottom-right: map-deep-merge(
+	(
+		arrow: (
+			left: auto,
+			margin: 0,
+			right: $popover-arrow-offset,
+
+			after: (
+				border-bottom-color: $popover-bottom-right-arrow-color,
 			),
 		),
-		$clay-popover-bottom-right
-	);
-
-	// .clay-popover-left, .clay-popover-left-bottom, .clay-popover-left-top
-
-	$clay-popover-left: ();
-	$clay-popover-left: map-deep-merge(
-		(
-			margin-right: $popover-arrow-height,
-
-			arrow: (
-				height: $popover-arrow-width,
-				margin: calc(#{$popover-arrow-height} * -0.5) 0 0,
-				right:
-					calc(
-						(#{$popover-arrow-height} + #{$popover-border-width}) *
-							-1
-					),
-				top: 50%,
-				width: $popover-arrow-height,
-
-				before: (
-					border-left-color: $popover-arrow-outer-color,
-					border-width:
-						calc(#{$popover-arrow-width} * 0.5)
-						0
-						calc(#{$popover-arrow-width} * 0.5)
-						$popover-arrow-height,
-					right: 0,
-				),
-
-				after: (
-					border-left-color: $popover-left-arrow-color,
-					border-width:
-						calc(#{$popover-arrow-width} * 0.5)
-						0
-						calc(#{$popover-arrow-width} * 0.5)
-						$popover-arrow-height,
-					right: $popover-border-width,
-				),
+	),
+	$clay-popover-bottom-right
+);
+
+// .clay-popover-left, .clay-popover-left-bottom, .clay-popover-left-top
+
+$clay-popover-left: () !default;
+$clay-popover-left: map-deep-merge(
+	(
+		margin-right: $popover-arrow-height,
+
+		arrow: (
+			height: $popover-arrow-width,
+			margin: calc(#{$popover-arrow-height} * -0.5) 0 0,
+			right:
+				calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1),
+			top: 50%,
+			width: $popover-arrow-height,
+
+			before: (
+				border-left-color: $popover-arrow-outer-color,
+				border-width: calc(#{$popover-arrow-width} * 0.5) 0
+					calc(#{$popover-arrow-width} * 0.5) $popover-arrow-height,
+				right: 0,
+			),
+
+			after: (
+				border-left-color: $popover-left-arrow-color,
+				border-width: calc(#{$popover-arrow-width} * 0.5) 0
+					calc(#{$popover-arrow-width} * 0.5) $popover-arrow-height,
+				right: $popover-border-width,
 			),
 		),
-		$clay-popover-left
-	);
-
-	// .clay-popover-left-bottom
-
-	$clay-popover-left-bottom: ();
-	$clay-popover-left-bottom: map-deep-merge(
-		(
-			arrow: (
-				bottom: $popover-arrow-offset,
-				margin: 0,
-				top: auto,
-
-				after: (
-					border-left-color: $popover-left-bottom-arrow-color,
-				),
+	),
+	$clay-popover-left
+);
+
+// .clay-popover-left-bottom
+
+$clay-popover-left-bottom: () !default;
+$clay-popover-left-bottom: map-deep-merge(
+	(
+		arrow: (
+			bottom: $popover-arrow-offset,
+			margin: 0,
+			top: auto,
+
+			after: (
+				border-left-color: $popover-left-bottom-arrow-color,
 			),
 		),
-		$clay-popover-left-bottom
-	);
+	),
+	$clay-popover-left-bottom
+);
 
-	// .clay-popover-left-top
+// .clay-popover-left-top
 
-	$clay-popover-left-top: ();
-	$clay-popover-left-top: map-deep-merge(
-		(
-			arrow: (
-				margin: 0,
-				top: $popover-arrow-offset,
+$clay-popover-left-top: () !default;
+$clay-popover-left-top: map-deep-merge(
+	(
+		arrow: (
+			margin: 0,
+			top: $popover-arrow-offset,
 
-				after: (
-					border-left-color: $popover-left-top-arrow-color,
-				),
+			after: (
+				border-left-color: $popover-left-top-arrow-color,
 			),
 		),
-		$clay-popover-left-top
-	);
-}
+	),
+	$clay-popover-left-top
+);