/* .btn-center *******************************/

.btn-center {
	display: flex;
	justify-content: center;
}

/* .btn-clean *******************************/

.btn-clean {
	background-color: transparent;
	border: 0;
	outline: 0;
	padding: 0;
}

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

.btn-icon {
	background-color: transparent;
	border: 0;
	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;
	width: auto;

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

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

	&.btn-link-light {
		color: var(--color-text);

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

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

.btn-main {
	align-items: center;
	background-color: var(--color-brand-primary);
	border: 1px solid var(--color-brand-primary);
  box-shadow: 0 5px 5px rgba(0,0,0,0.2);
	color: #fff;
	display: flex-inline;
	font-family: var(--font-default);
	font-size: 1.2rem;
	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: #fff;
		color: var(--color-brand-secondary);
	}

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