/* # buttons-v2-afo - Do Not Remove */
/* General Styles */
:root {
  --btn-trn-sp: 0.3s; /* { min: 0, max: 1, step: 0.05, friendly: 'Transition Speed' } */
  --btn-trn-tf: ease; /* { friendly: 'Transition Timing Function' } */
}

/* Light Theme */
.lt-bg {
	
	.btn.v1 {
		--btn-bg: var(--buttons);
		--btn-clr: var(--btn-txt-clr-dk);
		
		&.alt {
			--btn-bg: var(--main-bg-alt);
			--btn-clr: var(--btn-txt-clr-dk);
		}
		
	}
	
	.ulk-bg, .alt-bg {
		
		.btn.v1 {
			--btn-clr: var(--btn-txt-clr-dk);
			&.alt {
				--btn-bg: var(--main-bg);
				--btn-clr: var(--btn-txt-clr-lt);
			}
			
		}
		
		[popover].pop .lt-bg .btn.v1 {
			--btn-clr: var(--text);
		}
		
	}

}

/* Dark Theme */
.dk-bg {
	
	.btn.v1 {
		--btn-bg: var(--buttons);
		--btn-clr: var(--btn-txt-clr-dk);
		
		&.alt {
			--btn-bg: var(--main-bg);
			--btn-clr: var(--btn-txt-clr-lt);
		}
		
	}
	
	.ulk-bg, .alt-bg {
		
		.btn.v1 {
			--btn-clr: var(--btn-txt-clr-dk);
			&.alt {
				--btn-bg: var(--main-bg-alt);
				--btn-clr: var(--btn-txt-clr-dk);	
			}
			
		}
		
	}

}

/* V1 [Hovers] */
@media (hover: hover) and (pointer: fine) {
	
	/* 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: var(--main-bg-alt);
			--btn-clr: var(--text-alt);
			background-color: var(--btn-bg);
			
			&.alt {
				--btn-bg: var(--buttons);
				--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: var(--buttons);
					--btn-clr: var(--text-alt);
				}
				
			}
			
			[popover].pop .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: var(--main-bg-alt);
					--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);
			background-color: var(--btn-bg);
			
			&.alt {
				--btn-bg: var(--buttons);
				--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-alt);
		        --btn-clr: var(--text-alt);
		
				&.alt {
					--btn-bg: var(--buttons);
					--btn-clr: var(--text-alt);
				}
				
			}
			
		}
		
	}
		
}

/* Buttons */
.btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: 0.5em;
	text-align: center;
	
	&.v1 {
		--btn-v1-pd-t: 1rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Top'  } */
		--btn-v1-pd-b: 1rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Bottom'  } */
		--btn-v1-pd-l: 1.5rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Left'  } */
		--btn-v1-pd-r: 1.5rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Padding Right'  } */
		--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-tl: 0rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Top Left'  } */
		--btn-v1-bdr-rds-tr: 0rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Top Right'  } */
		--btn-v1-bdr-rds-br: 0rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Bottom Right'  } */
		--btn-v1-bdr-rds-bl: 0rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V1 Border Radius Bottom Left'  } */
		--btn-v1-bdr-rds: var(--btn-v1-bdr-rds-tl) var(--btn-v1-bdr-rds-tr) var(--btn-v1-bdr-rds-br) var(--btn-v1-bdr-rds-bl); /* { readonly: true  } */
		
		--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' } */
		--btn-v1-bx-sdw-o: 0; /* { min: 0, max: 1, step: 0.05, friendly: 'Button V1 Box Shadow Opacity' } */
		
		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: background-color var(--btn-trn-sp) var(--btn-trn-tf) 0s, color var(--btn-trn-sp) var(--btn-trn-tf) 0s, border-color var(--btn-trn-sp) var(--btn-trn-tf) 0s;
		
		&.alt {
			--btn-bg: var(--buttons);
			background-color: var(--btn-bg);
		}
		
		&.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 {
		--btn-v2-pd-t: 0.6rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Top'  } */
		--btn-v2-pd-b: 0.6rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Bottom'  } */
		--btn-v2-pd-l: 0.7rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Left'  } */
		--btn-v2-pd-r: 0.7rem; /* { min: 0.5, max: 2, step: 0.1, friendly: 'Button V2 Padding Right'  } */
		--btn-v2-pd: var(--btn-v2-pd-t) var(--btn-v2-pd-r) var(--btn-v2-pd-b) var(--btn-v2-pd-l); /* { readonly: true  } */
		
		color: inherit;
		padding: var(--btn-v2-pd);
		
		&::before, 
		&::after {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			left: 0;
			border-style: solid;
			transform-origin: bottom center;
		}
		
		&::before {
			bottom: 0;
			width: 100%;
			border-width: 0 0 1px 1px;
			transition: height 0.2s linear 0.4s;
		}
		
		&::after {
			top: 0;
			opacity: 0;
			border-width: 1px 1px 0 0;
			transition: width 0.2s linear 0.2s, height 0.2s linear, opacity 0s linear 0.4s;
		}
	}
}

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

	&:is(a:hover, a:focus-visible) .btn.v2, a:is(:hover, :focus-visible) .btn.v2, .btn.v2:is(:hover, :focus-visible) {
		
		&::before, 
		&::after {
			height: 100%;
		}
		
		&::before {
			transition: height 0.2s linear;
		}
		
		&::after {
			width: 100%;
			opacity: 1;
			transition: width 0.2s linear 0.2s, height 0.2s linear 0.4s, opacity 0s linear 0.2s;
		}
		
	}
		
}