/**
* Modal Component
* Core styling
*/


.c-modal {

	&__trigger,
	&__close {
		display: none;
	}
}

.c-modal {
	&__content {
		background-color: #fff;
		border-top: 3px solid $modal--border-color;
		font-family: $t-a-typography-font-family-default;
		height: auto;
		overflow-y: auto;
		padding: 30px;
		width: 100%;
	}

	&__title {
		font-size: 1.125rem;
		font-weight: 600;
		line-height: 1.48;
		margin-bottom: 20px;
	}
}

.js .c-modal {
	display: none;


	&--open {
		align-items: flex-start;
		background-color: rgba(0, 0, 0, 0.4);
		content: "";
		display: flex;
		height: 100%;
		justify-content: center;
		left: 0;
		overflow-y: scroll;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 99999;
	}

	&__trigger {
		display: inherit;
		display: unset;
	}

	&__content {
		border-radius: 3px;
		box-shadow: 0 4px 6px 3px rgba(0, 0, 0, 0.25);
		margin: 30px;
		max-height: 95%;
		max-width: $modal--max-width;
		overflow-y: scroll;
		position: relative;
	}

	&__close {
		background-color: $modal--close-color;
		background-image: url(data:image/svg+xml);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 12px;
		border-radius: 50px;
		border: 0;
		color: #fff;
		cursor: pointer;
		display: block;
		font-family: inherit;
		font-size: 2rem;
		font-weight: inherit;
		height: 24px;
		line-height: 24px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		right: 15px;
		text-indent: 100%;
		top: 15px;
		white-space: nowrap;
		width: 24px;
		// Button styles should come from global-buttons?base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEuNjE4IDEwLjYzbDMuNjk3LTMuNjk3IDMuNjk3IDMuNjk3IDEuNjE4LTEuNjE4LTMuNjk3LTMuNjk3IDMuNjk3LTMuNjk3TDkuMDEyIDAgNS4zMTUgMy42OTcgMS42MTggMCAwIDEuNjE4bDMuNjk3IDMuNjk3TDAgOS4wMTJ6IiBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+);
		&:hover {
			background-color: darken($modal--close-color, 20%);
			text-decoration: none;
		}
	}
}

html.has-modal {
	overflow: hidden;
}