/* .btn-header *******************************/

.btn-header {
	border: 0;
	color: var(--color-brand-purple);
	font-size: 1.1rem;
	font-weight: 800;
	padding: 0;
	text-decoration: none;
	text-transform: uppercase;
	transition: all ease 0.2s;

	&:hover {
	 	color: var(--color-brand-blue);
 	}

	&:focus {
		outline: 1px dashed #999;
		outline-offset: 5px;
	}
}

/* .btn-main *******************************/

.btn-main {
	align-items: center;
	background-color: var(--color-brand-blue);
	border: 1px solid var(--color-brand-blue);
	border-radius: 50px;
	color: #fff;
	display: flex-inline;
	font-size: 1rem;
	font-weight: 800;
	gap: 10px;
	outline: 0;
	padding: 8px 20px;
	text-decoration: none;
	text-transform: uppercase;
	transition: all ease 0.2s;
	
	&:hover,
	&:focus {
		background-color: #fff;
		border-color: var(--color-brand-dark);
		color: var(--color-brand-dark);
	}

	img {
		height: 20px;
		width: auto;
	}
}

/* .btn-subtle *******************************/

.btn-subtle {
	align-items: center;
	background-color: var(--color-brand-blue-lighter);
	border: 1px solid var(--color-brand-blue-light);
	border-radius: 50px;
	color: #333;
	display: flex-inline;
	font-size: 1rem;
	font-weight: 800;
	gap: 10px;
	outline: 0;
	padding: 8px 20px;
	text-decoration: none;
	text-transform: uppercase;
	transition: all ease 0.2s;
	
	&:hover,
	&:focus {
		background-color: #fff;
		border-color: var(--color-brand-dark);
		color: var(--color-brand-dark);
	}

	img {
		height: 20px;
		width: auto;
	}
}

/* .btn-icon *******************************/

.btn-icon {
	background-color: transparent;
	border: 0;
	color: var(--color-text);
	outline: 0;
	padding: 0;

	img {
		height: 30px;
		opacity: 0.5;
		transition: all ease 0.2s;
		width: auto;

		&:hover {
			opacity: 1;
		}
	}
}

/* .btn-link *******************************/

.btn-link {
	background-color: transparent;
	border: 0;
	color: var(--color-link);
	outline: 0;
	padding: 0;

	&:hover {
		color: var(--color-link);
		text-decoration: none;
	}

	&:focus {
		outline: 1px dashed #999;
		outline-offset: 5px;
	}

	&.btn-link-light {
		color: #fff;

		&:hover {
			color: #fff;
		}
	}
}