.groups.details {
	margin-top: 200px;

	[component="groups/cover"] {
		.background-size(cover);
		background-repeat: no-repeat;
		background-origin: content-box;
		min-height: 200px;
		position: relative;
		margin-bottom: 1em;
		width: 100%;
		top: 50px;
		position: absolute;
		left: auto;
		right: 0px;

		&:hover {
			.controls {
				.opacity(0.8);
			}
		}

		.controls {
			text-align: center;
			min-height: 200px;
			line-height: 200px;
			.opacity(0);
			.transition(opacity 0.15s linear);
			.pointer;
			pointer-events: none;

			> * {
				pointer-events: all;
			}

			.fa {
				color: #fff;
				font-size: @font-size-h1;
				background-color: @gray-darker;
				.opacity(1);
				width: 55px;
				height: 55px;
				line-height: 55px;
				.border-radius(50%);
				margin: 0 5px;
			}
		}

		&.active {
			&:hover {
				cursor: move;
			}

			.controls {
				> * {
					display: none;
				}
			}

			.save {
				.inline-block;
			}
		}

		&.saving {
			.save {
				display: none;
			}

			.indicator {
				.inline-block;
			}
		}

		.save,
		.indicator {
			.inline-block;
			position: absolute;
			top: 1em;
			right: 2em;
			.opacity(1);
			background-color: @brand-primary;
			color: @gray-lighter;
			padding: 0.5em;
			font-weight: bold;

			&:hover {
				cursor: pointer;
			}
		}

		.save {
			display: none;
		}

		.indicator {
			display: none;
		}
	}

	[component="groups/members"] {
		tbody {
			max-height: 500px;
			display: block;
			overflow-y: auto;
			margin: 18px auto 0;

			.member-name {
				width: 100%;
			}
		}
	}

	table[component="groups/pending"],
	table[component="groups/invited"] {
		margin: 0;
	}

	.alert {
		margin: 0 !important;
	}

	.form-group {
		margin-top: 15px;

		textarea {
			border-radius: 5px;
			padding: 10px;
			max-width: 100%;
			min-width: 100%;
		}
	}

	.owner-controls {
		margin-top: -6px;
	}

	.post-body {
		.topic-title,
		p {
			overflow-y: hidden;
			display: block;
		}
	}

	.panel-default {
		.label-info {
			position: absolute;
			right: 10px;
			padding: 2px 5px;
		}
	}

	@media (min-width: @screen-md-min) {
		margin-top: 300px;

		[component="groups/cover"] {
			min-height: 300px;

			.controls {
				min-height: 300px;
				line-height: 300px;
			}
		}
	}
}

.groups.list {
	[component="groups/summary"] {
		.panel-body {
			min-height: 72px;
			padding: 20px 15px !important;
			min-height: 65px !important;
		}

		.panel {
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
		}

		.list-cover {
			display: block;
			.background-size(cover);
			min-height: 125px;
			background-position: 50% 50%;
			.pointer;
			padding: 0;
			border: 0;

			h3 {
				background-color: rgba(0, 0, 0, 0.1);
				.inline-block;
				padding: 10px 15px;
				width: 100%;
				color: #fff;
				font-weight: bold;
				text-transform: capitalize;
				.border-radius(4px 4px 0 0);
				position: relative;

				i {
					margin-right: 6x;
				}

				small {
					position: absolute;
					right: 15px;
					top: 12px;
					font-size: 12px;
					font-weight: bold;
				}
			}
		}

		.members {
			padding-left: 0;
			margin-bottom: 0 !important;

			> li {
				list-style-type: none;
				.inline-block;
			}

			.truncated {
				vertical-align: bottom;
			}
		}
	}
}