@clayui/css 3.128.0 → 3.131.0

package/src/scss/cadmin/variables/_loaders.scss

@@ -98,6 +98,54 @@ $cadmin-loading-animation-squares: map-deep-merge(
 			transform: scale(2),
 			width: 1em,
 		),
+		'prefers-reduced-motion': (
+			display: block,
+			height: 1em,
+			margin-left: auto,
+			margin-right: auto,
+			overflow: hidden,
+			position: relative,
+			text-align: left,
+			vertical-align: middle,
+			width: 1em,
+			'&::before': (
+				animation: loading-animation-circle 1s linear infinite,
+				background-color: transparent,
+				border-radius: 50%,
+				box-shadow: -0.03125em -0.375em 0 0 currentColor,
+				content: '',
+				display: block,
+				font-size: inherit,
+				height: 0.25em,
+				left: 50%,
+				margin-left: -0.125em,
+				margin-top: -0.125em,
+				opacity: inherit,
+				position: absolute,
+				top: 50%,
+				transform: none,
+				width: 0.25em,
+			),
+			'&::after': (
+				animation: loading-animation-circle 1s linear infinite,
+				background-color: currentColor,
+				border-radius: 50%,
+				content: '',
+				display: block,
+				font-size: inherit,
+				height: 1em,
+				left: auto,
+				-webkit-mask: #{conic-gradient(transparent 10%, #000),
+				linear-gradient(#000 0 0) content-box},
+				-webkit-mask-composite: source-out,
+				mask-composite: subtract,
+				padding: 0.25em,
+				position: relative,
+				top: auto,
+				transform: none,
+				width: 1em,
+			),
+		),
 	),
 	$cadmin-loading-animation-squares
 );

package/src/scss/components/_cards.scss

@@ -535,7 +535,7 @@
 // Card Page
 
 .card-page {
-	@extend %clay-custom-grid-wrapper !optional;
+	@include clay-map-to-css($card-page);
 
 	&.card-page-equal-height {
 		.card-page-item,
@@ -564,15 +564,15 @@
 }
 
 .card-page-item-directory {
-	@include clay-custom-grid-columns($card-page-item-directory);
+	@include clay-map-to-css($card-page-item-directory);
 }
 
 .card-page-item-asset {
-	@include clay-custom-grid-columns($card-page-item-asset);
+	@include clay-map-to-css($card-page-item-asset);
 }
 
 .card-page-item-user {
-	@include clay-custom-grid-columns($card-page-item-user);
+	@include clay-map-to-css($card-page-item-user);
 }
 
 // Card Interactive

package/src/scss/components/_dropdowns.scss

@@ -99,6 +99,16 @@
 	}
 }
 
+.dropdown-section-grid {
+	@extend %list-unstyled !optional;
+
+	display: grid;
+	gap: 0.5rem 0.75rem;
+	grid-template-columns: repeat(9, 1fr);
+	margin-bottom: 0;
+	padding: map-get($dropdown-section, padding);
+}
+
 // Dropdown Footer
 
 .dropdown-footer {

package/src/scss/components/_forms.scss

@@ -136,20 +136,6 @@ fieldset[disabled] {
 	}
 }
 
-@each $key, $value in $input-palette {
-	@if not clay-is-map-unset($value) {
-		$selector: if(
-			starts-with($key, '.') or starts-with($key, '#'),
-			$key,
-			str-insert($key, '.', 1)
-		);
-
-		#{$selector} {
-			@include clay-form-control-variant($value);
-		}
-	}
-}
-
 .form-control-hidden {
 	left: 0;
 	opacity: 0;
@@ -273,6 +259,22 @@ select.form-control[multiple] {
 	@include clay-select-variant($input-select-multiple);
 }
 
+// Form Control Variants
+
+@each $key, $value in $input-palette {
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($key, '.') or starts-with($key, '#'),
+			$key,
+			str-insert($key, '.', 1)
+		);
+
+		#{$selector} {
+			@include clay-form-control-variant($value);
+		}
+	}
+}
+
 // Form Control Select Variants
 
 @each $key, $value in $form-control-select-palette {

package/src/scss/components/_grid.scss

@@ -201,6 +201,7 @@
 	}
 
 	%clay-custom-grid-wrapper {
+		container-type: inline-size;
 		display: flex;
 		flex-wrap: wrap;
 		list-style: none;

package/src/scss/components/_input-groups.scss

@@ -245,7 +245,8 @@
 			}
 		}
 
