/* ── Border Radius ──────────────────────────────────────────────────────────── */

[class*="bdr-rds"] {
	border-radius: calc(var(--bdr-rds) * var(--bdr-tl-rds)) calc(var(--bdr-rds) * var(--bdr-tr-rds)) calc(var(--bdr-rds) * var(--bdr-br-rds)) calc(var(--bdr-rds) * var(--bdr-bl-rds));

	.bg {
		border-radius: inherit;
	}
}

.crd {
	border-radius: calc(var(--bdr-rds-crd) * var(--bdr-tl-rds-crd)) calc(var(--bdr-rds-crd) * var(--bdr-tr-rds-crd)) calc(var(--bdr-rds-crd) * var(--bdr-br-rds-crd)) calc(var(--bdr-rds-crd) * var(--bdr-bl-rds-crd));
	overflow: hidden;
}

@media screen and (width < 1280px) {

	.bdr-rds-dsk {
		border-radius: 0;
	}

}

/* ── Box Shadow ─────────────────────────────────────────────────────────────── */

.bx-sdw {
	box-shadow: var(--bx-sdw-x) var(--bx-sdw-y) var(--bx-sdw-blr) hsl(from var(--black) h s l / var(--bx-sdw-o));
}

[data-role="list"]:has(.crd) {
	filter: drop-shadow(var(--bx-sdw-crd-x) var(--bx-sdw-crd-y) var(--bx-sdw-crd-blr) hsl(from var(--black) h s l / var(--bx-sdw-crd-o)));

	.crd {
		box-shadow: none !important;
	}
}

.crd {
	box-shadow: var(--bx-sdw-crd-x) var(--bx-sdw-crd-y) var(--bx-sdw-crd-blr) hsl(from var(--black) h s l / var(--bx-sdw-crd-o));
}

@media screen and (min-width: 1280px) {

	.bx-sdw-dsk:not([src*=".png"]) {
		box-shadow: var(--bx-sdw-dsk-x) var(--bx-sdw-dsk-y) var(--bx-sdw-dsk-blr) hsl(from var(--black) h s l / var(--bx-sdw-dsk-o));
	}

}

/* ── Buttons ────────────────────────────────────────────────────────────────── */

[data-colors="primary-light"] {
	
	.btn.v1 {
		--btn-bg: var(--btn-pry);
		--btn-clr: var(--btn-pry-txt);
	}

	.btn.v2 {
		--btn-bg: var(--btn-sec);
		--btn-clr: var(--btn-sec-txt);
		border-color: var(--bdr-clr);
	}
	
	.ulk-bg, .alt-bg {
		
		.btn.v1 {
			--btn-bg: var(--btn-bg-clr-dk);
			--btn-clr: var(--btn-txt-clr-dk);			
		}

		.btn.v2 {
			--btn-clr: var(--btn-bg-clr-dk-alt);	
			border-color: var(--buttons);
			background-color: hsl(from var(--black) h s l / 0.32);
		}
		
		[popover].pop [data-colors="primary-light"] .btn.v1 {
			--btn-clr: var(--text);
		}
		
	}

}

[data-colors="alternate-light"] {
	
	.btn.v1 {
		--btn-bg: var(--btn-pry);
		--btn-clr: var(--btn-pry-txt);
	}

	.btn.v2 {
		--btn-bg: var(--btn-sec);
		--btn-clr: var(--btn-sec-txt);
		border-color: var(--bdr-clr);
	}
	
	.ulk-bg {
		
		.btn.v1 {
			--btn-bg: var(--btn-bg-clr-dk);
			--btn-clr: var(--btn-txt-clr-dk);			
		}

		.btn.v2 {
			--btn-clr: var(--btn-bg-clr-dk-alt);	
			border-color: var(--buttons);
			background-color: hsl(from var(--black) h s l / 0.32);
		}
		
		[popover].pop [data-colors="primary-light"] .btn.v1 {
			--btn-clr: var(--text);
		}
		
	}

}

