.tile {
	background-color: $white;
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.06), 0 0 3px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.18);
	display: block;
	display: flex;
	min-height: $tile-height;
	position: relative;
	&[href]:focus,
	&[href]:hover {
		text-decoration: none;
	}
	&.active {
		margin-top: $margin-md !important;
		margin-bottom: $margin-md !important;
	}
}

// colour
	@each $color in $palette-list-class {
		$i: index($palette-list-class, $color);

		.tile-#{$color} {
			background-color: nth($palette-list-color, $i);
			color: nth($palette-list-text, $i);
			a,
			a:focus,
			a:hover {
				color: inherit;
			}
		}
	}

.tile-action {
	@extend .card-action;
	border-top: 0;
	float: right;
	min-width: 0;
	order: 1;
	user-select: none;
	html.no-touchevents & {
		display: none;
	}
	html.no-touchevents .tile:hover & {
		display: block;
	}
}

.tile-action-show {
	display: block !important;
}

.tile-active-show {
	min-height: 0;
	&.collapsing {
		transition: height 0.15s linear;
	}
}

.tile-collapse {
	flex-direction: column;
	transition: margin 0.15s linear;
	&.active {
		margin-right: ($grid-gutter / -2);
		margin-left: ($grid-gutter / -2);
	}
}

.tile-collapse-full {
	// 1056 - 1439
		@media only screen and (min-width: ($grid-gutter * 4 + $screen-md)) and (max-width: ($screen-lg - 1)) {
			&.active {
				margin-right: ($grid-gutter * -4 + 1);
				margin-left: ($grid-gutter * -4 + 1);
			}
		}
	// 1504
		@media only screen and (min-width: ($grid-gutter * 4 + $screen-lg)) {
			&.active {
				margin-right: ($grid-gutter * -4 + 1);
				margin-left: ($grid-gutter * -4 + 1);
			}
		}
}

.tile-footer {
	background-color: $offwhite-solid;
	border-top: 1px solid $black-divider;
	position: relative;
	@include clearfix();
	&:first-child {
		border-top: 0;
	}
}

// colour
	@each $color in $palette-list-class {
		$i: index($palette-list-class, $color);

		.tile-#{$color} .tile-footer {
			background-color: nth($palette-list-dark, $i);
			color: nth($palette-list-text-dark, $i);
		}
	}

.tile-footer-btn {
	@extend .card-action-btn;
}

.tile-inner {
	flex: 1;
	margin: (($tile-height - $line-height) / 2) $grid-gutter;
	min-width: 0;
	position: relative;
}

.tile-side {
	@extend .card-header-side;
	padding-top: (($tile-height - $line-height) / 2);
	padding-bottom: (($tile-height - $line-height) / 2);
}

.tile-sub {
	border-top: 1px solid $black-divider;
	padding-right: $grid-gutter;
	padding-left: $grid-gutter;
	position: relative;
	@include clearfix();
}

// colour
	@each $color in $palette-list-class {
		$i: index($palette-list-class, $color);

		.tile-#{$color} .tile-sub {
			border-top-color: nth($palette-list-dark, $i);
		}
	}

.tile-wrap {
	margin-top: $margin-md;
	margin-bottom: $margin-md;
	position: relative;
}

div[data-toggle="tile"] {
	cursor: pointer;
	display: block;
	display: flex;
	flex: 1;
	min-height: 0;
	[data-ignore="tile"] {
		cursor: default;
		cursor: initial;
	}
}