/*!
 * Jodit Editor (https://xdsoft.net/jodit/)
 * Licensed under GNU General Public License version 2 or later or a commercial license or MIT;
 * For GPL see LICENSE-GPL.txt in the project root for license information.
 * For MIT see LICENSE-MIT.txt in the project root for license information.
 * For commercial licenses see https://xdsoft.net/jodit/commercial/
 * Copyright (c) 2013-2019 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
 */

@import (reference) '../variables';

.jodit_dialog_box {
	.font();

	&.jodit_dialog_box-moved {
		user-select: none;
	}

	box-sizing: border-box;
	* {
		box-sizing: border-box;
	}

	.jodit_elfinder {
		&,
		& * {
			box-sizing: initial;
		}
	}

	display: none;
	width: 0;
	height: 0;
	border: 0;
	position: absolute;
	will-change: left, top, width, height;

	.jodit_dialog_overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: @z-index-dialog-overlay;
		text-align: center;
		white-space: nowrap;
		overflow: auto;
		display: none;
		background-color: rgba(0, 0, 0, 0.5);
	}

	&.jodit_modal .jodit_dialog_overlay {
		display: block;
	}

	&.active {
		display: block;
	}

	.jodit_dialog {
		z-index: @z-index-dialog;
		display: inline-block;
		vertical-align: middle;
		white-space: normal;
		text-align: left;
		position: fixed;
		left: 0;
		top: 0;
		background-color: #fff;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
			0 6px 6px rgba(0, 0, 0, 0.23);
		min-width: 200px;
		min-height: 100px;

		@media (max-width: @screen-xs) {
			max-width: 100%;
			width: 100% !important;
			height: 100% !important;
			top: 0 !important;
			left: 0 !important;
		}

		.jodit_promt {
			max-width: 300px;
			min-width: 200px;
			padding: 10px;
			word-break: break-all;

			label {
				margin-bottom: 5px;
				display: block;
			}

			input[type='text'] {
				display: block;
				border: 1px solid #ccc;
				background: #fff;
				width: 100%;
				height: 28px;
				line-height: 16px;
				padding: 3px 6px;
				outline: none;
			}
		}

		.jodit_alert {
			max-width: 300px;
			min-width: 200px;
			padding: 10px;
			word-break: break-all;
		}

		.jodit_button {
			padding: 0;
			margin: 0;
			border: 0;
			display: inline-block;
			vertical-align: top;
			width: 32px;
			height: 48px;
			line-height: 48px;
			text-align: center;
			cursor: pointer;
			text-decoration: none;

			&:not(.disabled):hover {
				background-color: @color-background-button-hover;
			}

			&.disabled {
				opacity: 0.7;
			}
		}

		.jodit_input {
			border: 1px solid #ccc;
			padding: 5px 10px;
			background-color: #fff;
			outline: 0;
			font: 13px Arial;
			height: 28px;
			vertical-align: middle;
		}

		select.jodit_input {
			width: 75px;
		}

		.jodit_button .jodit_icon,
		.jodit_dialog_header .jodit_icon,
		.jodit_button svg,
		.jodit_dialog_header svg {
			width: 16px;
			height: 16px;
			display: inline-block;
			vertical-align: middle;
		}

		.jodit_dialog_header {
			display: flex;
			justify-content: space-between;
			text-align: left;
			color: #222222;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16),
				0 1px 2px rgba(0, 0, 0, 0.23);
			cursor: move;
			height: 48px;
			overflow: hidden;
			.jodit_dialog_header-toolbar,
			.jodit_dialog_header-title {
				flex-shrink: 3;
				font-size: 18px;
				margin: 0;
				font-weight: 400;
				line-height: 48px;
				//display: inline-block;
				vertical-align: top;
				@media (max-width: @screen-xs) {
					padding-left: 0;
				}
				padding: 0 @padding-default;
			}

			button {
				margin-right: 10px;
			}

			.jodit_dialog_header-button {
				color: #222222;
				font-size: 28px;
				//font-weight: 700;
				//display: inline-block;
				transition: background-color 0.2s ease 0s;
				flex-basis: 48px;
				height: 48px;
				//vertical-align: top;
				line-height: 48px;
				text-decoration: none;
				text-align: center;
				//float: right;
				&:hover {
					background-color: @color-background-button-hover;
				}
			}

			.jodit_toolbar {
				background: transparent;
				display: block;
				height: 100%;
				border: 0;
				box-shadow: none;

				> li.jodit_toolbar_btn {
					vertical-align: middle;
					select,
					input[type='text'],
					input[type='number'],
					input[type='url'] {
						padding-left: @padding-default;
						width: auto;
					}
				}
			}
			//.jodit_close svg {
			//    width: 18px;
			//    height: 18px;
			//    margin: 15px 0;
			//    vertical-align: top;
			//}
		}
		.jodit_dialog_content {
			height: calc(~'100% - 48px');
			overflow: auto;
			.jodit_form_group {
				margin-bottom: 10px;
				padding: 0 10px;
				&:first-child {
					margin-top: 10px;
				}
				label {
					display: inline-block;
					max-width: 100%;
					margin-bottom: 5px;
					font-weight: 700;
				}
				select,
				input {
					&.select,
					&[type='text'],
					&[type='number'],
					&[type='url'] {
						display: block;
						height: 34px;
						padding: 6px 4px;
						font-size: 14px;
						line-height: 1.42857143;
						color: #555;
						background-color: #fff;
						background-image: none;
						border: 1px solid #ccc;
						border-radius: 0;
						box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
						transition: border-color ease-in-out 0.15s,
							box-shadow ease-in-out 0.15s;
						&:focus {
							border-color: #66afe9;
							outline: 0;
							box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
								0 0 8px rgba(102, 175, 233, 0.6);
						}
						&[disabled] {
							background-color: #f0f0f0;
							color: #ccc;
						}
						&:not([class*='col-']) {
							width: 100%;
						}
					}
				}
				.jodit_input_group {
					display: table;
					border-collapse: separate;
					width: 100%;
					> * {
						vertical-align: middle;
						display: table-cell;
						height: 34px;
					}
					> input {
						float: left;
						margin: 0 !important;
						&:not([class*='col-']) {
							width: 100%;
						}
					}
					&-buttons {
						width: 1%;
						font-size: 0;
						white-space: nowrap;
						vertical-align: middle;
						> a {
							text-align: center;
							display: inline-block;
							border: 1px solid #ccc;
							margin-left: -1px;
							position: relative;
							height: 34px;
							line-height: 34px;
						}
					}
				}
			}
		}
		.jodit_dialog_footer {
			padding: 10px 10px 0;
			text-align: center;
			height: 48px;
			display: none;
			.jodit_button {
				width: auto;
				margin-bottom: 10px;
				height: 32px;
				line-height: 100%;
				padding: 0 15px;
				background-color: #ccc;
				border: 1px solid #ccc;
				color: #000;
				font-size: 0;
				&:before {
					content: '';
					display: inline-block;
					vertical-align: middle;
					height: 100%;
				}
				svg {
					display: inline-block;
					width: 24px;
					height: 24px;
					vertical-align: middle;
				}
				span {
					display: inline-block;
					vertical-align: middle;
					font-size: 14px;
					margin-left: 5px;
				}
				&:focus {
					border: 1px solid #8bade4;
					outline: 1px solid #82b2e8;
				}
			}
			.jodit_button:nth-child(n + 2) {
				margin-left: 10px;
			}
		}
		&.with_footer .jodit_dialog_content {
			height: calc(~'100% - 96px');
		}
		&.with_footer .jodit_dialog_footer {
			display: block;
		}
		.jodit_dialog_resizer {
			position: absolute;
			bottom: 0;
			right: 0;

			cursor: se-resize;

			width: 7px;
			height: 7px;
			display: inline-block;

			//border: 8px solid rgba(0, 0, 0, .2);
			//border-left-color: rgba(0, 0, 0, 0) !important;
			//border-top-color: rgba(0, 0, 0, 0) !important;
			background-image: data-uri('../modules/resizer.png');
			/*&:after {
                content: "";
                display: inline-block;
                width: 0;
                height: 0;

                position: absolute;
                border: 3px solid #fff;
                border-top: 3px solid rgba(0, 0, 0, 0);
                border-left: 3px solid rgba(0,0,0,0);
            }*/
			&:hover {
				border-color: rgba(0, 0, 0, 0.6);
			}
		}
		@media (max-width: @screen-xs) {
			.jodit_dialog_resizer {
				display: none;
			}
		}
	}
	&.jodit_fullsize .jodit_dialog {
		top: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		height: 100% !important;
		.jodit_dialog_resizer {
			display: none;
		}
	}
}

@media (max-width: @screen-sm) {
	.jodit_dialog_header_title,
	.jodit_dialog_header_fullsize,
	.jodit_dialog_header .jodit_toolbar_btn-filter,
	.jodit_dialog_header .jodit_toolbar_btn-sort,
	.jodit_dialog_header .jodit_toolbar_btn-separator,
	.jodit_dialog_header .jodit_input {
		display: none !important;
	}
}