@bigfishtv/cockpit/styles/template/modal.less

@modal-xsmall-max-width: 450px;
@modal-small-max-width: 450px;
@modal-medium-max-width: 600px;

@modal-xsmall-panel-min-height: auto;
@modal-small-panel-min-height: auto;
@modal-medium-panel-min-height: 600px;


.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.modal-background {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: fade(@dark, 20%);
}

.modal-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	padding: @padding-xlarge;
	height: 100%;
	width: 100%;

	@media @small-down {
		padding: @padding-small;
	}
}

// Modal panel
.modal-inner {

	.finder {
		margin: -@padding-small;
		border: none;
		box-shadow: none;
	}
	
	> .panel {
		display: flex;
		flex-direction: column;
		width: 100%;
		min-height: 100%;
		max-height: 100%;
		margin-bottom: 0;
		box-shadow: 0 0 2rem 0.1rem fade(@dark, 20%);
		border: none;
	}

	.panel-header {
		flex: 0 0 auto;
		border-bottom: 1px solid @light-grey;
	}

	.panel-content {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.panel-footer {
		flex: 0 0 auto;
		border-top: 1px solid @light-grey;
	}
}

.modal-medium {
	max-width: @modal-medium-max-width;

	> .panel {
		min-height: @modal-medium-panel-min-height;

		@media @medium-up {
			min-height: 600px;
		}
	}

	.panel-header {
		
	}

	.panel-content {
		display: block;
	}

	.panel-footer {
		
	}
}

.modal-small {
	max-width: @modal-small-max-width;

	> .panel {
		min-height: @modal-small-panel-min-height;
		@media @medium-up {
			min-height: 300px;
		}
	}

	.panel-header {
		
	}

	.panel-content {
		display: block;
	}

	.panel-footer {
		
	}
}

.modal-xsmall {
	max-width: @modal-xsmall-max-width;

	> .panel {
		min-height: @modal-xsmall-panel-min-height;
	}

	.panel-header {
		
	}

	.panel-content {
		display: block;
	}

	.panel-footer {
		
	}
}