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

/* 1. Color gets inherited and used for nested elements with 'currentColor' property */

.c-button {
	//@include flex(inline center);
	@include flex(flex-start center);
	@include font(small, 20, 500);
	padding: 11px 10px;
	background-color: palette(action);
	border: none;
	color: palette(dark);
	text-decoration: none;
	cursor: pointer;
	transition-property: background-color;
	transition-duration: 0.3s;

	&:hover:not(:disabled) {
		background-color: scale-color(palette(action), $lightness: -20%);
	}
	&:active:not(:disabled) {
		transform: translateY(1px);
	}
	&:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
}

.c-button__text {
	padding: 0 15px;
	text-align: center;
}

.c-button__icon {
	display: none; // By default icon is hidden
	position: relative;
	top: 0;
	left: -4px;
	margin-right: 15px;
	transform: scale(0.9);
	transition: transform 0.3s;

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

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

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

	.c-button--internal & {
		transform: translateX(4px) rotate(90deg) scale(0.9);
	}
	.c-button--internal:hover:not(:disabled) & {
		transform: translateX(4px) rotate(90deg) scale(0.9) translateX(4px);
	}
}

.c-button--text {
	background: transparent;
	border: none;
	padding-left: 0;
	color: palette(action);

	.c-button__text {
		padding-left: 0;
	}


	&:hover:not(:disabled) {
		background-color: transparent;
	}
}

.c-button--ghost {
	padding: 10px 9px;
	background: transparent;
	border: 1px solid currentColor;
	color: currentColor;
	transition: color 0.3s, background-color 0.3s, border 0.3s;

	&:hover:not(:disabled) {
		background-color: palette(action);
		border: 1px solid palette(dark);
		color: palette(dark);
	}
}

.c-button--no-corner {
	position: relative;
	padding: 14px 20px;
	&:before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 15px;
		height: 15px;
		background: linear-gradient(45deg, transparent 48%, palette(action) 50%, transparent 52%);
	}
	&:after {
		content: "";
		position: absolute;
		top: -1px;
		right: -1px;
		border-width: 0 16px 16px 0;
		border-style: solid;
		border-color: transparent palette(dark);
	}

	&:hover:not(:disabled) {
		&:before {
			background: linear-gradient(45deg, transparent 48%, palette(action) 50%, transparent 52%);
		}
	}
}

.c-button--no-corner-bottom {
	position: relative;

	&:after {
		content: "";
		position: absolute;
		bottom: -1px;
		left: -1px;
		border-width: 16px 0 0 16px;
		border-style: solid;
		border-color: transparent palette(dark);
	}
}

.c-button--on-dark {
	color: palette(light);

	&:hover:not(:disabled) {
		color: rgba(palette(light), 0.75);
	}
}

.c-button--reversed {
	@include flex(inline flex-start center);
	flex-direction: row-reverse;
	.c-button__icon {
		transform: scale(-0.9);
	}
}