/* ==========================================================================
 * Default button
 * ========================================================================== */

$c-button-height: space(6);
$c-button-arrow-width: 14px;


.c-button {
	//@include hyphenate;
	@include font-size(xs);
	@include font-weight(bold);
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-right: $c-button-arrow-width;
	height: $c-button-height;
	border: none;
	background-color: palette(action, 500);
	color: palette(neutral, 0);
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition-property: background-color;
	transition-duration: 0.3s;

	&::after {
		position: absolute;
		right: -#{$c-button-arrow-width};
		top: 0;
		bottom: 0;
		content: '';
		display: block;
		width: 0;
		height: 0;
		border: halve($c-button-height) solid transparent;
		border-left: $c-button-arrow-width solid palette(action, 500);
		border-right-width: 0;
		background-color: transparent;
		transition-property: border;
		transition-duration: 0.3s;
	}

	&:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

	&:hover:not(:disabled) {
		background-color: scale-color(palette(action, 500), $lightness: -20%);

		&::after {
			border-left-color: scale-color(palette(action,500), $lightness: -20%);
		}
	}
}


.c-button__text {
	display: inline-flex;
	align-items: center;
	padding: space(2);
}


.c-button__icon {
	display: none; // By default icon is hidden
	position: relative;
	color: white;
	margin-right: space(2);
	transition: transform 0.3s;
	transform: rotate(-0.25turn);

	.c-button:hover:not(:disabled) & {
		transform: rotate(-0.25turn) translateY(4px);
	}

	.c-button--icon & {
		display: block; // Show when has icon modifier
	}
}