@charset "utf-8";
.pickles2-module-editor{

	&__content{
		position: relative;
		left: 0; top: 0;
		width: calc(100% - 20px);
		max-width: 1024px;
		height: 100%;
		overflow: visible;
		margin: 0 auto;
	}

	// module title
	&__title{
		display: block;
		margin: 0;
		padding: 0;
		font-size: 140%;

		&__label{
			font-weight: bold;
		}
		&__id{
			font-weight: normal;
			font-size: 80%;
			padding-left: 1em;

			&:before{
				content: '(';
			}
			&:after{
				content: ')';
			}
		}
	}

	// button group
	&__buttons{
		display: block;
		padding: 5px 0;
		margin: 0;
		>li{
			display: inline-block;
			padding: 0;
			margin: 0;
			list-style-type: none;
		}
	}

	// packageList
	&__packageList{
		margin: 0.5em 0;
		padding: 0;
	}
	&__packageList>li{
		display: block;
		list-style-type: none !important;
		margin: 2px 0;
		padding: 5px 5px 5px 15px;
		background-color: #000;
		border: 1px solid #eee;
		border-radius: 3px;
		color: #fff;
	}

	// categoryList
	&__categoryList{
		margin: 0.5em 0;
		padding: 0;
	}
	&__categoryList>li{
		display: block;
		list-style-type: none !important;
		margin: 2px 0;
		padding: 5px 5px 5px 15px;
		background-color: #ddd;
		border: 1px solid #eee;
		border-radius: 3px;
		color: #333;
	}

	// moduleList
	&__moduleList{
		margin: 0.3em 0;
		padding: 0;
	}
	&__moduleList>li{
		display: block;
		list-style-type: none !important;
		margin: 2px 0;
		padding: 5px 5px 5px 15px;
		background-color: #fbfbfb;
		border: 1px solid #eee;
		border-radius: 3px;
		color: #333;
	}

	// pages/editModule
	&__module-edit{
		h2{
			margin: 0;
			padding: 5px;
			font-size: 14px;
		}
		&__tab{
			display: flex;
			justify-content: center;
			padding: 5px 0;
			min-width: 100%;
			overflow: hidden;
			>button{
				width: auto;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding-left: 2px;
				padding-right: 2px;
				flex-grow: 1;
				flex-shrink: 1;
				flex-basis: auto;
				transition:
					flex-grow 0.2s,
					flex-shrink 0.2s
				;
				&:hover{
					flex-grow:2;
				}
			}
		}
		&__layout{
			position: relative;
			width: 100%;
			height: calc(100% - 40px);
			overflow: auto;
			&__content{
				position: absolute;
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				h2:first-child{
					margin-top: 0;
				}
				textarea{
					flex-grow: 1;
				}
			}
		}
		&__preview{
			height: 400px;
			display: flex;
			>div{
				height: 100%;
				width: 30%;
				&:first-child{
					width: 70%;
				}
			}
		}
	}

	// progress
	&--progress{
		position: fixed;
		top: 0; left: 0;
		overflow: hidden;
		background-color: rgba(128, 128, 128, 0.05);
		width: 100%;
		height: 100%;
		z-index: 11000;
		&-inner{
			position: absolute;
			left: 0; top: 50%;
			width: 100%;
			height: 180px;
			overflow: visible;
		}
		&-inner2{
			position: absolute;
			left: 0; top: -50%;
			width: 100%;
			height: 180px;
			overflow: visible;
		}
	}

	// ライブラリとの競合回避
	.px2-modal &__module-edit{
		display: block;
	}

}