// ============================================================================
// :: CATEGORY
// ============================================================================
.m-category {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2rem;

	transition: background-color 0.3s ease-in-out;

	cursor: pointer;

	@include respond-at($screen-medium-base) {
		padding: 4rem;
	}
}

// ============================================================================
// :: Components
// ============================================================================
.m-category__link {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
}

.m-category__icon {
	margin-bottom: 3rem;

	font-size: $font-size-3x-large;

	color: $text-color-grey;

	transform-origin: center;

	transition:
		color 0.4s ease-in-out,
		transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.m-category__title {
	font-size: $font-size;
	text-align: center;

	color: $text-color-grey;

	transition: color 0.4s ease-in-out;

	@include respond-at($screen-medium-base) {
		font-size: $font-size-1x-large;
	}
}

// ============================================================================
// :: States
// ============================================================================
.m-category {

	&:active,
	&:hover,
	&.is-active {

		background-color: $background-color-white;

		.m-category__title {
			color: $text-color;
		}

		.m-category__icon {
			color: $text-color-primary;

			transform: scale(1.3);
		}
	}
}