-		.btn-monospaced {
+		.btn-monospaced,
+		.input-group-inset-icon {
 			@include clay-button-variant(
 				$input-group-inset-item-btn-monospaced
 			);
@@ -260,6 +261,16 @@
 		}
 	}
 
+	.input-group-inset-icon {
+		align-items: center;
+		display: flex;
+		justify-content: center;
+
+		.lexicon-icon {
+			margin-top: 0;
+		}
+	}
+
 	.input-group-item .input-group-inset-before.form-control {
 		@include border-left-radius(0);
 		@include border-right-radius($input-border-radius);

package/src/scss/components/_type.scss

@@ -130,11 +130,15 @@ mark.clay-dark,
 
 // Lists
 
-.list-unstyled {
+%list-unstyled {
 	list-style: none;
 	padding-left: 0;
 }
 
+.list-unstyled {
+	@extend %list-unstyled;
+}
+
 // Inline turns list items into inline-block
 
 .list-inline {

package/src/scss/components/_utilities-functional-important.scss

@@ -855,4 +855,10 @@
 
 .c-prefers-reduced-motion {
 	@include clay-css($c-prefers-reduced-motion);
+
+	.loading-animation-squares {
+		@include clay-map-to-css(
+			map-deep-get($loading-animation-squares, 'prefers-reduced-motion')
+		);
+	}
 }

package/src/scss/functions/_lx-icons-generated.scss

@@ -780,6 +780,8 @@
 
 	'select': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline select-border" d="M448 64v384H64V64h384M64 0C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64z" fill="#{$color}"/><path class="lexicon-icon-outline select-caret-up" fill="#{$color}" d="M414.5 224H278.8l67.9-67.9z"/><path class="lexicon-icon-outline select-caret-down" fill="#{$color}" d="M278.8 288h135.7l-67.8 67.9z"/><path class="lexicon-icon-outline select-s" d="M104.8 306.8c14.2 20.2 94.7 49.1 96.9-3.6C205 259 89.5 268.5 91.5 193.3c6-77.3 100-83.3 143.7-35.9-6.2 8.6-20.2 26.4-20.2 26.4-43.2-35.8-84.9-17.7-83.6 7.5C129 237 238 215 242.2 300.1c2.8 92.4-135.7 76.4-160.7 34.9l23.3-28.2z" fill="#{$color}"/></svg>',
 
+	'send': '<svg class="lexicon-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M15.343 9.148c.876-.427.876-1.869 0-2.296L1.488.098C.78-.246 0 .356 0 1.246v3.377c0 .951.736 1.74 1.684 1.806l4.65.326h.638c.592 0 1.073.557 1.073 1.245 0 .688-.48 1.245-1.073 1.245h-.637l-4.65.326A1.81 1.81 0 0 0 0 11.377v3.377c0 .89.781 1.492 1.488 1.148l13.855-6.754Z" fill="#{$color}"/></svg>',
+
 	'seo': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M111.994 152.002c0-13.276 10.734-24.001 23.999-24.001 13.265 0 23.999 10.725 23.999 24.001v128.001c0 13.275-10.734 24-23.999 24-13.265 0-23.999-10.725-23.999-24V152.002Zm143.993 96.001c0-13.276 10.734-24.001 23.999-24.001 13.265 0 23.999 10.725 23.999 24.001v32c0 13.275-10.734 24-23.999 24-13.265 0-23.999-10.725-23.999-24v-32Z" fill="#{$color}"/><path class="lexicon-icon-outline" clip-rule="evenodd" d="M499.207 455.48 377.713 333.378C523.706 92.276 229.62-102.426 59.529 59.375-105.563 245.277 101.127 519.98 332.915 378.38l121.494 118.8c35.098 38.6 79.996-6.4 44.798-41.7ZM206.221 63.575c191.891 0 198.091 289.003 0 289.003-192.89 0-187.39-289.003 0-289.003Z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M183.991 200.002c0-13.275 10.734-24 23.999-24 13.265 0 23.999 10.725 23.999 24v80.001c0 13.275-10.734 24-23.999 24-13.265 0-23.999-10.725-23.999-24v-80.001Z" fill="#{$color}"/></svg>',
 
 	'separator': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline separator-content-2" d="M416 448H96c-17.7 0-32-14.3-32-32v-32c0-17.7 14.3-32 32-32h320c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32z" fill="#{$color}"/><path class="lexicon-icon-outline separator-divider" d="M464 272H48c-21.2 0-20.5-32 0-32h416c20.8 0 21.8 32 0 32z" fill="#{$color}"/><path class="lexicon-icon-outline separator-content-1" d="M416 160H96c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h320c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32z" fill="#{$color}"/></svg>',
@@ -832,6 +834,8 @@
 
 	'special-character': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M255.87 32C35.55 43.31 12.72 299.8 151.6 384H96.29c-43.54 0-42.58 64 0 64h127.99v-78.07c0-12.64-7.49-24.01-19.08-29.07C90.01 293.65 105.82 101.28 256.58 96c144.34 3.53 171.57 193.26 50.77 244.86-11.58 5.06-19.08 16.43-19.08 29.07V448h127.99c41.84 0 42.8-64 0-64h-55.31C501.05 301.56 474.7 38.92 255.87 32z" fill="#{$color}"/></svg>',
 
+	'speed': '<svg class="lexicon-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline lx-speed-outline" d="M12.985 6.67A5.962 5.962 0 0 1 14 10.003c0 .702-.121 1.375-.343 2H2.342a5.973 5.973 0 0 1-.342-2c0-3.308 2.694-6 6-6 .604 0 1.188.09 1.738.257l1.55-1.55A7.951 7.951 0 0 0 8 2.004c-4.41 0-8 3.587-8 8 0 .97.174 1.902.492 2.765.297.803 1.065 1.235 1.815 1.235h11.385c.75 0 1.518-.432 1.815-1.235A7.961 7.961 0 0 0 16 10.004a7.958 7.958 0 0 0-1.58-4.768L12.985 6.67Z" fill="#{$color}"/><path class="lexicon-icon-outline lx-speed-dial" d="M6.92 10.162a1.316 1.316 0 0 1 .076-2.078l5.908-4.243a.206.206 0 0 1 .285.291L8.815 9.944a1.316 1.316 0 0 1-1.896.218Z" fill="#{$color}"/></svg>',
+
 	'square-hole-multi': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-square-hole-multi-square-1" d="M460 0H148c-28.6 0-52 23.4-52 52v12h320c17.7 0 32 14.3 32 32v320h12c28.6 0 52-23.4 52-52V52c0-28.6-23.4-52-52-52z" fill="#{$color}"/><path class="lexicon-icon-outline lx-square-hole-multi-square-2" d="M364 96H52c-28.6 0-52 23.4-52 52v312c0 28.6 23.4 52 52 52h312c28.6 0 52-23.4 52-52V148c0-28.6-23.4-52-52-52zm-78 286H130V226h156v156z" fill="#{$color}"/></svg>',
 
 	'square-hole': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M448 0H64A64 64 0 0 0 0 64v384a64 64 0 0 0 64 64h384a64 64 0 0 0 64-64V64a64 64 0 0 0-64-64Zm-96 352H160V160h192Z" fill="#{$color}"/></svg>',
@@ -954,6 +958,8 @@
 
 	'vocabulary': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-vocabulary-a" d="M145.689 252.622c15.808 7.903 35.029 1.497 42.933-14.31L195.777 224h120.446l7.155 14.311c5.607 11.214 16.908 17.697 28.646 17.696 4.81 0 9.694-1.089 14.287-3.386 15.807-7.903 22.214-27.125 14.311-42.932l-96-192a32 32 0 0 0-57.244 0l-96 192c-7.903 15.808-1.496 35.029 14.311 42.933zM256 103.554 284.223 160h-56.446L256 103.554z" fill="#{$color}"/><path class="lexicon-icon-outline lx-vocabulary-b" d="M160 352v-64c0-17.673-14.327-32-32-32H0v256h160c17.673 0 32-14.327 32-32v-96c0-17.673-14.327-32-32-32zm-64-32v32H64v-32h32zm32 128H64v-32h64v32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-vocabulary-c" d="M478.736 448.025c-16.4.646-18.544.48-20.266.344-2.576-.202-5.14-.369-10.47-.369-35.29 0-64-28.71-64-64s28.71-64 64-64c15.178 0 28.193 1.474 28.295 1.485 17.567 2.04 33.444-10.526 35.49-28.08 2.046-17.554-10.526-33.443-28.08-35.49-.67-.078-16.652-1.915-35.705-1.915-70.58 0-128 57.42-128 128s57.42 128 128 128c3.255 0 4.229.076 5.46.173 2.357.185 4.5.325 8.43.325 3.96 0 9.737-.143 19.374-.523 17.659-.698 31.409-15.58 30.71-33.239-.697-17.66-15.608-31.434-33.238-30.71z" fill="#{$color}"/></svg>',
 
+	'voice': '<svg class="lexicon-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M14.139 1.922a.9.9 0 0 0-1.353 1.187c.765.872 1.21 2.267 1.225 3.753.015 1.486-.403 2.886-1.15 3.768a.9.9 0 0 0 1.374 1.163c1.107-1.307 1.594-3.174 1.576-4.95-.018-1.774-.542-3.633-1.672-4.921Zm-8.537 9.265a8.667 8.667 0 0 0-2.5.354c-1.047.314-1.992.837-2.7 1.571-.506.525-.047 1.279.681 1.279h.476c.253 0 .494-.1.698-.25.013-.01.025-.02.039-.029.808-.577 1.999-.928 3.3-.925 1.301.004 2.497.362 3.31.944l.021.015c.202.147.44.245.69.245h.486c.73 0 1.187-.758.676-1.281-.709-.725-1.65-1.246-2.692-1.56a8.714 8.714 0 0 0-2.485-.363ZM2.352 6.79c0 1.041.447 1.973 1.152 2.596.566.5 1.298.802 2.098.802a3.15 3.15 0 0 0 2.089-.795A3.455 3.455 0 0 0 8.85 6.79c0-1.877-1.454-3.398-3.25-3.398-1.794 0-3.25 1.521-3.25 3.398Zm4.5 0c0 .857-.643 1.398-1.25 1.398s-1.25-.54-1.25-1.398c0-.857.643-1.398 1.25-1.398s1.25.54 1.25 1.398Zm2.947-2.915a.75.75 0 0 1 1.06-.027c.832.79 1.22 1.935 1.234 3.029.013 1.093-.348 2.247-1.164 3.05a.75.75 0 1 1-1.052-1.07c.462-.455.725-1.18.716-1.962-.01-.781-.29-1.507-.766-1.96a.75.75 0 0 1-.028-1.06Z" fill="#{$color}"/></svg>',
+
 	'warehouse': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-warehouse-square-1" d="M176 215c0-18.2 14.3-33 32-33h32c17.7 0 32 14.8 32 33v33c0 18.2-14.3 33-32 33h-32c-17.7 0-32-14.8-32-33v-33z" fill="#{$color}"/><path class="lexicon-icon-outline lx-warehouse-square-2" d="M240 347.1c0-18.2-14.3-33-32-33h-32c-17.7 0-32 14.8-32 33v33c0 18.2 14.3 33 32 33h32c17.7 0 32-14.8 32-33v-33z" fill="#{$color}"/><path class="lexicon-icon-outline lx-warehouse-square-3" d="M336 314.1c17.7 0 32 14.8 32 33v33c0 18.2-14.3 33-32 33h-32c-17.7 0-32-14.8-32-33v-33c0-18.2 14.3-33 32-33h32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-warehouse-border" d="M217.6 13.5c22.8-17.6 54-17.6 76.8 0l192 148.6c16.1 12.5 25.6 32.1 25.6 52.9v297.3H0V215c0-20.8 9.5-40.4 25.6-52.9l192-148.6zM448 215 256 66.3 64 215v231.2h384V215z" clip-rule="evenodd" fill-rule="evenodd" fill="#{$color}"/></svg>',
 
 	'warning-full': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="m506.3 409.3-214-353.7c-16.8-30.6-55.8-32.6-72.6 0L5.7 409.3C-8 436.5 5 480 42 480h428c36 0 52.5-43.5 36.3-70.7zM224 392c0-42.5 64-42 64 0 0 41.5-64 42.5-64 0zm64-104c0 42.5-64 40.5-64 0V184c0-43 64-43.5 64 0v104z" fill="#{$color}"/></svg>',

package/src/scss/mixins/_forms.scss

@@ -750,19 +750,6 @@
 						map-get($map, bg-size),
 						map-get($map, background-size)
 					),
-				color:
-					setter(
-						map-get($map, color),
-						if(
-							variable-exists(input-color),
-							$input-color,
-							if(
-								variable-exists(cadmin-input-color),
-								$cadmin-input-color,
-								null
-							)
-						)
-					),
 			)
 		);
 