/* Dark Theme */
[data-colors="primary-dark"] {
	
	.btn.v1 {
		--btn-bg: var(--btn-pry);
		--btn-clr: var(--btn-pry-txt);
	}

	.btn.v2 {
		--btn-bg: var(--btn-sec);
		--btn-clr: var(--btn-sec-txt);
		border-color: var(--bdr-clr);
	}
	
	.ulk-bg, .alt-bg {

		.btn.v1 {
			--btn-bg: var(--btn-bg-clr-lt);
			--btn-clr: var(--btn-txt-clr-lt);
		}

		.btn.v2 {
			--btn-clr: var(--btn-bg-clr-lt-alt);
			border-color: var(--btn-clr);
			background-color: transparent;
		}

	}

}

[data-colors="alternate-dark"] {
	
	.btn.v1 {
		--btn-bg: var(--btn-pry);
		--btn-clr: var(--btn-pry-txt);
	}

	.btn.v2 {
		--btn-bg: var(--btn-sec);
		--btn-clr: var(--btn-sec-txt);
		border-color: var(--bdr-clr);
	}
	
	.ulk-bg {
		
		.btn.v1 {
			--btn-bg: var(--btn-bg-clr-lt);
			--btn-clr: var(--btn-txt-clr-lt);
		}

		.btn.v2 {
			--btn-clr: var(--btn-bg-clr-lt-alt);
			border-color: var(--btn-clr);
		}
		
	}

}

/* Buttons */
.btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: 0.5em;
	text-align: center;

	&.v1 {
		background-color: var(--btn-bg);
		color: var(--btn-clr);
		padding: var(--btn-v1-pd);
		border-radius: var(--btn-v1-bdr-rds);
		box-shadow: var(--btn-v1-bx-sdw-x) var(--btn-v1-bx-sdw-y) var(--btn-v1-bx-sdw-blr) hsl(from var(--black) h s l / var(--btn-v1-bx-sdw-o));
		transition: 0.3s ease 0s;

		&.sml {
			--btn-v1-pd-v-mtp: 0.5; /* { min: 0.2, max: 0.8, step: 0.05, friendly: 'Button V1 Small Vertical Padding Multiplier' } */
			--btn-v1-pd-h-mtp: 0.5; /* { min: 0.2, max: 0.8, step: 0.05, friendly: 'Button V1 Small Horizontal Padding Multiplier' } */
			--btn-v1-pd: calc(var(--btn-v1-pd-t) * var(--btn-v1-pd-v-mtp)) calc(var(--btn-v1-pd-r) * var(--btn-v1-pd-h-mtp)) calc(var(--btn-v1-pd-b) * var(--btn-v1-pd-v-mtp)) calc(var(--btn-v1-pd-l) * var(--btn-v1-pd-h-mtp)); /* { readonly: true } */
		}

	}

	&.v2 {
		background-color: var(--btn-bg);
		color: var(--btn-clr);
		border-color: var(--btn-bg);
		border-width: var(--btn-v2-bdr-w);
		border-style: var(--btn-v2-bdr-stl);
		padding: var(--btn-v2-pd);
		border-radius: var(--btn-v2-bdr-rds);
		box-shadow: var(--btn-v2-bx-sdw-x) var(--btn-v2-bx-sdw-y) var(--btn-v2-bx-sdw-blr) hsl(from var(--black) h s l / var(--btn-v2-bx-sdw-o));
		transition: 0.3s ease 0s;
	}

	&.v3 {
		--btn-v3-pd-t: 0rem !important;
		--btn-v3-pd-b: 0rem !important;
		--btn-v3-pd-l: 0rem !important;
		--btn-v3-pd-r: 0rem !important;
		--btn-v3-pd: var(--btn-v3-pd-t) var(--btn-v3-pd-r) var(--btn-v3-pd-b) var(--btn-v3-pd-l);

		column-gap: 0.89rem;
		color: var(--btn-trt-txt);
		padding: var(--btn-v3-pd);
		transition: color var(--btn-trn-sp) var(--btn-trn-tf) 0s;

		svg {
			font-size: 1.22rem;
		}
	}
}

