// =============================================================================
// :: Button
// =============================================================================
.c-button {
	position: relative;

	display: inline-block;
	padding: 1.5rem 3rem;

	white-space: nowrap;

	font-family: $font-family-secondary;
	font-weight: $font-weight-medium;
	font-size: 1.8rem;
	line-height: $line-height-base;
	text-decoration: none;
	text-align: center;

	color: $text-color-light;
	background-color: $background-color-pink;
	border-radius: $border-radius-base;
	border: none;

	transition:
		color 0.25s ease-in-out,
		background-color 0.25s ease-in-out,
		transform 0.3s ease-in-out;

	cursor: pointer;

	&:hover {
		background-color: $background-color-purple;

		transform: translateY(0.4rem) scale(0.99);
	}
}

// =============================================================================
// :: Elements
// =============================================================================
.c-button__text {
	display: inline-block;
}

// =============================================================================
// :: Modifiers
// =============================================================================
.c-button--inverted {
	color: $text-color-base;
	background-color: $background-color-base;

	&:hover {
		color: $border-color-light;
		background-color: $background-color-purple;
	}
}

.c-button--secondary {
	color: $text-color-base;
	background-color: $background-color-base;
	border: $border-width-base solid $background-color-pink;

	transition: border 0.25s ease-in-out, transform 0.3s ease-in-out;

	&:hover {
		color: $text-color-base;
		background-color: $background-color-base;
		border: $border-width-base solid $border-color-dark;
	}
}

.c-button--secondary-green {
	border: $border-width-base solid $secondary-color-green;
}

.c-button--close {
	width: 3rem;
	height: 3rem;
	padding: 0;

	@include respond-at(get-breakpoint("tablet")) {
		align-self: flex-end;
		width: 4.5rem;
		height: 4.5rem;
	}
}

// =============================================================================
// :: States
// =============================================================================
.c-button {

	&[disabled],
	&.is-disabled {
		pointer-events: none;

		cursor: not-allowed;
	}
}