package/src/scss/mixins/_globals.scss

@@ -436,6 +436,14 @@
 					@media #{clay-str-replace('#{$selector}', '@media ', '')} {
 						@include clay-map-to-css($value);
 					}
+				} @else if (starts-with($selector, '@container ')) {
+					@at-root {
+						@container #{clay-str-replace('#{$selector}', '@container ', '')} {
+							& {
+								@include clay-map-to-css($value);
+							}
+						}
+					}
 				} @else {
 					#{$selector} {
 						@include clay-map-to-css($value);

package/src/scss/mixins/_grid.scss

@@ -128,6 +128,8 @@
 	}
 }
 
+/// @deprecated as of v3.130.0
+
 @mixin clay-custom-grid-columns($map) {
 	@if (type-of($map) == 'map') {
 		$custom-grid-props: map-merge(

package/src/scss/mixins/_loaders.scss

@@ -219,6 +219,12 @@
 			&::after {
 				@include clay-css(map-get($map, after));
 			}
+
+			@media (prefers-reduced-motion: reduce) {
+				@include clay-map-to-css(
+					map-get($map, 'prefers-reduced-motion')
+				);
+			}
 		}
 	}
 }

package/src/scss/variables/_cards.scss

@@ -862,6 +862,16 @@ $user-card: map-deep-merge(
 	$user-card
 );
 