/* V1 Hovers */
@media (hover: hover) and (pointer: fine) {

	/* Light Theme */
	[data-colors="primary-light"] {
		
		&:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) {
			--btn-bg: var(--btn-hvr-pry);
			--btn-clr: var(--btn-hvr-pry-txt);
			background-color: var(--btn-bg);
			color: var(--btn-clr);
		}

		&:is(a:hover, a:focus-visible) .btn.v2, a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) {
			--btn-bg: var(--btn-hvr-pry);
			--btn-clr: var(--btn-hvr-pry-txt);
			border-color: var(--btn-bg);
			background-color: var(--btn-bg);
		}
		
		.ulk-bg {
		
			&:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) {
				--btn-bg: var(--btn-hvr-pry);
		        --btn-clr: var(--btn-hvr-pry-txt);
				
			}

			&:is(a:hover, a:focus-visible) .btn.v2, a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) {
				--btn-bg: var(--btn-hvr-pry);
				--btn-clr: var(--btn-hvr-pry-txt);
				border-color: var(--btn-bg);
				background-color: var(--btn-bg);
				
			}
			
			[popover].pop [data-colors="primary-light"] {
				&:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) {
					--btn-bg: var(--main-bg-alt);
					--btn-clr: var(--text-alt);
					
				}
			}
			
		}
		
	}

	[data-colors="alternate-light"] {
		
		&:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) {
			--btn-bg: var(--btn-hvr-pry);
			--btn-clr: var(--btn-hvr-pry-txt);
			background-color: var(--btn-bg);
		}

		&:is(a:hover, a:focus-visible) .btn.v2, a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) {
			--btn-bg: var(--btn-hvr-pry);
			--btn-clr: var(--btn-hvr-pry-txt);
			border-color: var(--btn-bg);
			background-color: var(--btn-bg);
		}
		
		.ulk-bg {
		
			&:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) {
				--btn-bg: var(--btn-hvr-pry);
		        --btn-clr: var(--btn-hvr-pry-txt);
				
			}

			&:is(a:hover, a:focus-visible) .btn.v2, a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) {
				--btn-bg: var(--btn-hvr-pry);
				--btn-clr: var(--btn-hvr-pry-txt);
				border-color: var(--btn-bg);
				background-color: var(--btn-bg);
				
			}
			
			[popover].pop [data-colors="primary-light"] {
				&:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) {
					--btn-bg: var(--main-bg-alt);
					--btn-clr: var(--text-alt);
					
				}
			}
			
		}
		
	}

	/* Dark Theme [Hovers] */
	[data-colors="primary-dark"] {
		
		&:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) {
			--btn-bg: var(--btn-hvr-pry);
			--btn-clr: var(--btn-hvr-pry-txt);
			background-color: var(--btn-bg);
		}

		&:is(a:hover, a:focus-visible) .btn.v2, a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) {
			--btn-bg: var(--btn-hvr-pry);
			--btn-clr: var(--btn-hvr-pry-txt);
			border-color: var(--btn-bg);
			background-color: var(--btn-bg);
		}
		
		.ulk-bg {
		
			&:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) {
				--btn-bg: var(--btn-hvr-pry);
		        --btn-clr: var(--btn-hvr-pry-txt);
				
			}

			&:is(a:hover, a:focus-visible) .btn.v2, a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) {
				--btn-bg: var(--btn-hvr-pry);
				--btn-clr: var(--btn-hvr-pry-txt);
				border-color: var(--btn-bg);
				background-color: var(--btn-bg);
				
			}
			
			[popover].pop [data-colors="primary-light"] {
				&:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) {
					--btn-bg: var(--main-bg-alt);
					--btn-clr: var(--text-alt);
					
				}
			}
			
		}
		
	}

	[data-colors="alternate-dark"] {
		
		&:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) {
			--btn-bg: var(--btn-hvr-pry);
			--btn-clr: var(--btn-hvr-pry-txt);
			background-color: var(--btn-bg);
		}

		&:is(a:hover, a:focus-visible) .btn.v2, a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) {
			--btn-bg: var(--btn-hvr-pry);
			--btn-clr: var(--btn-hvr-pry-txt);
			border-color: var(--btn-bg);
		}
		
		.ulk-bg {
		
			&:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) {
				--btn-bg: var(--btn-hvr-pry);
		        --btn-clr: var(--btn-hvr-pry-txt);
				
			}

			&:is(a:hover, a:focus-visible) .btn.v2, a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) {
				--btn-bg: var(--btn-hvr-pry);
				--btn-clr: var(--btn-hvr-pry-txt);
				border-color: var(--btn-bg);
				background-color: var(--btn-bg);
				
			}
			
			[popover].pop [data-colors="primary-light"] {
				&:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) {
					--btn-bg: var(--main-bg-alt);
					--btn-clr: var(--text-alt);
					
				}
			}
			
		}
		
	}

}

