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

$c-ghost-button-border-size: 1px;

.c-ghost-button {
	@include font-size(base);
	@include font-weight(extraBold);
	@include border-radius(xs);
	line-height: 1;
	display: inline-flex;
	align-items: center;
	height: space(6); // set a fixed height
	padding: space(1) 0;
	border: $c-ghost-button-border-size solid palette(primary, 500);
	background: transparent;
	color: palette(primary, 500);
	text-decoration: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;

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

	&::before {
		content: '';
		position: absolute;
		z-index: 0;
		height: 100%;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		opacity: 0;
		background-image: linear-gradient(to bottom right, palette(neutral, 0), palette(primary, 100));
		transition: all 300ms linear;
	}

	&:hover {
		&::before {
			opacity: 1;
		}
	}
}


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

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

	.c-ghost-button--align-left & {
		text-align: left;
	}

}




.c-ghost-button__icon {
	display: none; // By default icon is hidden
	flex: none;
	position: relative;
	top: 0;
	margin-right: space(2);

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


.c-ghost-button--reverse {
	flex-direction: row-reverse;

	.c-ghost-button__text {
		padding-right: space(4);
		padding-left: space(2);
	}
	.c-ghost-button__icon {
		margin-right: 0;
		margin-left: space(2);
	}
}


.c-ghost-button--login {
	padding: (space(2) - $c-ghost-button-border-size) 0;
	border: $c-ghost-button-border-size solid palette(neutral, 0);
	border-radius:  map-get($border-radius, xs) map-get($border-radius, xs) map-get($border-radius, xl) map-get($border-radius, xs);
	background: transparent;
	color: palette(neutral, 0);

	&::before {
		background-image: linear-gradient(to bottom right, transparent, rgba(palette(neutral, 300), 0.2));
	}
}



.c-ghost-button--white {
	padding: (space(2) - $c-ghost-button-border-size) 0;
	border: $c-ghost-button-border-size solid palette(neutral, 0);
	background: transparent;
	color: palette(neutral, 0);

	&::before {
		background-image: linear-gradient(to bottom right, transparent, rgba(palette(neutral, 300), 0.2));
	}
}


.c-ghost-button--secondary {
	border: $c-ghost-button-border-size solid palette(secondary, 500);
	color: palette(secondary, 500);

	&::before {
		background-image: linear-gradient(to bottom right, palette(neutral, 0), rgba(palette(secondary, 200), 0.7));
	}
}