@import "definitions.css.scss";
$editing-0: #ede9e4;
$editing-1: #444444;
$editing-2: #ccc;
$editing-3: darken($editing-2, 20%);
$editing-4: darken($editing-3, 20%);

// $editing-focus: #8ac551;

$text-edit-width: 621px;

.editing-panel {

	@extend .editing-background;
	z-index: 1001;
	// background-color: $editing-0;
  // background: url(/@spontaneous/static/editing-texture-1-42b06a3439752490988f30f2a06d5e7c.png) repeat;

	.editing-fields {
		@extend .clearfix;
    @include display-box;
    @include box-align(horizontal);
		padding: $unit;

	}
	.editing-toolbar {
		@include rounded($radius $radius 0 0);
    background-color: rgba(0, 0, 0, 0.2);
		padding: $unit/2 $unit*2;
		.indent {

			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			height: 6px;
		}
		&.bottom .indent {
			top: auto;
			bottom: 0;
		}
		.buttons {
			@include display-box;
			@include box-orient(horizontal);
			@include box-pack(justify);
			width: $text-edit-width;
			.save, .cancel {
				@include button($action);
			}
			.cancel {
				@include button($editing-1);
        // margin-right: $unit; // for right aligned buttons
			}
			.save, .cancel {
				display: block;
				width: 128px;
			}
		}
		&.bottom {
			@include rounded( 0 0 $radius $radius);

			.buttons {
				// padding-bottom: $unit/2;
				padding-top: 0;
			}
		}
	}
	.field-group-bg {
		@include rounded;
		// background-color: #6b6b6b;
		position: absolute;
		margin: 8px;
		top: 0px;
		bottom: 0px;
	}
	.field-group-bg.text {
		left: 0;
		right: 343px;
	}
	.field-group-bg.image {
		left: 629px;
		right: 0;
	}
	input[type="submit"] {
		visibility: hidden;
		position: absolute;
		width: 0;
		height: 0;
	}
	.field-group {
		position: relative;
		z-index: 1010;
		float: left;
		// margin: 8px 0 0 8px;
		padding: 8px;
		// margin-top: 8px;
		// margin-bottom: 8px;
		.field + .field {
			margin-top: 8px;
		}
		.name {
			@include field-name;
			.comment {
				font-weight: normal;
				text-transform: none;
				margin-left: $unit;
				// color: $editing-4;
			}
		}
		.value {
			@include field-value;
			textarea, input[type="text"] {
				@include input-font;
				outline: none;
			}
			input[type="file"] {
				visibility: hidden;
				position: absolute;
				width: 0;
				height: 0;
			}
			textarea {
				@include box-sizing;
				border: none;
				width: 100%;
				// padding-right: 64px;
				padding-left: 7px;
				padding-right: 7px;
				resize:vertical;
				position: relative;
				left: -7px;
			}
			input[type="text"] {
				@include text-input;
			}
		}


		.field.focus {
			.name {
				background-color: $editing-focus;
				color: white;
				.comment {
					color: white;
				}
			}
			.value {
				border-color: #fff;
        background-color: #fff;
        opacity: 1;
			}
			// textarea, input[type="text"] {
        // background-color: #fff;
			// }
		}
	}
	.field-group.text {
		width: $text-edit-width;
	}
	&.depth-2 {

		.editing-fields {
			padding: 0;
      @include box-orient(vertical);
		}
		.editing-toolbar {
			padding-left: $unit;
			padding-right: $unit;
			.buttons {
				width: 100%;
			}
		}
		.field-group.text {
			width: 100%;
			@include box-sizing;
		}
    .field-group.image {
      padding: $unit;
    }
	}
	.field-group.image {
		@include box-sizing;
		@include box-flex(1);
		display: block;
		padding: $unit 0;
		.field {
			display: inline-block;
			vertical-align: top;
			min-width: 100px;
			margin-right: $unit;
			margin-bottom: $unit;
			margin-top: 0;
			margin-left: 0;
      .name {
        background-color: $editing-focus;
      }
      .value {
        opacity: 1;
      }
		}
		.field + .field {
			// margin-top: 0;
			// margin-left: $unit;
		}
		.field .value {
			position: relative;
			min-height: 70px;
			text-align: center;
			img {
				// max-height: 300px;
        max-width: 200px;
				@extend .shadow;
				cursor: pointer;
			}
			img:hover {
				outline: solid 1px $action;
			}
			img.empty {
				width: 50%;
				height: 100px;
			}
			.image-drop {
				// @include rounded;
        @include box-sizing;
				z-index: 2;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;

        &.drop-active,
        &:hover {
          border: solid 1px $action;
        }
      }
			.actions {
				margin: 0px;
				margin-left: 0;
				position: absolute;
				top: 0;
				right: 0;
				width: 60px;
				.button {
					display: block;
				}
				.button.clear {
					color: #5b5b5b;
					background-color: #d1d1d1;
					width: 100%;
				}
			}
			.info {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				padding: $unit;
				@include image-overlay;
				@include interface;
				text-transform: none;
				@include display-box;
				@include box-orient(vertical);
        .filename {
          word-wrap: break-word;
        }
				.sizes {
					padding-top: $unit/2;
					@include display-box;
					@include box-orient(horizontal);
					@include box-pack(justify);
				}
			}
			.landscape {
				img {
					max-width: 200px;
					// max-height: 100px;
				}
				.actions {
					width: auto;
					display: block;
					margin: 8px 0 0 0;
					position: relative;
					.button {
						display: inline-block;
						width: 109px;
					}
					.button.clear {
						position: static;
					}
					.button.change {
						position: absolute;
						right: 0;
					}
				}
			}
		}
	}
}

