.c-button {
	@include border-radius(s);
	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, 900);
	background-image: linear-gradient(0deg, scale_color(palette(neutral, 900), $lightness: 25%) 50%, transparent 50%);
	background-position: 0 25%;
	background-size: 100% 300%;
	border: none;
	text-decoration: none;
	cursor: pointer;
	transition: all 200ms cubic-bezier(.22,.61,.36,1);

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

	// When data attribute is set change direction
	&[data-icon-pos="before"] {
		flex-direction: row-reverse;
	}

	&[data-button-is-fake="true"] {
		pointer-events: none;
		cursor: text;
	}
}


.c-button__text {
	@include font-size(m);
	@include font-weight(bold);
	padding: 0 space(3);
}


.c-button__icon {
	flex: none;
	display: flex;
	align-items: center;
	margin-right: space(2);
	margin-left: space(-1);

	[data-icon-pos="before"] & {
		margin-right: space(-1);
		margin-left: space(2);
	}
}


// Small button modifier
.c-button--small {
	padding: space(0.5) 0;

	.c-button__text {
		padding: 0 space(1);
	}
}


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

	&:hover {
		color: palette(neutral, 900);
	}

	& .c-button__text {
		padding: 0 calc(#{space(3) - $c-button-border-size});
	}
}


// Modifier for simple button with no background or border, just text
.c-button--text {
	padding: 0;
	color: palette(neutral, 900);
	background: none;

	&:hover {
		color: palette(neutral, 500) !important;
	}

	.c-button__text {
		@include font-weight(regular);
		padding: 0; // reset
		text-decoration: underline;
	}

	.c-button__icon {
		margin-right: 0;
		margin-left: space(1);
	}
}