.tile {
	background-color: $white;
	display: block;
	position: relative;
	@include box-shadow(0 0 1px rgba(0, 0, 0, 0.5));
	@include clearfix();
	&[href] {
		color: $black-text;
		&:focus,
		&:hover {
			color: $link-color;
			text-decoration: none;
		}
	}
	&.active {
		margin-top: $line-height !important;
		margin-bottom: $line-height !important;
	}
	// no boxshadow
		.no-boxshadow & {
			border: 1px solid $black-bg;
			+ .tile {
				margin-top: -1px;
			}
		}
}

.tile-action {
	@extend .card-action;
	float: right;
	@include user-select(none);
	&:before {
		display: none;
	}
	.no-touch &,
	.touch .tile-collapse & {
		display: none;
	}
	.no-touch .tile:hover &,
	.tile-collapse.active & {
		display: block;
	}
}

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

.tile-active-show {
	@include transition(height 0.15s linear);
}

.tile-collapse {
	@include transition(margin 0.15s linear);
	&.active {
		margin-right: ($grid-gutter * -1 + 1);
		margin-left: ($grid-gutter * -1 + 1);
	}
}

.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: $white-bg;
	position: relative;
	@include clearfix();
	&:before {
		border-top: 1px solid $black-bg;
		content: "";
		display: block;
		position: absolute;
			top: 0;
			left: 0;
		width: 100%;
	}
	&:first-child {
		border-top: 0;
	}
	.nav {
		margin-top: 0;
		margin-bottom: 0;
	}
}

.tile-inner {
	padding: ($line-height / 2) $grid-gutter;
	position: relative;
	.tile-action ~ &,
	.tile-side ~ & {
		overflow: hidden;
	}
}

.tile-side {
	@extend .card-inner-side;
}

.tile-side-container {
	padding: 0 !important;
}

.tile-sub {
	display: inline-block;
	padding-right: $grid-gutter;
	padding-left: $grid-gutter;
	position: relative;
	width: 100%;
	&:before {
		border-top: 1px solid $black-bg;
		content: "";
		display: block;
		position: absolute;
			top: 0;
			left: 0;
		width: 100%;
	}
}

.tile-toggle {
	cursor: pointer;
	@include clearfix();
}

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