#wp-html-mail-template-designer {
	max-width: 1000px;
	margin-bottom: 80px;
	margin-left: auto;
	margin-right: auto;

	.wp-html-mail-tabs{
		width: 100%;
		margin-top: 30px;
		.components-tab-panel__tabs {
    		justify-content: center;
		}
	}

	.mail-designer{
		display: flex;
		flex-direction:row;

		.snackbar.components-snackbar {
			position: fixed;
			bottom: 0;
			z-index: 10;
			right: 0;
			padding: 16px 24px;
			margin: 30px;
			
			.components-snackbar__content {
				align-items: center;
			}
	
			.dashicon {
				margin-right: 10px;
			}
		}
	}

	.mail-optionspanel {
		width: 300px;

		.components-panel__header {
			background-color: #dddddd;
		}

		.components-range-control {
			width: 100%;
		}

		.components-color-picker {

			.components-base-control__label,
			.components-visually-hidden {
				display: none;
			}
		}

		.mail-info-panel{
			padding:16px;
		}

		.color-picker-popoper{
			position: relative;

			.swatch {
				width: 22px;
				height: 22px;
				border-radius: 2px;
				border: 3px solid #fff;
				box-shadow: 0 0 0 1px #757575;
				cursor: pointer;
			}

			.popover {
				position: absolute;
				top: calc(100% + 2px);
				right: 0;
				border-radius: 9px;
				box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
				z-index: 10;
				background: #fff;
			}
		}

		.components-toolbar{
			min-height: 40px;
		}

		.components-toolbar__control{
			padding:2px;
			min-width: 40px;
			height: 40px;

			&:before{
				left: 4px;
				right: 4px;
			}
		}

		.components-color-picker__body{
			padding-left: 0;
			padding-bottom: 0;
		}

		.mail-header-type{
			input[type="radio"]{
				display: none;
			}
		}

		.mail-header-type-icon{
			width: 280px;
			max-width: 90%;
			height: auto;
			margin-top: 10px;
			margin-bottom: 10px;
			border: 2px solid rgba(255,255,255,0.0);
			box-shadow: 0 0 7px 3px rgba(0, 0, 0, 0.1);
			transition: all 0.4s ease-out;
			opacity: 0.7;

			&:hover{
				border: 2px solid rgba(255, 255, 255, 1.0);
				box-shadow: 0 0 7px 3px rgba(0, 0, 0, 0.25);
				opacity: 1.0;
			}
		}

		.mail-header-type input[type="radio"]:checked+label .mail-header-type-icon {
			border: 2px solid rgba(255, 255, 255, 1.0);
			box-shadow: 0 0 7px 3px rgba(0, 0, 0, 0.3); 
			opacity: 1.0;
		}
	}

	.mail-container {
		width: calc(100% - 300px);
		min-width: 700px;
		min-height: 300px;

		.mail-content-wrap {
			width: 600px;
			margin: 1em auto 0 auto;
		}
	}

	.editable-element {
		cursor: pointer;
		position: relative;

		.edit-frame-default,
		.edit-frame-active {
			position: absolute;
			width: calc(100% + 6px);
			height: calc(100% + 6px);
			left: -6px;
			top: -4px;
			border: 1px solid transparent;
			border-left: 3px solid transparent;
			transition: all 0.5s ease-out;
			pointer-events: none;

			.edit-frame-handle {
				position: absolute;
				top: -32px;
				height: 20px;
				left: -3px;
				background: #fff;
				border-top: 1px solid;
				border-right: 1px solid;
				border-left: 3px solid;
				padding: 10px 40px 0px 20px;
				pointer-events: all;
				opacity: 0;
				transition: all 0.5s ease-out;
				font-size: 12px;
				text-transform: uppercase;
				z-index: 20;

				.dashicon {
					position: absolute;
					right: 5px;
					top: 5px;
				}
			}

			&.frame-size-xs {
				width: calc(100% - 4px);
				height: calc(100% - 4px);
				left: 0px;
				top: 2px;
			}

			&.frame-size-s {
				width: 100%;
				height: 100%;
				left: -2px;
				top: 0;
			}

			&.handle-align-right {
				border-left-width: 1px;
				border-right-width: 3px;

				.edit-frame-handle {
					right: -3px;
					left: auto;
					border-left-width: 1px;
					border-right: 3px solid;
				}
			}

			&.edit-frame-active {
				border-color: rgba(83, 94, 102, 1);

				.edit-frame-handle {
					opacity: 1;
					border-color: rgba(83, 94, 102, 1);
				}
			}
		}

		&:hover {
			&>.edit-frame-default {
				border-color: rgba(83, 94, 102, 0.5);
				box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
			}

			&>.edit-frame-default,
			&>.edit-frame-active {
				.edit-frame-handle {
					opacity: 1;
					box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
					border-color: rgba(83, 94, 102, 0.5);
				}
			}
		}
	}

	.components-base-control__field+.components-base-control__help {
		margin-top: 0;
	}

	.components-base-control+.components-base-control {
		margin-bottom: 0;
	}

	/*********************************
	* header image component
	*********************************/
	.headerimage {
		.components-resizable-box__container {
			display: inline-block;

			img {
				max-width: 600px;
				width: 100%;
				height: 100%;
			}
		}
	}

	.header-image-placeholder {
		display: inline-block;
		background: rgba(83, 94, 102, 0.5);
	}

	.editor-post-featured-image__toggle {
		background-position: center;
		background-size: cover;
		text-shadow: 1px -1px #fff, 1px 1px #fff, -1px 1px #fff, -1px -1px #fff;
	}

	/*********************************
	* content component
	*********************************/
	.mail-content {
		padding-left: 24px;
		padding-right: 24px;
	}

	/*********************************
	* footer component
	*********************************/
	.mail-footer {
		padding-left: 24px;
		padding-right: 24px;
		padding-bottom: 1em;
		font-size: 12px;
		line-height: 16px;
		color: #aaaaaa;

		a {
			color: #aaaaaa;
		}
	}

	.footer-html .components-textarea-control__input {
		font-family: 'Courier New', Courier, monospace;
		font-size: 13px;
		min-height: 300px;
	}

	// general settings wrapper 
	.mail-settings-content{
		width: 100%;
		max-width: 100%;
	}


	.mail-plugin-icon{
		width: 32px;
		height: 32px;
		object-fit:contain;
		border-radius: 50%;
		margin-right: 20px;
	}

	.mail-import-export{
		width: 100%;
		
		textarea{
			word-break: break-all;
			font-family: 'Courier New', Courier, monospace;
		}
	}

	.mail-advanced-action-button{
		margin-right: 15px;
	}

	.save-button-pane-bottom{
		width: 100%;
		text-align: center;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	.mail-content-editor{

		.interface-interface-skeleton{
			position: relative;
			left:0;
		}

		.editor-styles-wrapper{
			min-height: 600px;
		}

		.is-root-container.block-editor-block-list__layout {
			max-width: 600px;
			margin-left: auto;
			margin-right: auto;
			margin-top: 60px;
			margin-bottom: 60px;
			min-height: 150px;
		}
	}
}