#page-fields .editing-panel,
.box-fields .editing-panel {
	.editing-fields, .editing-toolbar {
		padding-left: $container-padding;
		padding-right: $container-padding;
	}
	.field-group.text {
		padding-left: 0;
	}
}
.box-fields .editing-panel {
	.editing-toolbar.bottom .indent {
		opacity: 0.2;
	}
}
.field {
	.markdown-editor  {
		position: relative;
		.md-toolbar {
			@include display-box;
			@include box-orient;
			@include rounded(5px);
			position: absolute;
			z-index: 100;
			background-color: $action;
			a {
				@include interface;
				@include no-select;
				color: #333;
				display: block;
				border: solid 1px transparent;
				padding: 2px 6px;
				cursor: pointer;
				min-width: 30px;
				text-align: center;
			}
			a:first-of-type {
				@include rounded-left(5px);
			}
			a:last-child {
				@include rounded-right(5px);
			}
			a.active:hover,
			a.active {
				// border: solid 1px $editing-2;
				background-color: $editing-focus;
				color: #fff;
			}
			a:hover {
				// background-color: $highlight;
				background-color: $editing-blur;
			}
			a + a {
				// margin-left: 10px;
				border-left: solid 1px $editing-blur;
			}
			.arrow {
				@include transform(rotate(45deg));
				position: absolute;
				width: 10px;
				height: 10px;
				bottom: -5px;
				left: 50%;
				background-color: $action;
				z-index: -10;
			}
		}
	}
}
.field.focus {
  .markdown-editor .md-toolbar {
		background-color: $action;
    // background-color: $editing-focus;
    a {
    }
  }

}

#conflicted-fields-dialogue {
  .instructions {
		@include interface;
		text-transform: none;
		margin: 0;
		background-color: #f2f2f2;
		color: #666;
		padding: $unit;
  }
	.differences {
		@include display-box;
	}
	.changes {

	}
	.diff {
		@include box-sizing;
		font-size: $field-preview-font-size;
		width: 50%;
		padding: $unit $unit;
		border: solid 2px #f2f2f2;
		cursor: pointer;

		&.selected {
			border-color: $action;
		}
		ins {
			background-color: #deffdd;
			text-decoration: none;
		}
		del {
			background-color: #fedddd;
			text-decoration: line-through;
		}
		.para {
			color: #ccc;
		}
	}
	.labels {
		.diff {
			border: none;
			background-color: #fbfbfb;
      @include interface;
      @include no-select;
			padding-top: $unit/2;
			padding-bottom: $unit/2;
		}
	}
	.image-field-conflict.changes {
		.diff {
			@include display-box;
			@include box-orient(horizontal);
			@include box-pack(center);
			@include box-align(center);
			img {
				max-height: 500px;
				max-width: 100%;
				display: block;
			}
		}
	}
}
.ui-resizable-handle.ui-resizable-s {
	width: 100%;
	height: 9px;
	background: url(/@spontaneous/static/editing-textarea-resize-s-b5af62365eb7e19ea4beccf7242d508e.png) repeat-x;
	cursor: ns-resize;
}

.field-boolean {
	.value {
		label {
			@include interface;
			color: #333;
		}
		label + label {
			margin-left: 20px;
		}
	}
}