// ============================================================================
// :: Tile
// ============================================================================
/**
 * Tile component that can contain text and/or a link that fit's in to a grid
 */

// ============================================================================
// :: Root
// ============================================================================
.m-tile {
	position: relative;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	min-height: 16rem;
	overflow: hidden;

	padding: 4rem;

	@include respond-at($screen-small-base) {
		min-height: 28rem;
	}
}

// ============================================================================
// :: Elements
// ============================================================================
.m-tile__text {
	font-size: $font-size-2x-large;
	line-height: $line-height-2x-large;
	text-decoration: none;
	text-align: left;

	color: $text-color;
}

.m-tile__link {
	display: flex;

	margin-top: 2.4rem;

	font-family: $font-family-beausans;
	font-weight: $font-weight-bold;
	font-size: $font-size;
	line-height: $line-height-2x-large;
	text-decoration: none;
	text-align: left;

	color: $text-color;
	border: none;
	background: transparent;
	opacity: 0;

	transform: translateY(1rem);

	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;

	@include respond-to($screen-small-base) {
		font-size: $font-size-1x-small;
		line-height: $line-height-1x-large;
	}

	&[class*="icon"] {
		display: inline-flex;
		align-items: flex-start;

		&::before {
			display: block;
			margin-top: 0.4rem;
			margin-right: 1rem;

			font-size: $font-size-1x-small;
		}
	}
}

// ============================================================================
// :: States
// ============================================================================
.m-tile:hover {

	.m-tile__link {
		opacity: 1;

		transform: translateY(0);
	}
}

// ============================================================================
// :: Modifiers
// ============================================================================
.m-tile--light {
	background-color: $background-color-grey-light;
}

.m-tile--dark {
	background-color: $background-color-grey-extra-dark;

	.m-tile__text {
		color: $text-color-white;
	}

	.m-tile__link {
		color: $text-color-white;
	}
}

.m-tile--primary {
	background-color: $background-color-primary;

	.m-tile__text {
		color: $text-color-white;
	}

	.m-tile__link {
		color: $text-color-white;
	}
}