// ============================================================================
// :: Doormat
// ============================================================================
.m-doormat {
	padding: 3rem;

	text-align: left;

	background-color: $background-color-white;
	box-shadow: $box-shadow;

	@include respond-at($screen-medium-base) {
		padding: 0;

		background-color: transparent;

		box-shadow: none;
	}
}

// ============================================================================
// :: Elements
// ============================================================================
.m-doormat__header {
	display: block;

	@include respond-at($screen-medium-base) {
		display: none;
	}
}

.m-doormat__main-link {
	display: block;

	cursor: pointer;

	&:hover {

		.m-doormat__main-title {
			color: $text-color-primary;
		}
	}

	&:focus:not(:hover) {
		@include outline();
	}
}

.m-doormat__main-title {
	margin-bottom: 1.5rem;

	transition: color 0.2s ease-in-out;
}

.m-doormat__content {
	margin-left: 0;

	@include respond-at($screen-medium-base) {
		height: auto !important; /* stylelint-disable-line */
		overflow: visible;
	}
}

.m-doormat__content__container {

	@include respond-at($screen-medium-base) {
		display: flex;
		flex-wrap: wrap;
		overflow: visible !important; /* stylelint-disable-line */
		margin-top: 0;
	}
}

.m-doormat__item {
	padding: 1.5rem;

	visibility: hidden;

	@include respond-at($screen-medium-base) {
		padding: 3rem;

		background-color: $background-color-white;
		box-shadow: $box-shadow;
	}
}

// ============================================================================
// :: States
// ============================================================================
.m-doormat {

	&.js-reveal {
		@include respond-to($screen-medium-base) {
			opacity: 0;

			transform: none;
		}
	}
}