$o-modal-bp2: 1200;
$o-modal-padding: 24px;
$o-modal-close-size: 40px;
$o-modal-header-height: 66px;



.o-modal {
	@include z(z-modal);
	opacity: 0;
	pointer-events: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;

	&.is-active {
		opacity: 1;
		pointer-events: auto;
	}

	&.fade-out {
		transition: background-color 0.3s ease-in-out 0.15s;
		background-color: rgba(palette(secondary), 0.0);
	}
}


.o-modal__shader {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(palette(secondary), 0.32);
	backdrop-filter: blur(4px);
}


.o-modal__content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	overflow: auto;
	background-color: white;
	width: 91.4vw;
	max-width: 1080px;
	max-height: 95vh;
	border-radius: 4px;
}


.o-modal__header {
	padding: 16px 24px;
	background-color: palette(secondary);
	color: palette(light);
	position: sticky;
	z-index: 6;
	top: 0;
	left: 0;
	right: 0;
	//height: $o-modal-header-height;
}


.o-modal__close {
	position: absolute;
	top: 15px;
	right: 16px;
	width: $o-modal-close-size;
	height: $o-modal-close-size;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	background-image: url('/img/close-white.svg');
	background-size: 14px;
	background-repeat: no-repeat;
	background-position: center;
	border: none;
	padding: 0;
	transition: all 125ms ease-in-out;
	cursor: pointer;

	&:hover {
		transform: scale(1.2) rotate(0.25turn);
	}
}


.o-modal__preheading {
	@include font-family(base);
	@include font(x-small, $weight: 500);
}


.o-modal__heading {
	@include font(sm-large, $weight: 600);
	margin-top: 8px;

	@include mq($max: 540) {
		@include font(s-mid, $weight: 600);
	}
}



// Table styling

.o-modal__table {
	@include font(x-small, $weight: 400);
	//table-layout: fixed;
	border-collapse: collapse;
	width: 100%;
}


.o-modal__thead {
	background-color: palette(light);
	position: sticky;
	z-index: 6;
	top: $o-modal-header-height;
	left: 0;
	right: 0;
}


.o-modal__thead-cell {
	min-width: 165px;
	box-shadow: inset 1px -1px 0 #eaeef0;
}


.o-modal__table-subheader {
	@include font(m-base, $weight: 500);
	background-color: palette(secondary, 75);
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 16px 24px;
}


.o-modal__tbody {
	tr {
		td:first-child {
			width: 300px;
		}
	}
}

.o-modal__tbody-cell {
	box-shadow: inset 1px -1px 0 #eaeef0;
	padding: 16px 24px;
	text-align: center;
}


.o-modal__label-column {
	text-align: left;
}


.o-modal__feature-icon {
	display: inline-flex;
	width: 17px;
	height: 13px;
	background-image: url(/img/checked.svg);
	background-repeat: no-repeat;

	&.is-excluded {
		width: 13px;
		background-image: url(/img/unchecked.svg);
	}
}