/* V2 Hovers */
@media (hover: hover) and (pointer: fine) {

	&:is(button:hover, button:focus-visible) .btn.v3, button:is(:hover, :focus-visible) .btn.v3,
	&:is(a:hover, a:focus-visible) .btn.v3, a:is(:hover, :focus-visible) .btn.v3, .btn.v3:is(:hover, :focus-visible) {
		color: var(--link-color);
	}

}

/* ── Flair (Shapes & Decorative) ────────────────────────────────────────────── */

.flr_hd {
	width: var(--flr-bx-w-clc);
	overflow: hidden;
	line-height: 1;
	margin-top: var(--flr-mrg-tp);
	margin-bottom: var(--flr-mrg-bt);
	max-width: 100%;
}

[class*="ta_"] .flr_hd,
.flr_hd[class*="ta_"] {
	margin-left: auto;
	margin-right: auto;
}

.flr_hd > svg {
	font-size: var(--flr-bx-w-clc);
	width: auto;
	height: auto;
}

@media screen and (min-width: 700px) {

	.flr_hd.ta_r-700,
	.ta_r-700 .flr_hd {
		margin-left: auto;
		margin-right: 0;
	}

	.flr_hd.ta_l-700,
	.ta_l-700 .flr_hd {
		margin-right: auto;
		margin-left: 0;
	}

}

@media screen and (min-width: 1280px) {

	.flr_hd.ta_r-1280,
	.ta_r-1280 .flr_hd {
		margin-left: auto;
		margin-right: 0;
	}

	.flr_hd.ta_l-1280,
	.ta_l-1280 .flr_hd {
		margin-right: auto;
		margin-left: 0;
	}

}

/* ── Containers & Cards Border ───────────────────────────────────────────────── */

.bg-bx.bdr-bg {
	border: var(--bg-bx-bdr-thc) solid hsl(from var(--bg-bx-bdr-clr) h s l / var(--bg-bx-bdr-clr-o));
}

.crd-bdr {
	border: var(--crd-bdr-w) solid hsl(from var(--bg-bx-bdr-clr) h s l / var(--bg-bx-bdr-clr-o));
}

.crd-bdr-thc {
	border: var(--bg-bx-bdr-thc) solid hsl(from var(--bg-bx-bdr-clr) h s l / var(--bg-bx-bdr-clr-o));
}

/* ── Dividers & Separators ───────────────────────────────────────────────────── */

.tag:not(:has(a)), .tag a {
	border: var(--bdr-stl) var(--bdr-w) hsl(from var(--text-color) h s l / var(--bdr-clr-o));
}