@charset "utf-8";

/*
 * 管理画面で読み込むCSS
 */
@import "./mixin/**/*.scss";
@import "../../node_modules/react-notifications-component/dist/scss/notification";

// 設定ページ
$bg: #eff0f3;
$headline:#0d0d0d;
$text: #2a2a2a;
$white: #fffffe;
$error_color: #cc1818;
$help_color: #555;

@import "./menu/controls";
@import "./menu/palette";
@import "./menu/block_style";
@import "./menu/license";
@import "./menu/field";
@import "./menu/_util";
@import "./editor/_utility";
@import "./common/format";
@import "../gutenberg/blocks/button/index.scss";
@import "../gutenberg/blocks/toc/index.scss";

#wpwrap {
	color: $text;
	background: $bg;
}

#wpcontent {
	padding-left: 0 !important;
}

#arkb-menu {
	margin: 0;
	font-size: 14px;

	.nav-tab-wrapper {
		padding-top: 1em;
		border-bottom: none;
	}

	.nav-tab {
		margin: 0;
		padding: .5em 1.5em;
		background: $white;
		border: none;
		border-radius: 3px 3px 0 0;
		opacity: .7;

		&.nav-tab-active {
			background: $bg;
			opacity: 1;
		}
	}

	.arkb-menu__container {
		max-width: 1200px;
		margin-right: auto;
		margin-left: auto;
	}

	.arkb-menu__head {
		padding: 24px 24px 0;
		color: $text;
		background: $white;
	}

	h1.arkb-menu__title {
		display: flex;
		align-items: center;
		color: $headline;
		font-size: 2em;

		.arkb-menu__titleLogo {
			width: 1.25em;
			height: 1.25em;
			margin-right: .25em;
		}
	}

}

.arkb-menu__body {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;

	.rnc__base {
		top: 0;
		left: 0;
	}

	.rnc__notification-container--top-left {
		position: fixed;
		top: 50px;
		left: 50%;
		transform: translateX(-50%);
	}
}

.arkb-menu__section {

	margin-top: 3em;

	&[data-disabled="true"] {

		.arkb-menu__section__inner {
			position: relative;

			&::before {
				position: absolute;
				top: -2px;
				right: -2px;
				bottom: -2px;
				left: -2px;
				z-index: 99;
				background-color: rgba(#fff, .1);
				background-size: 8px 8px;
				backdrop-filter: blur(2px);
				content: "";
			}
		}

		.__onlyProMessage {
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 100;
			padding: .5em 1em;
			color: #fff;
			font-size: 16px;
			line-height: 1;
			background-color: #000;
			border-radius: 2em;
			box-shadow: 0 2px 16px rgba(0, 0, 0, .2);
			transform: translateX(-50%) translateY(-50%);
		}
	}

	// h2
	.arkb-menu__section__title {
		position: relative;
		margin: 0 0 1em;
		padding: 8px 12px;
		padding-left: 1.5em;
		color: $headline;
		font-size: 1.5em;

		&::before {
			position: absolute;
			top: calc(50% - .5em - 1px);
			left: 0;
			width: 1em;
			height: 1em;
			background: currentColor;
			border: solid 2px #fff;
			border-radius: 2px;
			box-shadow: 0 0 0 1px currentColor;
			transform: scale(.6) rotate(45deg);
			content: "";
		}
	}

	h3 {
		position: relative;
		padding-left: 1em;
		font-size: 1.25em;

		&::before {
			position: absolute;
			top: calc(50% - .5em);
			left: -.25em;
			width: 1em;
			height: 1em;
			background: currentColor;
			border-radius: 2px;
			transform: scale(.5) rotate(45deg);
			content: "";
		}

		&:not(:first-child) {
			margin-top: 2.5em;
		}
	}

	// .arkb-menu__section__help{}

	.arkb-menu__section__inner {

		display: block;

		&[data-style="box"] {
			padding: 2em;
			background: $white;
			border-radius: 4px;
			box-shadow: 0 4px 24px -8px rgba(42, 48, 56, .15);

			@include sp {
				padding: 1.25em;
			}
		}

		> *:first-child {
			margin-top: 0 !important;
		}
	}
}


.arkb-menu__saveError {
	margin-right: 1px;
	margin-bottom: .5em;
	// border-radius: 2px;
	padding: .5em;
	padding-left: 1.5em;
	color: $error_color;
	font-weight: bold;
	font-size: 13px;
	text-shadow: 0 0 2px #fff;
	list-style: disc outside;
	backdrop-filter: blur(10px);

	li {
		margin-bottom: 0;
		padding-left: 4px;
	}

	li::marker {
		content: "×";
	}
}

.arkb-menu__saveBtn {
	padding: 2px;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 8px 56px -12px rgba(0, 0, 0, .4), 0 1px 8px rgba(0, 0, 0, .2);

	.arkb-menu__submit {
		height: auto;
		padding: 12px 16px;
		font-size: 14px;
		line-height: 1.5;
		letter-spacing: .5px;

		@include sp {
			padding: 8px 12px;
			font-size: 13px;
		}
	}
}

.arkb-menu__loadingLayer {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
	display: block;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: .2;

	.components-spinner {
		margin: 0;
		transform: scale(1.5);
	}
}

.arkb-menu__modal {

	.components-modal__content {
		width: 600px;
		max-width: 90vw;
	}

	.__importTable {

		.components-button + .components-button {
			margin-left: 4px;
		}

		.__th--color {
			width: 40px;
			text-align: center;
		}

		.__th--import {
			width: 5em;
		}

		th,
		td {
			font-size: 13px;
			vertical-align: middle;
		}
	}

	.__paletteBtn {
		width: 28px;
		height: 28px;
		margin: 0 auto;
	}

	.__choice {
		display: flex;
		gap: 4px;
	}

	.__controls {
		display: flex;
		gap: 12px;
		align-items: center;
		justify-content: space-between;
		margin-top: 16px;

		.components-button {
			padding: 6px 12px;
		}
	}
}