// -------------------------------------------------------------------
// :: CONTENT BLOCK
// -------------------------------------------------------------------

.m-content-block{
	position: relative;
	padding: 1.5rem 0 0;
}


p + .m-content-block,
.m-content-block + .m-content-block{
	margin-top: 2.5rem;
}


.m-content-block__header{
	h1{
		color: $font-color;
	}
}

.m-content-block__body{
	padding-top: 1.5rem;
}

.m-content-block__body + .m-content-block__footer{
	margin-top: 2rem;
}

.m-content-block__list{
	padding: 0 !important;
	margin: 0;
	list-style: none;

	li{
		border-top: $border-simple;
		padding: 1rem 2rem;
	}

	&--collapsible {

		li {

			.collapser {
				float: right;
				pointer-events: none;
				cursor: pointer;
			}

			&.collapsible-section--collapsed {
				cursor: pointer;

				&:hover {
					background: $light;
				}

				ul {
					display: none;
				}
			}

			&.collapsible-section--expanded {
				background: $light;

				.collapser {
					transform: rotate(180deg);
				}

				.a-link {
					font-weight: bold;
				}

				ul li a {
					font-weight: normal !important;

					&:hover {
						text-decoration: underline;
					}
				}
			}

			a {
				color: $dark-extra;
				text-decoration: none;
			}

			ul {
				list-style: none;
				padding: 0;

				li {
					border: none;
				}
			}
		}

	}
}

.m-content-block__footer{
	border-top: $border-simple;
	padding: 1.5rem 0 0;
	text-align: right;
}

// @todo combine this with the .a-more-link and make it more flexible.
// these are basically just links with an icon, but the icon-size is hard to make it consistent.


.m-content-block--classic{
	border: $border-simple;
	border-radius: $border-radius;
	padding-top: 0;
	padding-bottom: 1.5rem;

	> *{
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.m-content-block__header{
		background-color: $light;
		border-bottom: $border-simple;
		padding: 1.3rem 2rem;
		margin-bottom: -1px;
	}

	.m-content-block__footer{
		text-align: left;
	}
}

.m-content-block--subtle{
	background-color: $light;
	border-radius: $border-radius;
	padding-bottom: 1.5rem;

	> *{
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.m-content-block__footer{
		text-align: left;
	}
}

.m-content-block--highlight{
	background: $gradient-red;
	border-radius: $border-radius;
	padding-bottom: 1.5rem;

	> *{
		padding-left: 2rem;
		padding-right: 2rem;
	}

	h1,
	*,
	[class*='icon']:before{
		color: $white;
	}

	.m-content-block__footer{
		border-color: rgba($white, 0.3);
		text-align: left;
	}
}