//------------------------------------------------------------------------------------------------
// MODAL
//------------------------------------------------------------------------------------------------

/*
Modal overlay element for diplaying content.
*/


// COMPONENT COLOURS
//------------------------------------------------------------------------------------------------

/*
Easily assign colours to the component without having to
find/replace variables.
*/

$component-modal-focus-color: 'primary' !default;


// BLOCK & ELEMENTS
//------------------------------------------------------------------------------------------------

.c-modal {
	display: none;
}

@keyframes move {
	from {
		top: rem(-10px);
	}
	to {
		top: rem(0px);
	}
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.c-modal.is-active {
	position: fixed;
	display: flex;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 20;
	background-color: rgba(#000000, 0.85);
	justify-content: center;
	animation-name: fadein;
	animation-timing-function: ease-out;
	animation-duration: 0.15s;
	.c-modal__wrapper {
		animation-name: move;
		animation-timing-function: ease-out;
		animation-duration: $global-transition-duration;
	}
}

.c-modal__wrapper {
	position: relative;
	width: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
}

.c-modal__title {
	float: left;
	font-weight: bold;
	color: color('white');
}

.c-modal__title-wrapper {
	margin: rem(10px);
	/* Clearfix */
	&:after {
		content: '';
		display: block;
		clear: both;
	}
}

.c-modal__box {
	background-color: color('white');
	width: 100%;
	position: relative;
	overflow-y: scroll;
	overflow-x: hidden;
	padding-bottom: rem(60px);
	box-shadow: 0 0 rem(10px) 0 rgba(0,0,0,0.25);
	min-height: calc(100vh - 44px);
	-webkit-overflow-scrolling: touch;
}

.c-modal__close {
	width: rem(24px);
	height: rem(24px);
	cursor: pointer;
	border: 0;
	padding: 0;
	background-color: transparent;
	z-index: 10;
	float: right;
	transition: fill $global-transition-duration;
	&:focus {
		outline: none;
		& svg {
			fill: color($component-modal-focus-color);
		}
	}
	& svg {
		fill: color('white');
		width: 100%;
		height: 100%;
	}
}

.c-modal__content {
	overflow-x: hidden;
}

@include mq(sm) {

	.c-modal__wrapper {
		margin: 0 rem(20px);
		padding-top: rem(20px);
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.c-modal__title-wrapper {
		margin: 0 0 rem(10px) 0;
	}

	.c-modal__box {
		border-radius: rem(10px);
		padding-bottom: 0;
		margin-bottom: rem(95px);
		min-height: 0;
	}
}

@include mq(md) {

	.c-modal {
		align-items: center;
	}

	.c-modal__box {
		max-height: calc(100vh - 100px);
		margin-bottom: 20px;
	}

	.c-modal__wrapper {
		width: rem(800px);
		padding: 0;
		overflow-y: hidden;
	}

	.c-modal__close {
		position: relative;
		top: rem(2px);
	}

}

// If user forgot to remove close icons on a modal with [data-modal-noescape], hide them
.c-modal[data-modal-noescape] .js-close-modal {
	display: none;
}


// SIZE MODIFIERS
//------------------------------------------------------------------------------------------------

/*
Size modifiers allow you to tweak the width of the modal
*/


.c-modal--tiny {
	.c-modal__wrapper {
		width: rem(400px);
	}
}



.c-modal--small {
	.c-modal__wrapper {
		width: rem(600px);
	}
}



.c-modal--large {
	.c-modal__wrapper {
		width: rem(1000px);
	}
}



.c-modal--huge {
	.c-modal__wrapper {
		width: rem(1200px);
	}
}


/*
Makes user unable to scroll if applied to body. Use when components like modals are active
*/
.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* Makes scrolling perform much better with inputs in modals */
	-webkit-overflow-scrolling: touch;
}