/* 
    Buttons 
*/
.btn,
.gform-theme button,
.gform-theme input[type='button'],
.gform-theme input[type='reset'],
.gform-theme input[type='submit'] {
	/* Variables */
	--btn-bg-color: var(--color-primary);
	--btn-bg-color-hover: var(--color-primary-alt);
	--btn-text-color: var(--color-primary-contrast);
	--btn-text-color-hover: var(--color-primary-contrast);

	--btn-padding-x: var(--padding-buttons);
	--btn-padding-y: 0;
	--btn-border-radius: var(--border-radius-buttons);
	--btn-border-width: 0.2rem;
	--btn-min-height: 5rem;
	--btn-gap: 1rem;

	--btn-font: var(--body-font);
	--btn-font-size: var(--body-font-size);
	--btn-font-weight: 700;
	--btn-line-height: 1.2;

	/* Resets */
	outline: 0;
	cursor: pointer;
	appearance: none;
	user-select: none;
	position: relative;
	box-sizing: border-box;
	z-index: 1;

	/* Corners */
	border-radius: var(--border-radius-buttons);

	/* Border */
	border-style: solid;
	border-width: 0;

	/* Spacing and Size */
	padding: var(--btn-padding-y) var(--btn-padding-x);
	margin: 0;
	min-height: var(--btn-min-height);
	vertical-align: middle;
	width: auto;
	overflow: hidden;

	/* Grid and Icons */
	display: inline-grid;
	grid-auto-flow: column;
	place-content: center;
	place-items: center;
	gap: var(--btn-gap);

	/* Text */
	font-family: var(--btn-font);
	font-size: var(--btn-font-size);
	font-style: normal;
	font-weight: var(--btn-font-weight);
	line-height: var(--btn-line-height);
	text-decoration: none;

	/* Colors */
	color: var(--btn-text-color);
	background-color: transparent;
	border-color: transparent;
	box-shadow: 0 0 0 transparent;
	transition: 0.2s ease-in-out;
}

.btn::before,
.btn::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 150%;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	translate: -50% -50%;
	z-index: -1;
}

.btn::before {
	background-color: var(--btn-bg-color);
	z-index: -2;
}

.btn::after {
	background-color: var(--btn-bg-color-hover);
	scale: 0.01;
	opacity: 0;
	z-index: -1;
	transition: 0.3s ease-in-out;
}

/* 
    Hover 
*/
@media (-moz-touch-enabled: 0), (pointer: fine) {
	.btn,
	.gform-theme button,
	.gform-theme input[type='button'],
	.gform-theme input[type='reset'],
	.gform-theme input[type='submit'] {
		transition: 0.2s ease-in-out;
	}

	.btn:not(.btn-animated):hover,
	.gform-theme button:not(.btn-animated):hover,
	.gform-theme input[type='button']:not(.btn-animated):hover,
	.gform-theme input[type='reset']:not(.btn-animated):hover,
	.gform-theme input[type='submit']:not(.btn-animated):hover {
		color: var(--btn-text-color-hover);
		background-color: var(--btn-bg-color-hover);
		border-color: var(--btn-bg-color-hover);
	}

	.btn:hover {
		color: var(--btn-text-color-hover);
	}

	.btn:hover::after {
		scale: 1;
		opacity: 1;
	}
}

/*
    Button icons
*/
.btn:has(i:first-child):not(:last-child) {
	grid-template: 2.4rem 1fr;
}

.btn:has(i:last-child:not(:first-child)) {
	grid-template: 1fr 2.4rem;
}

.btn:has(i:first-child:last-child) {
	padding: 0;
	width: 5rem;
}

/*
    Button outline
*/
.btn-outline {
	/* Border */
	/* border-width: .2rem; */
	box-shadow: inset 0 0 0 var(--btn-border-width) var(--btn-bg-color);

	/* Colors */
	color: var(--btn-bg-color);
	border-color: var(--btn-bg-color) !important;
	background-color: transparent;
}

.btn-outline.btn-animated::before {
	background-color: transparent;
}

.btn-outline.btn-animated::after {
	background-color: var(--btn-bg-color);
}

/* 
    Hover 
*/
@media (-moz-touch-enabled: 0), (pointer: fine) {
	.btn-outline:not(.btn-animated):hover {
		color: var(--btn-text-color);
		background-color: var(--btn-bg-color);
	}

	.btn-outline.btn-animated:hover {
		color: var(--btn-text-color);
		background-color: transparent;
	}
}

/*
    No Pointer
*/
.non-btn {
	cursor: default;
}

/*
    Disabled State
*/
.btn:disabled,
.btn[disabled],
.btn.disabled {
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.5;
}

/*
    Button Colors
*/
.btn-primary {
	--btn-bg-color: var(--color-primary) !important;
	--btn-bg-color-hover: var(--color-primary-alt) !important;
	--btn-text-color: var(--color-primary-contrast) !important;
	--btn-text-color-hover: var(--color-primary-contrast) !important;
}

.btn-secondary {
	--btn-bg-color: var(--color-secondary) !important;
	--btn-bg-color-hover: var(--color-secondary-alt) !important;
	--btn-text-color: var(--color-secondary-contrast) !important;
	--btn-text-color-hover: var(--color-secondary-contrast) !important;
}

.btn-tertiary {
	--btn-bg-color: var(--color-tertiary) !important;
	--btn-bg-color-hover: var(--color-tertiary-alt) !important;
	--btn-text-color: var(--color-tertiary-contrast) !important;
	--btn-text-color-hover: var(--color-tertiary-contrast) !important;
}

.btn-black {
	--btn-bg-color: var(--color-black) !important;
	--btn-bg-color-hover: var(--color-black-alt) !important;
	--btn-text-color: var(--color-black-contrast) !important;
	--btn-text-color-hover: var(--color-black-contrast) !important;
}

.btn-white {
	--btn-bg-color: var(--color-white) !important;
	--btn-bg-color-hover: var(--color-white-alt) !important;
	--btn-text-color: var(--color-white-contrast) !important;
	--btn-text-color-hover: var(--color-white-contrast) !important;
}

.btn-success {
	--btn-bg-color: var(--color-success) !important;
	--btn-bg-color-hover: var(--color-success-alt) !important;
	--btn-text-color: var(--color-success-contrast) !important;
	--btn-text-color-hover: var(--color-success-contrast) !important;
}

.btn-info {
	--btn-bg-color: var(--color-info) !important;
	--btn-bg-color-hover: var(--color-info-alt) !important;
	--btn-text-color: var(--color-info-contrast) !important;
	--btn-text-color-hover: var(--color-info-contrast) !important;
}

.btn-warning {
	--btn-bg-color: var(--color-warning) !important;
	--btn-bg-color-hover: var(--color-warning-alt) !important;
	--btn-text-color: var(--color-warning-contrast) !important;
	--btn-text-color-hover: var(--color-warning-contrast) !important;
}

.btn-error {
	--btn-bg-color: var(--color-error) !important;
	--btn-bg-color-hover: var(--color-error-alt) !important;
	--btn-text-color: var(--color-error-contrast) !important;
	--btn-text-color-hover: var(--color-error-contrast) !important;
}