.common-file-editor {
	font-size: medium;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	pre {
		display: flex;
		flex-direction: column;
		flex-grow: 1000;
		code {
			display: block;
			overflow: auto;
			padding: 1em;
			border: 1px solid #eee;
			background-color: #f9f9f9;
			border-radius: 5px;
			flex-grow: 1000;
		}
	}
	textarea {
		padding: 1em;
		color: #333;
		background-color: #f9f9f9;
		border: 1px solid #999;
	}
	img {
		max-width: 100%;
		max-height: 100%;
	}
	&__tab-bar {
		flex-grow: 0;
		flex-shrink: 0;
		overflow: auto;
		> ul {
			padding: 0;
			margin: 0;
			display: flex;
			flex-wrap: nowrap;
			gap: 5px;
			> li {
				list-style-type: none;
				padding: 0;
				margin: 0;
				white-space: nowrap;
				> a {
					display: inline-block;
					padding: 5px 15px;
					text-decoration: none;
					background-color: #f9f9f9;
					color: #333;
					border-radius: 13px;
					&:hover {
						background-color: #f5faff;
						text-decoration: underline;
						color: #00a0e6;
					}
					&.current {
						background-color: #f5faff;
						color: #00a0e6;
						font-weight: bold;
					}
				}
			}
		}
	}
	&__body {
		flex-grow: 1;
		overflow: auto;
		display: flex;
		flex-direction: column;
	}
	&__tab-body {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		overflow: auto;
		> * {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
		}
	}
	&__tab-body-texteditor,
	&__tab-body-texteditor > form {
		display: flex;
		flex-direction: column;
		flex-grow: 1000;
	}

	&__tab-body-menu-bar {
		display: flex;
		flex-grow: 0;
		flex-shrink: 0;
		justify-content: space-between;
		margin: 0;
		padding: 5px 0;
		li {
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
	}

	&__tab-body-preview {
		display: flex;
		flex-direction: column;
		overflow: auto;

		&-main {
			flex-grow: 1000;
			flex-shrink: 1000;
			overflow: auto;
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;

			pre {
				margin: 0;
				padding: 0;
				flex-grow: 1000;
				flex-shrink: 1000;
				max-height: 100%;
				display: flex;
				flex-direction: column;
				width: 100%;
				box-sizing: border-box;
				flex-wrap: nowrap;
				code {
					display: block;
					flex-grow: 1000;
					flex-shrink: 1000;
					overflow: auto;
					width: 100%;
					box-sizing: border-box;
				}
			}
		}
	}
	&__tab-body-image-preview {
		width: 100%;
		padding: 20px;
		text-align: center;
		box-sizing: border-box;
	 }

	 &__tab-body-editor-main {
		display: flex;
		flex-direction: column;
		flex-grow: 1000;
		> textarea {
			flex-grow: 1000;
			width: 100%;
			box-sizing: border-box;
		}
	}

	&__mm-preview,
	&__htmm-preview {
		flex-grow: 1000;
		min-height: 400px;
		width: 100%;
	}

	&__tab-body-mmeditor {
		display: flex;
		flex-direction: column;
		flex-grow: 1000;
	}
	&__mm-editor-main,
	&__htmm-editor {
		flex-grow: 1000;
		min-height: 400px;
		width: 100%;
	}
}