// Utilities
//
// 各種ユーティリティ。
//
// Styleguide 9.0

// Editor Type Badge
//
// 編集モードを表示します。
//
// Markup:
// <span class="px2-editor-type px2-editor-type--not-exists"></span>
// <span class="px2-editor-type px2-editor-type--page-not-exists"></span>
// <span class="px2-editor-type px2-editor-type--alias"></span>
// <span class="px2-editor-type px2-editor-type--html"></span>
// <span class="px2-editor-type px2-editor-type--html-gui"></span>
// <span class="px2-editor-type px2-editor-type--txt"></span>
// <span class="px2-editor-type px2-editor-type--md"></span>
// <span class="px2-editor-type px2-editor-type--jade"></span>
// <p><code>.px2-editor-type--fullwidth</code> を付加して最大幅にできます。</p>
// <span class="px2-editor-type px2-editor-type--html-gui px2-editor-type--fullwidth"></span>
//
// Styleguide 9.1
@mixin px2-editor-type{
	display: inline-block;
	font-size: 12px;
	font-family: sans-serif;
	line-height: 1;
	padding: 0.4em 1em;
	text-align: center;
	color: #fff;
}
.px2-editor-type{
	@include px2-editor-type;

	&__html, // <- deprecated (古い書き方ですが、後方互換のために残します)
	&--html{
		@include px2-editor-type;
		background-color: #4a8a98;
		&:before{
			content: "HTML";
		}
	}
	&__html-gui, // <- deprecated (古い書き方ですが、後方互換のために残します)
	&--html-gui{
		@include px2-editor-type;
		background-color: #9f5b75;
		&:before{
			content: "Block"; // 以前は GUI と表記していました。2021-08-01 改称
		}
	}
	&__txt, // <- deprecated (古い書き方ですが、後方互換のために残します)
	&--txt{
		@include px2-editor-type;
		background-color: #999;
		&:before{
			content: "TEXT";
		}
	}
	&__md, // <- deprecated (古い書き方ですが、後方互換のために残します)
	&--md{
		@include px2-editor-type;
		background-color: #ae9b59;
		&:before{
			content: "Markdown";
		}
	}
	&__jade, // <- deprecated (古い書き方ですが、後方互換のために残します)
	&--jade{
		@include px2-editor-type;
		background-color: #999;
		&:before{
			content: "Jade";
		}
	}
	&__not-exists, // <- deprecated (古い書き方ですが、後方互換のために残します)
	&--not-exists{
		@include px2-editor-type;
		background-color: #c3c3c3;
		&:before{
			content: "未作成";
		}
	}
	&__page-not-exists, // <- deprecated (古い書き方ですが、後方互換のために残します)
	&--page-not-exists{
		@include px2-editor-type;
		background-color: #c3c3c3;
		&:before{
			content: "ページ未作成";
		}
	}
	&__alias, // <- deprecated (古い書き方ですが、後方互換のために残します)
	&--alias{
		@include px2-editor-type;
		background-color: #c3c3c3;
		&:before{
			content: "ALIAS";
		}
	}
	&--fullwidth{
		width: auto;
		display: block;
		float:none;
	}
}

// Loading
// 
// Thanks: https://github.com/ConnorAtherton/loaders.css
//
// Markup:
// <div class="px2-loading"></div>
// 
// <a href="javascript:loadingDEMO();">loadingDEMO</a>
// <script>
// function loadingDEMO(){
// 	px2style.loading(); // Display Loading animation.
// 	px2style.loadingMessage('Loading Message 1...'); // Update Loading message.
// 	setTimeout(function(){
// 		px2style.loadingMessage('Loading Message 2...'); // Update Loading message.
// 		setTimeout(function(){
// 			px2style.closeLoading(); // Remove Loading animation.
// 		}, 5000);
// 	}, 5000);
// }
// </script>
//
// Styleguide 9.2

@keyframes px2-loading {
	0% {
		transform: scale(0.0);
	}
	100% {
		transform: scale(1.0);
		opacity: 0;
	}
}

.px2-loading{
	clear: both;
	float: none;
	display: flex;
	justify-content: center;
	align-content: center;
	text-align:center;
	padding:80px;
	z-index: 1010000;

	&::before{
		display: block;
		content: "";

		background-color: $px2-main-color; // fallback
		background-color: var(--px2-main-color, $px2-main-color);
		width: 15px;
		height: 15px;
		border-radius: 100%;
		margin: 2px;
		animation-fill-mode: both;

		display: inline-block;
		height: 60px;
		width: 60px;
		animation: px2-loading 1s 0s ease-in-out infinite;

	}
}


