/* General Styles */
:root {
  --btn-trn-sp: 0.5s; /* { min: 0, max: 1, step: 0.05, friendly: 'Transition Speed' } */
  --btn-trn-tf: ease; /* { friendly: 'Transition Timing Function' } */
}
/* Light Colors */
.lt-bg {
	.btn.v1 {
		--btn-bg: linear-gradient(103deg, #1E1532 4.74%, #512E55 101.35%);
		--btn-clr: var(--text-alt);
		--border-color: var(--buttons);
		
		&.alt {
			--btn-bg: transparent;
			--btn-clr: var(--buttons);
			--border-color: var(--buttons);
		}
	}
	
	.btn.v2 {
		--btn-clr: var(--link);
	
		&::before {
			background-color: var(--btn-clr);
		}
	}
	
	.ulk-bg, .alt-bg {
		.btn.v1 {
		    --btn-bg: linear-gradient(103deg, #1E1532 4.74%, #512E55 101.35%);
		    --btn-clr: var(--text-alt);
		    --border-color: var(--text-alt);
			
			&.alt {
			    --btn-bg: var(--main-bg);
			    --btn-clr: var(--text);
			    --border-color: var(--text-alt);
			}
		}
		
		.btn.v2 {
			--btn-clr: var(--link-alt);
		
			&::before {
				background-color: var(--btn-clr);
			}
		}
	}
}

/* Dark Colors */
.dk-bg {
	
	.btn.v1 {
		--btn-bg: linear-gradient(103deg, #1E1532 4.74%, #512E55 101.35%);
		--btn-clr: var(--text-alt);
		--border-color: var(--text-alt);
		
		&.alt {
			--btn-bg: var(--main-bg);
			--btn-clr: var(--text);
			--border-color: var(--text-alt);
		}
	}
	
	.btn.v2 {
		--btn-clr: var(--link-alt);
	
		&::before {
			background-color: var(--btn-clr);
		}
	}
	
	.ulk-bg, .alt-bg {
		.btn.v1 {
		    --btn-bg: linear-gradient(103deg, #1E1532 4.74%, #512E55 101.35%);
		    --btn-clr: var(--text-alt);
		    --border-color: var(--buttons);
			
			&.alt {
				--btn-bg: transparent;
				--btn-clr: var(--buttons);
				--border-color: var(--buttons);
			}
		}
		
		.btn.v2 {
			--btn-clr: var(--buttons);
		
			&::before {
				background-color: var(--btn-clr);
			}
		}
	}
}

/* V1 [Hovers] */
@media (hover: hover) {
	
	/* Light Theme [Hovers] */
	.lt-bg {
		
		&:is(a:hover, a:focus-visible) .btn.v1, a:is(:hover, :focus-visible) .btn.v1, .btn.v1:is(:hover, :focus-visible) {
			--btn-bg: transparent;
			--btn-clr: var(--buttons);
			
			&.alt {
				--btn-bg: linear-gradient(103deg, #1E1532 4.74%, #512E55 101.35%);
				--btn-clr: var(--text-alt);
			}
			
		}
		
		.ulk-bg, .alt-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(--main-bg);
			    --btn-clr: var(--text);
		
				&.alt {
				    --btn-bg: linear-gradient(103deg, #1E1532 4.74%, #512E55 101.35%);
				    --btn-clr: var(--text-alt);
				}
				
			}
			
		}
		
	}
	
	/* Dark Theme [Hovers] */
	.dk-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(--main-bg);
			--btn-clr: var(--text);
			
			&.alt {
				--btn-bg: linear-gradient(103deg, #1E1532 4.74%, #512E55 101.35%);
				--btn-clr: var(--text-alt);
			}
			
		}
		
		.ulk-bg, .alt-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(--main-bg);
				--btn-clr: var(--buttons);
		
				&.alt {
				    --btn-bg: linear-gradient(103deg, #1E1532 4.74%, #512E55 101.35%);
				    --btn-clr: var(--text-alt);
				}
				
			}
			
		}
		
	}
		
}

.btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: 0.75em;
	text-align: center;
	
	svg {
		font-size: 1.5rem;
	}
	
	&.sml {
		svg {
			display: none;
		}
	}

	&.v1 {
		--btn-v1-pd-t: 2rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Top Padding'  } */
		--btn-v1-pd-b: 2rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Bottom Padding'  } */
		--btn-v1-pd-l: 2rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Left Padding'  } */
		--btn-v1-pd-r: 2rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Right Padding'  } */
		--btn-v1-pd: var(--btn-v1-pd-t) var(--btn-v1-pd-r) var(--btn-v1-pd-b) var(--btn-v1-pd-l); /* { readonly: true  } */
		
		--btn-v1-bdr-rds-t: 0.5rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Top Border Radius'  } */
		--btn-v1-bdr-rds-b: 0.5rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Bottom Border Radius'  } */
		--btn-v1-bdr-rds-l: 0.5rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Left Border Radius'  } */
		--btn-v1-bdr-rds-r: 0.5rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Right Border Radius'  } */
		--btn-v1-bdr-rds: var(--btn-v1-bdr-rds-t) var(--btn-v1-bdr-rds-r) var(--btn-v1-bdr-rds-b) var(--btn-v1-bdr-rds-l); /* { readonly: true  } */
		
		--btn-v1-bx-sdw-o: 0rem; /* { min: 0, max: 1, step: 0.05, friendly: 'Button V1 Box Shadow Opacity' } */
		--btn-v1-bx-sdw-x: 0rem; /* { min: 0,  max: 2, step: 0.1, friendly: 'Button V1 Box Shadow \'X\' Position' } */
		--btn-v1-bx-sdw-y: 0rem; /* { min: 0,  max: 2, step: 0.1, friendly: 'Button V1 Box Shadow \'Y\' Position' } */
		--btn-v1-bx-sdw-blr: 1rem; /* { min: 0, max: 4, step: 0.1, friendly: 'Button V1 Box Shadow Blur' } */
	    
	    border: solid 1px var(--border-color);
		color: var(--btn-clr);
		background: var(--btn-bg);
		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) rgba(0, 0, 0, var(--btn-v1-bx-sdw-o));
		
		&.sml {
			--btn-v1-pd-t: 1rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Top Padding'  } */
			--btn-v1-pd-b: 1rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Bottom Padding'  } */
			--btn-v1-pd-l: 1.5rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Left Padding'  } */
			--btn-v1-pd-r: 1.5rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Right Padding'  } */
			--btn-v1-pd: var(--btn-v1-pd-t) var(--btn-v1-pd-r) var(--btn-v1-pd-b) var(--btn-v1-pd-l); /* { readonly: true  } */
		}
	}
	
	&.v2 {
		--btn-v2-pd-t: 0rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Top Padding'  } */
		--btn-v2-pd-b: 0rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Bottom Padding'  } */
		--btn-v2-pd-l: 0rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Left Padding'  } */
		--btn-v2-pd-r: 0rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Right Padding'  } */
	  
		color: var(--btn-clr);
		padding: var(--btn-v2-pd-t) var(--btn-v2-pd-r) var(--btn-v2-pd-b) var(--btn-v2-pd-l);
		
	}
}

/* V2 [Hovers] */
@media (hover: hover) {
	.lt-bg {
		a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) {
			color: var(--text);
			text-decoration: underline;
		}
		
		& .ulk-bg, & .alt-bg {
			a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) {
				color: var(--text-alt);
			}
		}
	}
	
	.dk-bg {
		a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) {
			color: var(--text-alt);
			text-decoration: underline;
		}		
		
		& .ulk-bg, & .alt-bg {
			a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) {
				color: var(--text);
			}
		}
	}
}