/* 
    Buttons 
*/
.btn,
form button,
form input[type='button'],
form input[type='reset'],
form 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: 0rem;
	--btn-border-radius: var(--border-radius-buttons);
	--btn-border-width: 0.2rem;
	--btn-min-height: 4.8rem;
	--btn-gap: 1rem;

	--btn-font: var(--heading-font);
	--btn-font-size: 1.3rem;
	--btn-font-weight: 700;
	--btn-line-height: 1;

	/* 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: calc(var(--btn-padding-y) + .15rem) var(--btn-padding-x) var(--btn-padding-y);
	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);
	letter-spacing: 0.2rem;
	text-decoration: none;
	text-transform: uppercase;
	text-box-trim: trim-end;

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

.btn:has(> span) {
	background-color: transparent;
	border-color: transparent;
}

.btn:has(> span)::before,
.btn:has(> span)::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 101%;
	z-index: -1;
}

.btn:has(> span)::before {
	background-color: var(--btn-bg-color);
	height: 100%;
	z-index: -2;
}

.btn:has(> span)::after {
	background-color: var(--btn-bg-color-hover);
	height: 0;
	z-index: -1;
	transition: 0.175s ease-in-out;
}

p + .btn {
	margin-top: 1rem;
}

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

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

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

	.btn:has(> span):hover::after {
		height: 100%;
	}
}

/*
    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 Sizes
*/
.btn-large {
	--btn-min-height: 6.5rem;
	--border-radius-buttons: 3.8rem;
}

/*
    Button Colors
*/
.btn-primary {
	--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-black {
	--btn-bg-color: var(--color-black);
	--btn-bg-color-hover: var(--color-black-alt);
	--btn-text-color: var(--color-black-contrast);
	--btn-text-color-hover: var(--color-black-contrast);
}

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

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

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

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

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

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

.hover\:btn-primary {
	--btn-bg-color-hover: var(--color-primary);
	--btn-text-color-hover: var(--color-primary-contrast);
}

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

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

.hover\:btn-grey {
	--btn-bg-color-hover: var(--color-grey);
	--btn-text-color-hover: var(--color-grey-contrast);
}

.btn-scroll-down {
	--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);

	text-decoration: none;
	font-size: 2.4rem;

	/* center it */
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 5rem;
	width: 5rem;

	display: none;
	justify-content: center;
	align-items: center;

	background-color: var(--color-primary);
	color: var(--color-primary-contrast);
	border-radius: 50%;
	z-index: 10;
}

@media (min-width: 1024px) {
	.btn-scroll-down {
		display: flex;
	}
}

@media (min-width: 1280px) {
	.btn-scroll-down {
		height: 6rem;
		width: 6rem;
	}
}

@media (min-width: 1540px) {
	.btn-scroll-down {
		height: 7rem;
		width: 7rem;
	}
}

.btn-scroll-down i {
	animation: bounce 2s infinite;
	font-size: 2.4rem;
}

.btns {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 1rem;
}
	
@media (max-width: 767px) {
	.btns {
		display: flex;
		width: 100%;
		flex-direction: column;
	}

	.btns > .btn {
		width: 100% !important;
	}
}