// ----------------------------------------------------------------------------
// MODAL LAYER
// ----------------------------------------------------------------------------

.style-edit-modal {
	left:            50%;
	margin-left:     -250px;
	max-height:      800px;
	max-width:       500px;
	position:        absolute;
	top:             15%;
	width:           100%;
	z-index:         1000000;

	// This works only on Safari at this moment but will be CSS Standard in the future
	backdrop-filter: blur(5px);

	// This only works on Firefox at this moment
	&::before {
		content:    '';
		display:    block;
		position:   absolute;
		z-index:    -1;
		top:        0;
		left:       0;
		bottom:     0;
		right:      0;
		background: -moz-element(#back) fixed;
		filter:     blur(5px);
	}

	&::after {
		content:          '';
		display:          block;
		position:         absolute;
		z-index:          -1;
		top:              0;
		left:             0;
		bottom:           0;
		right:            0;
		background-color: transparentize($background-dark, 0.1);
		margin:           -5px;
	}

	&.large {
		margin-left: -400px;
		max-width:   800px;
	}

	.modal-content {
		background: none;
		box-shadow: none;
		padding:    17px 19px 9px 19px;
		color:      #FFFFFF;

		.modal-header {
			padding: 0;

			h1 {
				color:     $font-color-light;
				font-size: 20px;
				margin:    0 0 20px;
			}
		}

		.modal-body {
			padding: 0;

			.CodeMirror {
				pre {
					* {
						font-family: monospace;
					}
				}
			}

			.form-control,
			.form-group {
				.form-control {
					background-image: linear-gradient($primary-color, $primary-color), linear-gradient($border-color-modal, $border-color-modal);
					@include material-placeholder {
						color: $border-color-modal;
					}
				}

				&.has-error .form-control {
					background-image: linear-gradient($danger-color, $danger-color), linear-gradient($border-color-modal, $border-color-modal);
				}
			}

			.style-name .form-group {
				margin: 0;
			}

			.style-name,
			.boilerplates {
				padding-bottom: 20px;
				overflow:       auto;
			}

			.upload-container {
				margin: 0 -15px 70px;

				.form-group {
					margin-top: 0;

					input[type="file"] {
						cursor: pointer;
					}
				}
			}

			.preview-container img {
				max-width:  100%;
				max-height: 30vh;
				display:    block;
				margin:     auto;
			}

			.message {
				color:         $font-color-light;
				-ms-word-wrap: break-word;
				word-wrap:     break-word;
			}

			.boilerplates {
				.preview-item {
					cursor: pointer;
					img {
						border: 4px solid transparent;
					}

					&.selected {
						img {
							border: 4px solid $primary-color;
							cursor: default;
						}
					}

					.boilerplate-description {
						color:       $font-color-light;
						display:     inline-block;
						padding-top: 5px;
					}
				}
			}

			.control-buttons {
				margin:   0;
				overflow: auto;
				.btn {
					border-radius: 2px;
					font-weight:   bold;
					outline:       none;

					&.btn-primary {
						&.btn-raised {
							&:hover {
								background-color: lighten($primary-color, 10);
							}
						}
					}
				}
			}

			input[type=text] {
				color:      $font-color-light;
				box-shadow: none;
			}

			.btn {
				font-weight: bold;
				outline:     none;
			}
		}
	}

	&.custom-styles {
		.custom-styles-description {
			color: $font-color-light;
		}

		.CodeMirror {
			height:     400px;
			max-height: 400px;
			resize:     none;
			width:      100%;
		}
	}
	
	// Toggle fullscreen mode of custom styles modal
	.fullscreen-toggle {
		position: absolute;
	    right: 0;
	    top: 0;
	}
	&.custom-styles.fullscreen {
		max-width: 100%;
		max-height: 100%;
		left: 0;
		top: 0;
		margin: 0;
		height: 100%;
		.modal-content {
			height: 100%;
		}
		.modal-body {
			height: calc(100% - 26px);
		}
		.CodeMirror {
			height:     calc(100% - 60px);
			max-height: none;
			resize:     none;
			width:      100%;
		}
	}
}