/*
-----------------
 Utility Classes 
-----------------
*/
@layer bs-component {
	/* Aspect Ratio */
	.ar-auto { aspect-ratio: auto; }
	.ar-golden { aspect-ratio: 1.6180 / 1; }
	.ar-landscape { aspect-ratio: 4 / 3; }
	.ar-photo { aspect-ratio: 3 / 2; }
	.ar-panorama { aspect-ratio: 10 / 1; }
	.ar-portrait { aspect-ratio: 3 / 4; }
	.ar-square { aspect-ratio: 1 / 1; }
	.ar-ultrawide { aspect-ratio: 18 / 5; }
	.ar-universal { aspect-ratio: 2 / 1; }
	.ar-widescreen { aspect-ratio: 16 / 9; }

	/* Border Radius */
	.bdrs-xs { border-radius: 0.125rem; }
	.bdrs-sm { border-radius: 0.25rem; }
	.bdrs-md { border-radius: 0.5rem; }
	.bdrs-lg { border-radius: 1rem; }
	.bdrs-xl { border-radius: 2rem; }
	.bdrs-circle { border-radius: 50%; }

	/* Color Scheme */
	.cs-dark { color-scheme: dark; }
	.cs-light { color-scheme: light; }
	.cs-opposite {
		background-color: var(--Canvas);
		color: var(--CanvasText);
	}
	@media (prefers-color-scheme: dark) {
		.cs-opposite { color-scheme: light; }
	}
	@media (prefers-color-scheme: light) {
		.cs-opposite { color-scheme: dark; }
	}

	/* Font Sizes */
	.fs-xxs { font-size: xx-small; }
	.fs-xs { font-size: x-small; }
	.fs-sm { font-size: small; }
	.fs-md { font-size: medium; }
	.fs-lg { font-size: large; }
	.fs-xl { font-size: x-large; }
	.fs-xxl { font-size: xx-large; }

	/* Font Weights */
	.fw-100 { font-weight: 100; }
	.fw-200 { font-weight: 200; }
	.fw-300 { font-weight: 300; }
	.fw-400 { font-weight: 400; }
	.fw-500 { font-weight: 500; }
	.fw-600 { font-weight: 600; }
	.fw-700 { font-weight: 700; }
	.fw-800 { font-weight: 800; }
	.fw-900 { font-weight: 900; }

	/* Margin */
	.m-0 { margin: 0; }
	.mb-0 { margin-block: 0; }
	.mb-1 { margin-block: 0.25rem; }
	.mb-2 { margin-block: 0.5rem; }
	.mb-3 { margin-block: 1rem; }
	.mb-4 { margin-block: 2rem; }
	.mi-0 { margin-inline: 0; }
	.mi-1 { margin-inline: 0.25rem; }
	.mi-2 { margin-inline: 0.5rem; }
	.mi-3 { margin-inline: 1rem; }
	.mi-4 { margin-inline: 2rem; }

	/* Padding */
	.p-0 { padding: 0; }
	.pb-0 { padding-block: 0; }
	.pb-1 { padding-block: 0.25rem; }
	.pb-2 { padding-block: 0.5rem; }
	.pb-3 { padding-block: 1rem; }
	.pb-4 { padding-block: 2rem; }
	.pi-0 { padding-inline: 0; }
	.pi-1 { padding-inline: 0.25rem; }
	.pi-2 { padding-inline: 0.5rem; }
	.pi-3 { padding-inline: 1rem; }
	.pi-4 { padding-inline: 2rem; }

	/* Text Align */
	.ta-center { text-align: center; }
	.ta-end { text-align: end; }
	.ta-justify { text-align: justify; }
	.ta-start { text-align: start; }

	/* Link */
	.ui-link {
		color: var(--AccentColor);
		cursor: pointer;
		text-decoration: underline;
	}

	/* TODO: NEW NAME-classes Gradients */
	.--blue-green {
		--ui-gradient: #0077ff, #00e7df, #0077ff;
		&:is(.--grow, .--shrink) { --ui-gradient: #0077ff, #0077ff; }
	}
	.--rainbow {
		--ui-gradient-bgsz-x: 120%;
		--ui-gradient: #ff3e41, #ff8a43, #ffeb7f, #00c9a7, #007ea7, #ff3e41;
	}
	.--red-orange {
		--ui-gradient: #ff1834, #ffc900, #ff1834;
		&:is(.--grow, .--shrink) { --ui-gradient: #ff1834, #ff1834; }
	}
	.--violet-pink {
		--ui-gradient: #7f00de, #ff007e, #7f00de;
	}

	/* Colors */
	[class*="bg-"] {
		background: var(--_bg);
		color: var(--_c, #FFF);
		&:is(button, .ui-button) {
			&:not([disabled],.--disabled):is(:focus-visible, :hover) {
				background: color-mix(in srgb, var(--_bg, var(--ButtonFace)), var(--CanvasText) 25%);
				box-shadow: color-mix(in srgb, var(--_bg), transparent 75%) 0px 0px 0px .16em;
				outline-color: var(--_bg);
				outline-offset: 0.3em;
				&.--light {
					background: var(--_bg);
					color: #FFF;
				}
			}
		}
		&.--light {
			background: color-mix(in srgb, var(--_bg), var(--Canvas) 80%);
			color: var(--_bg);
		}
	}
	.bg-accent {
		--_bg: var(--AccentColor);
		--_c: var(--AccentColorText);
		&.--outline {
			background: #0000;
			color: var(--AccentColor);
			&:is(:focus-visible, :hover) {
				background: var(--AccentColor);
				color: var(--AccentColorText);
			}
		}
	}
	.bg-black {
		--_bg: var(--CanvasText);
		--_c: var(--Canvas);
		&.--outline {
			background: #0000;
			color: var(--CanvasText);
			&:is(:focus-visible, :hover) {
				background: var(--CanvasText);
				color: var(--Canvas);
			}
		}
	}
	.bg-error { --_bg: var(--ColorError); }
	.bg-gray { --_bg: var(--CanvasGray); --_c: var(--CanvasText); }
	.bg-info { --_bg: var(--ColorInfo); }
	.bg-success { --_bg: var(--ColorSuccess); }
	.bg-warning { --_bg: var(--ColorWarning); }

	/* Text Colors */
	.c-accent { color: var(--AccentColor); }
	.c-black { color: var(--CanvasText); }
	.c-error { color: var(--ColorError); }
	.c-gray { color: var(--CanvasGray); }
	.c-info { color: var(--ColorInfo); }
	.c-success { color: var(--ColorSuccess); }
	.c-warning { color: var(--ColorWarning); }
}