+$card-page: () !default;
+$card-page: map-deep-merge(
+	(
+		container-name: c-card-page,
+		container-type: inline-size,
+		extend: '%clay-custom-grid-wrapper',
+	),
+	$card-page
+);
+
 // Card Page Item Asset
 
 // base: min-width 0, sm min-width: 576px, md: min-width: 768px,
@@ -870,27 +880,25 @@ $user-card: map-deep-merge(
 $card-page-item-asset: () !default;
 $card-page-item-asset: map-deep-merge(
 	(
-		base: (
-			breakpoint: 0,
-			min-width: 193px,
-			padding-left: $grid-gutter-width * 0.5,
-			padding-right: $grid-gutter-width * 0.5,
-		),
-		sm: (
-			breakpoint: map-get($grid-breakpoints, sm),
+		flex-basis: 100%,
+		max-width: 100%,
+		padding-left: $grid-gutter-width * 0.5,
+		padding-right: $grid-gutter-width * 0.5,
+		'@container #{map-get($card-page, container-name)} (min-width: #{map-get($container-max-widths, sm)})':
+		(
 			flex-basis: 50%,
 			max-width: 50%,
 		),
-		md: (
-			breakpoint: map-get($grid-breakpoints, md),
-			flex-basis: 33.3333%,
-			max-width: 33.3333%,
-		),
-		lg: (
-			breakpoint: map-get($grid-breakpoints, lg),
+		'@container #{map-get($card-page, container-name)} (min-width: #{map-get($container-max-widths, lg)})':
+		(
 			flex-basis: 25%,
 			max-width: 25%,
 		),
+		'@container #{map-get($card-page, container-name)} (min-width: #{map-get($container-max-widths, xxl)})':
+		(
+			flex-basis: 20%,
+			max-width: 20%,
+		),
 	),
 	$card-page-item-asset
 );
@@ -901,26 +909,7 @@ $card-page-item-asset: map-deep-merge(
 
 $card-page-item-user: () !default;
 $card-page-item-user: map-deep-merge(
-	(
-		base: (
-			breakpoint: 0,
-			flex-basis: 50%,
-			max-width: 50%,
-			padding-left: $grid-gutter-width * 0.5,
-			padding-right: $grid-gutter-width * 0.5,
-		),
-		sm: (
-			breakpoint: map-get($grid-breakpoints, sm),
-			flex-basis: 33.33333%,
-			max-width: 33.33333%,
-			min-width: 200px,
-		),
-		lg: (
-			breakpoint: map-get($grid-breakpoints, lg),
-			flex-basis: 20%,
-			max-width: 20%,
-		),
-	),
+	$card-page-item-asset,
 	$card-page-item-user
 );
 

package/src/scss/variables/_custom-forms.scss

@@ -536,7 +536,7 @@ $custom-control-outside: () !default;
 $custom-control-outside: map-deep-merge(
 	(
 		label: (
-			display: block,
+			display: inline-block,
 			padding-left:
 				calc(
 					#{$custom-control-indicator-size} + #{$custom-control-description-padding-left}

package/src/scss/variables/_forms.scss

@@ -120,6 +120,16 @@ $input: map-deep-merge(
 // Form Control Variants
 
 $input-palette: () !default;
+$input-palette: map-deep-merge(
+	(
+		'.form-control-shrink': (
+			max-width: 100%,
+			white-space: nowrap,
+			width: min-content,
+		),
+	),
+	$input-palette
+);
 
 // Form Control Plaintext
 

package/src/scss/variables/_loaders.scss

@@ -96,6 +96,54 @@ $loading-animation-squares: map-deep-merge(
 			transform: scale(2),
 			width: 1em,
 		),
+		'prefers-reduced-motion': (
+			display: block,
+			height: 1em,
+			margin-left: auto,
+			margin-right: auto,
+			overflow: hidden,
+			position: relative,
+			text-align: left,
+			vertical-align: middle,
+			width: 1em,
+			'&::before': (
+				animation: loading-animation-circle 1s linear infinite,
+				background-color: transparent,
+				border-radius: 50%,
+				box-shadow: -0.03125em -0.375em 0 0 currentColor,
+				content: '',
+				display: block,
+				font-size: inherit,
+				height: 0.25em,
+				left: 50%,
+				margin-left: -0.125em,
+				margin-top: -0.125em,
+				opacity: inherit,
+				position: absolute,
+				top: 50%,
+				transform: none,
+				width: 0.25em,
+			),
+			'&::after': (
+				animation: loading-animation-circle 1s linear infinite,
+				background-color: currentColor,
+				border-radius: 50%,
+				content: '',
+				display: block,
+				font-size: inherit,
+				height: 1em,
+				left: auto,
+				-webkit-mask: #{conic-gradient(transparent 10%, #000),
+				linear-gradient(#000 0 0) content-box},
+				-webkit-mask-composite: source-out,
+				mask-composite: subtract,
+				padding: 0.25em,
+				position: relative,
+				top: auto,
+				transform: none,
+				width: 1em,
+			),
+		),
 	),
 	$loading-animation-squares
 );