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

.btn-header {
	border: 0;
	color: #222;
	font-size: 1.2rem;
	font-weight: 600;
	padding: 0;
	text-decoration: none;
	transition: all ease 0.2s;

	&.active {
		color: #000;
		font-weight: 800;
		text-transform: uppercase;
	}

	&:hover {
		color: #000;
		text-decoration: underline;
 	}

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

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

.btn-main {
	align-items: center;
	background-color: #c6503d ;
	border: 1px solid #c6503d ;
	border-radius: 5px;
	color: #fff;
	display: flex-inline;
	font-size: 0.9rem;
	font-weight: 500;
	gap: 10px;
	outline: 0;
	padding: 5px 10px;
	text-decoration: none;
	transition: all ease 0.2s;
	
	&:hover,
	&:focus {
		background-color: #000;
		border-color: #000;
		color: #fff;
	}

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

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

.btn-subtle {
	align-items: center;
	background-color: #222;
	border: 1px solid #000;
	border-radius: 5px;
	color: #fff;
	display: flex-inline;
	font-size: 1rem;
	font-weight: 500;
	gap: 10px;
	outline: 0;
	padding: 8px 20px;
	text-decoration: none;

	transition: all ease 0.2s;
	
	&:hover,
	&:focus {
		background-color: #fff;
		border-color: #222;
		color: #222;
	}

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

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

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

	img {
		height: 20px;
		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;
		}
	}
}