// ----------------------------------------------------------------------------
// STYLE-TEMPLATES EDIT VIEW
// ----------------------------------------------------------------------------

.edit-style-view {
	.headline {
		background-color: $background-light;
		box-shadow:       0 2px 3px transparentize($box-shadow, 0.7);
		cursor:           pointer;
		padding:          0 15px;
		width:            320px;
		z-index:          1001;
		
		h2 {
			font-size:     16px;
			margin:        0;
			max-width:     230px;
			overflow:      hidden;
			text-overflow: ellipsis;
			white-space:   nowrap;
		}

		@include actions-dropdown;

		// Make this dropdown take the full width. 
		.dropdown-menu {
			margin-left:    -15px;
			width:          320px !important;
			padding-bottom: 15px;
		}

		.info {
			height:         54px;
			vertical-align: middle;
		}
	}

	.edit-options-container {
		// The following styles are required by perfect-scrollbar in order to display the scrollbars correctly.
		position: relative; 
		height: 100%;
		padding: 0 15px;

		input, select, textarea {
			font-family: monospace;
		}

		.filter {
			background-color: $background-light;
			box-shadow:       0 2px 3px transparentize($box-shadow, 0.7);
			color:            $font-color-inactive;
			cursor:           pointer;
			margin:           0 0 20px 0;

			&.active {
				color: $font-color-option;
			}

			.icon {
				display:        table-cell;
				float:          none;
				vertical-align: middle;
			}

			.info {
				display:        table-cell;
				float:          none;
				font-weight:    bold;
				padding:        12px 0 8px 0;
				vertical-align: middle;
			}

			.dropdown-icon {
				display:        table-cell;
				float:          none;
				text-align:     center;
				vertical-align: middle;

				i {
					&.fa {
						&.fa-caret-down {
							display: block;
						}

						&.fa-caret-up {
							display: none;
						}
					}
				}
			}
			
			&.open {
				.dropdown-icon {
					i {
						&.fa {
							&.fa-caret-down {
								display: none;
							}
							
							&.fa-caret-up {
								display: block;
							}
						}
					}
				}
			}

			@include dropdown-box;

			.dropdown-menu {
				color: $font-color-option;
			}
		}

		.edit-options {
			list-style: none;
			width:      100%;

			.option {
				background-color: transparent;
				color:            $font-color-option;
				cursor:           pointer;
				margin:           0 0 20px 0;

				.icon {
					display:        table-cell;
					float:          none;
					vertical-align: middle;
					padding-top:    4px;

					.fa {
						font-weight: bold;
					}
				}

				.info {
					display:        table-cell;
					float:          none;
					width:          100%;
					padding:        12px 0 8px 0;
					vertical-align: middle;

					.name {
						font-size:   14px;
						font-weight: bold;
						margin:      0;
					}
				}

				.dropdown-icon {
					display:        table-cell;
					float:          none;
					text-align:     center;
					vertical-align: middle;

					i {
						&.fa {
							&.fa-caret-right {
								display: block;
							}

							&.fa-caret-up {
								display: none;
							}
						}
					}
				}

				@include dropdown-box;

				.dropdown-menu {
					color: $font-color-option;

					.form-group {
						float:   left;
						margin:  0 0 15px 0;
						padding: 0;
						width:   100%;

						.title {
							margin-top: 15px;
						}

						label {
							color:     $font-color-option;
							font-size: 12px;

							&.control-label {
								margin-top: 10px;

								&.toggle {
									line-height: 29px;
									margin-top:  2px;
								}
							}
						}

						.form-control {
							height:             29px;
							font-size:          12px;
							margin-bottom:      0;
							appearance:         none;
							-webkit-appearance: none;
							-moz-appearance:    none;
							
							&.color {
								padding-right:  20px;
							}
						}

						.color-preview {
							display:    inline-block;
							box-shadow: 0 0 1px #808080;
							width:      18px;
							height:     18px;
							position:   absolute;
							top:        7px;
							right:      15px;
							cursor:     pointer;

							// Whenever there is no preview available JS will create an <i>
							// element with the "fa-ban" icon.
							i {
								position: relative;
								left:     3px;
								color:    #B9B9B9;
							}
						}

						.togglebutton {
							.toggle {
								margin-right: 5px;
							}
						}

						.fa-bars {
							color: $primary-color;
						}

						.image-actions {
							display: none; // not visible by default
							float: right;
							color: $font-color-option;
							margin-top: 10px;
							
							i {
								cursor: pointer;
								font-size: 18px;
								transition: all 0.3s linear;
								margin-right: 5px;
								
								&:hover {
									color: $brand-primary;
								}
								
								&.disabled {
									opacity: 0.5;

									&:hover {
										color: $font-color-option;
									}
								}
							}
						}
					}

					&.ui-sortable {

						.ui-sortable-handle {
							cursor: move;

							i, & > label {
								cursor: move;
							}

							i {
								margin-top: 8px;
							}
						}

						.form-group {
							label {
								padding: 0;
							}
						}

						.form-group:first-child {
							margin-top: 10px; // Fixes problem with element dragging. 
						}

						.form-group:last-child {
							margin-bottom: 10px; // Fixes problem with element dragging. 
						}
					}
				}

				&.open {
					background-color: $background-option;
					box-shadow:       0 1px 3px transparentize($box-shadow, 0.8);
					color:            $font-color-light;

					.dropdown-icon {
						i {
							&.fa {
								&.fa-caret-right {
									display: none;
								}
								&.fa-caret-up {
									display: block;
								}
							}
						}
					}
				}
			}
		}
	}
}