// Simple Document
//
// Markup:
// <div class="px2-document">
// 	<h1>Header 1</h1>
// 	<p>
// 		標準的なドキュメントのための要素を記述します。<br />
// 		Markdown などで描画された標準的なHTML要素によって構成されたドキュメントに、標準的なスタイルを適用します。<br />
// 	</p>
// 	<h2>Header 2</h2>
// 	<ul>
// 		<li>List Item 1</li>
// 		<li>List Item 2
// 			<ul>
// 				<li>List Item 1</li>
// 				<li>List Item 2
// 				</li>
// 				<li>List Item 3</li>
// 			</ul>
// 		</li>
// 		<li>List Item 3
// 			<ol>
// 				<li>List Item 1</li>
// 				<li>List Item 2
// 				</li>
// 				<li>List Item 3</li>
// 			</ol>
// 		</li>
// 	</ul>
// 	<h3>Header 3</h3>
// 	<h4>Header 4</h4>
// 	<h5>Header 5</h5>
// 	<h6>Header 6</h6>
// 	<ol>
// 		<li>List Item 1</li>
// 		<li>List Item 2
// 			<ol>
// 				<li>List Item 1</li>
// 				<li>List Item 2
// 				</li>
// 				<li>List Item 3</li>
// 			</ol>
// 		</li>
// 		<li>List Item 3
// 			<ul>
// 				<li>List Item 1</li>
// 				<li>List Item 2
// 				</li>
// 				<li>List Item 3</li>
// 			</ul>
// 		</li>
// 	</ol>
// 	<div class="px2-p">
// 		<table class="px2-table">
// 			<tbody>
// 				<tr>
// 					<th>th</th>
// 					<td>td</td>
// 				</tr>
// 			</tbody>
// 		</table>
// 	</div>
// 	<p class="px2-p">Slim Paragraph.</p>
// </div>
//
// Styleguide 9.3
.px2-document{
	font-size: medium;
	line-height: 1.5;

	// paragraph
	p{
		margin-top: 1em;
		margin-bottom: 1em;
	}

	// headers
	h1{
		font-weight:bold;
		margin-top: 2em;
		margin-bottom: 0.5em;
	}
	h2, h3, h4, h5, h6{
		font-weight:bold;
		margin-top: 1.5em;
		margin-bottom: 0.5em;
	}
	h1{font-size: 240%;}
	h2{font-size: 180%;}
	h3{font-size: 160%;}
	h4{font-size: 130%;}
	h5{font-size: 120%;}
	h6{font-size: 110%;}

	// lists
	ul, ol {
		display: block;
		margin-top: 1em;
		margin-bottom: 1em;
		padding-left: 40px;
		ul, ol {
			margin-top: 0;
			margin-bottom: 0;
		}
	}
}

// Paragraph
//
// Markup:
// <div class="px2-p">
// 	前後に、p要素と同等のマージンを付加します。
// </div>
//
// Styleguide 9.4
.px2-p{
	margin-top: 1em;
	margin-bottom: 1em;
}

// 文字組み
// 
// Markup:
// <div class="px2-text-align-left">
// 	左寄せ
// </div>
// <div class="px2-text-align-center">
// 	中央寄せ
// </div>
// <div class="px2-text-align-right">
// 	右寄せ
// </div>
//
// Styleguide 9.5
.px2-text-align-left{
	text-align: left;
}
.px2-text-align-center{
	text-align: center;
}
.px2-text-align-right{
	text-align: right;
}

// 文字サイズ
// 
// Markup:
// <div class="px2-font-size-ss">
// 	最も小さい文字サイズ
// </div>
// <div class="px2-font-size-s">
// 	小さい文字サイズ
// </div>
// <div class="px2-font-size-l">
// 	大きい文字サイズ
// </div>
// <div class="px2-font-size-ll">
// 	最も大きい文字サイズ
// </div>
//
// Styleguide 9.6
.px2-font-size-ss{
	font-size: 74%;
}
.px2-font-size-s{
	font-size: 88%;
}
.px2-font-size-l{
	font-size: 112%;
}
.px2-font-size-ll{
	font-size: 136%;
}

// Slimize
//
// Markup:
// <h1 class="px2-slim">Header 1</h1>
// <h2 class="px2-slim">Header 2</h2>
// <h3 class="px2-slim">Header 3</h3>
// <h4 class="px2-slim">Header 4</h4>
// <h5 class="px2-slim">Header 5</h5>
// <h6 class="px2-slim">Header 6</h6>
// <p class="px2-slim">
// 	margin と padding を 0 にします。
// </p>
// <ul class="px2-slim">
// 	<li>margin と padding を 0 にします。</li>
// </ul>
// <ol class="px2-slim">
// 	<li>margin と padding を 0 にします。</li>
// </ol>
// <div class="px2-slim px2-slim--r">
// 	<p>子要素も含めて、margin と padding を再帰的に 0 にします。</p>
// 	<ul>
// 		<li>子要素も含めて、margin と padding を再帰的に 0 にします。</li>
// 	</ul>
// </div>
//
// Styleguide 9.7
.px2-slim{
	margin: 0;
	padding: 0;

	&--r *{
		margin: 0;
		padding: 0;
	}
}

// Responsive Block
//
// Markup:
// <div class="px2-responsive">
// 	<table class="px2-table">
// 		<tbody>
// 			<tr>
// 				<th>th</th>
// 				<td>1000000000</td>
// 				<td>2000000000</td>
// 				<td>3000000000</td>
// 				<td>4000000000</td>
// 				<td>5000000000</td>
// 				<td>6000000000</td>
// 				<td>7000000000</td>
// 				<td>8000000000</td>
// 				<td>9000000000</td>
// 				<td>10000000000</td>
// 				<td>11000000000</td>
// 				<td>12000000000</td>
// 				<td>13000000000</td>
// 			</tr>
// 		</tbody>
// 	</table>
// </div>
//
// Styleguide 9.8
.px2-responsive{
	overflow: auto;
}