.mock {
	border-radius: 5px;
	position: relative;
	
	.action-bar {
		width: 100%;
		border-radius: 5px 5px 0 0;
		height: 25px;
		padding: 2px 10px;
		
		.action {
			width: 7px;
			height: 7px;
			border-radius: 100%;
			margin: 1px;
			display: inline-block;
			
			&.close-button {
				background-color: #ED5159;
			}
			
			&.expand-button {
				background-color: #42AF46;
			}
			
			&.minimize-button {
				background-color: #FFBF37;
			}
		}
	}
	
	&.bg-dark {
		background-color: #15182b;
		
		.action-bar {
			background: #E0EAF6;
		}
	}
	
	&.bg-light {
		background-color: rgba(240, 246, 255, .6)!important;
		
		.action-bar {
			background: #15182b;
		}
	}
	//Demo for modal position and size.
	.modal-center {
		width: 100px;
		height: 100px;
		position: absolute;
		left: 34%;
	    top: 35%;
		background-color: #7069ca;
		
		span {
			float: right;
			margin: 6px 10px;
			font-size: 12px;
		}
	}
	.modal-corner-bottom-right {
		width: 100px;
		height: 100px;
		position: absolute;
		right: 10px;
		bottom: 10px;
		background-color: #7069ca;
		
		span {
			float: right;
			margin: 6px 10px;
			font-size: 12px;
		}
	}
	
	.modal-side-right {
		position: absolute;
		bottom: 0;
		background-color: #716aca;
		border-radius: 0 0 5px 0;
		width: 85px;
		right: 0;
		top: 25px;
		
		span {
			float: right;
			margin: 6px 10px;
			font-size: 12px;
		}
	}
	
	.modal-frame-bottom {
		width: 100%;
		height: 30px;
		position: absolute;
		bottom: 0;
		background-color: #716aca;
		border-radius: 0 0 5px 5px;
		
		span {
			float: right;
			margin: 6px 10px;
			font-size: 12px;
		}
	}
}