.c-button {
	@include font-size(base);
	@include font-weight(regular);
	position: relative;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: space(2) 0;
	color: palette(neutral, 0);
	background-color: palette(neutral, 700);
	background-image: linear-gradient(-7deg, palette(neutral, 1000) 50%, transparent 50%);
	background-position: 0 0;
	background-size: 100% 400%;
	transition: background 250ms ease-in-out;
	border: none;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;

	&:focus {
		outline: none;
		box-shadow: 0 0 4px 2px palette(feedback, focus);
	}
	&:active:not(:disabled) {
		outline: none;
		box-shadow: none !important;
	}
	&:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	&:hover:not(:disabled) {
		background-position: 0 100%;
	}
}

.c-button__text {
	position: relative;
	z-index: 2;
	padding: 0 space(3);
	text-align: center;

	.c-button--icon & {
		padding-right: space(2);
	}
}


.c-button__icon {
	display: none; // By default icon is hidden
	position: relative;
	z-index: 2;
	top: -1px;
	margin-right: space(2);
	transition: transform 300ms;

	.c-button:hover:not(:disabled) & {
		transform: translateX(3px);
	}

	// When icon comes before the text (in the DOM) switch the margin
	&:first-child {
		margin-right: 0;
		margin-left: space(2);
	}

	.c-button--icon & {
		display: block; // Show when has icon modifier
		width: space(2);
	}
}


.c-button--ghost {
	$c-button-border-size: 2px;
	padding: calc(#{space(1.5) - $c-button-border-size}) 0;
	border: $c-button-border-size solid palette(neutral, 900);
	color: palette(neutral, 900);
	background-color: transparent;
	background-image: linear-gradient(-7deg, palette(neutral, 300) 50%, transparent 50%);
	transition-property: color, border;

	&.c-button--on-dark {
		color: palette(neutral, 0);
		border-color: palette(neutral, 00);
		border-width: 1px;

		&:hover:not(:disabled) {
			color: palette(primary, 600);
		}
	}
}