@import (reference) './mixins';

.jodit,
.jodit-container {
	&,
	* {
		box-sizing: border-box;
		// Animation default
		transition-duration: 500ms;
		transition-property: color, background-color, border-color;
	}

	.jodit-workplace {
		position: relative;
		overflow: auto;

		.jodit-wysiwyg,
		.jodit-wysiwyg_iframe {
			width: 100%;
			height: 100%;
		}

		.jodit-wysiwyg:not([contenteditable]) {
			padding: 0;
		}
	}
}

.jodit-wysiwyg {
	*[contenteditable='false'] {
		cursor: default;
	}
}

.jodit-container:not(.jodit_inline) {
	//border: 1px solid var(--color-border);
	background-color: var(--color-background-default);
	//border-radius: var(--border-radius-default);
	border-radius: 0;

	.jodit-workplace {
		max-height: 100%;
		border: 0 solid var(--color-border);
	}

	&.jodit_disabled {
		background: var(--color-background-gray);

		.jodit-workplace {
			opacity: 0.4;
		}
	}
}

.jodit_lock {
	user-select: none !important;
}

.jodit_disabled {
	user-select: none !important;
}

.jodit_hidden {
	display: none !important;
}

.jodit_vertical_middle {
	display: flex;
	align-items: center;
}

.jodit-box {
	.jodit-box();
}

#jodit-media-wrapper {
	.represent-thumbnail-button {
		visibility: hidden;
		display: flex;
		flex-direction: column;

		justify-content: center;
		align-items: center;

		position: absolute;
		z-index: 1;
		top: 8px;
		left: 8px;
		padding: 6px 10px;
		border-radius: 4px;

		cursor: pointer !important;

		&.active {
			color: white;
			background-color: #9013fe;
			&:hover {
				background-color: #a23eff;
			}
		}
	}

	&:hover {
		.represent-thumbnail-button {
			visibility: visible;
		}
	}
}