.ls-iconModal {
	position: relative;
	width: 480px;
	max-width: 92% !important;
	height: 100%; // Modalのmax-heightまで広げる
	max-height: 88% !important;
	margin: auto;
	--the-iconbtn-size: 12.5%;

	@media (max-width: 359px) {
		// --the-iconbtn-size: 16.666%;
		--the-iconbtn-size: 20%;
	}

	@media (min-width: 500px ) {
		--the-iconbtn-size: 10%;
	}


	// ポジション
	// &[data-position="center"] {
	// }

	&.-position-sidebar {
		// エディターのPCサイズ
		@media not all and (max-width: 782px) {
			margin-right: 16px;
		}
	}

	.components-modal__content {
		margin-top: 48px;
		padding: 4px 24px 24px;
		overflow: hidden;
	}

	.components-modal__header {
		height: 48px;
		padding: 0 24px;
		transform: translateY(4px);

		.components-modal__header-heading {
			font-size: 16px;
		}

	}

	.ls-iconModal__inner {
		display: grid;
		grid-template-rows: auto 1fr auto;
		grid-template-columns: auto;
		gap: 12px;
		height: 100%;


	}

	.ls-iconModal__top,
	.ls-iconModal__bottom {
		font-size: 13px;

		// > .components-base-control {
		//     flex: 1 0 auto;
		// }

		.components-base-control__field {
			margin-bottom: 0 !important;
		}
	}

	.ls-iconModal__top {
		grid-row: 1 / 2;
		margin: 4px 0 -4px;
	}

	// アイコン名検索欄
	.ls-iconModal__bottom {
		grid-row: 3 / 4;

		.__helpText {
			margin-bottom: -12px;
			font-size: 12px;
		}
	}


	.ls-iconModal__s {

		.components-text-control__input {
			font-size: inherit;
			line-height: 1.5;
		}
	}


	.ls-iconModal__tab {
		position: relative;
		display: flex;
		flex-direction: column;
		grid-row: 2 / 3;
		width: 100%;
		overflow: hidden;
		// border-bottom: solid 1px rgba(0, 0, 0, .2);

		&::after {
			position: absolute;
			bottom: 0;
			left: 0;
			display: block;
			width: 100%;
			height: 32px;
			background: linear-gradient(transparent 0%, #fff 100%);
			content: "";
		}
		// タブナビゲーション
		.components-tab-panel__tabs {
			display: none;
			border-bottom: solid 1px rgba(0, 0, 0, 0.2);
		}

		.components-tab-panel__tabs-item {
			flex: 1;
			min-width: unset;
			height: 48px;
			margin-bottom: -1px;
			padding: 0;

			> svg {
				width: 20px;
				height: 20px;
				margin: auto;
			}
		}


		.components-tab-panel__tab-content {
			position: relative;
			// display: flex;
			// flex-direction: column;
			margin-top: 6px;
			padding: 0 4px;
			overflow: hidden;
		}

		.arkb-proOnlyArea__message {
			top: 6em;
		}
	}

	// アイコンスタイル選択
	.__iconStyles {
		position: absolute;
		top: -2px;
		right: -2px;
		z-index: 10;
		// font-size: 14px;
		display: flex;
		align-items: center;
		padding: 4px;
		// background: rgba(250, 250, 250, .5);
		background: #fff;
		border-radius: 2px;
		// backdrop-filter: blur(4px);

		.components-button {
			justify-content: center;
			width: 6em;
			height: 32px;

			// &:not(.is-primary) {
			//     background: rgba(250, 250, 250, .8);
			// }
		}

		.__label {
			display: none;
			margin-right: 8px;
		}
	}

	.__iconList {
		display: flex;
		flex-wrap: wrap;
		width: calc(100% + 8px);
		height: 100%;
		margin-left: -4px;
		padding: 32px 4px 32px;
		overflow-y: auto;

		&[data-filterd="1"] {
			margin-top: 8px;
		}

		.components-button {
			position: relative;
			z-index: 0;
			display: flex;
			justify-content: center;
			width: var(--the-iconbtn-size);
			height: auto;
			margin: 0;
			padding: 0;
			border-radius: 4px;

			&::before {
				display: block;
				width: 0;
				height: 0;
				padding-top: 100%;
				content: "";
			}

			> svg {
				position: absolute;
				top: 18%;
				left: 18%;
				width: 64%;
				height: 64%;
			}

			&:not(:focus) {
				box-shadow: none;
			}
		}
	}

	// アイコンカテゴリーのラベル
	.__iconCategory {
		display: block;
		width: 100%;
		padding: 2px 0;
		font-size: 12px;
		line-height: 1.5;

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

	// not foundメッセージ
	.__noIcon {
		margin: 0;
		padding-top: 40px;
	}

	svg[fill="none"] {
		fill: none;
	}
}


.ls-svgInput {
	gap: 8px;
	align-items: flex-end;

	> .components-base-control {
		width: 100%;
		margin-bottom: 0 !important;
	}

	.components-base-control__field {
		margin-bottom: 0 !important;
	}

	// .components-base-control__label {
	//     margin-bottom: 4px;
	// }

	.components-textarea-control__input {
		display: block;
		height: 48px;
		font-size: 13px;
		line-height: 1.3;
		resize: none;
	}

	.__setBtn {
		flex-shrink: 0;
		height: 48px; // textareaに合わせる
	}
}