.arkb-iconPicker {
	display: flex;

	--arkb-the-size: 32px;

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

	>.components-button {
		// display: flex;
		// align-items: center;
		height: calc(var(--arkb-the-size) + 16px);
		padding: 12px 8px;
	}

	>.components-button.-clear {
		margin-left: 1em;
	}

	.arkb-iconPicker__placeholder {

		display: block;
		min-width: var(--arkb-the-size);
		margin: auto 8px;
		font-size: 14px;
	}

	.arkb-iconPicker__prev {
		width: var(--arkb-the-size);
		height: 100%;
		margin: 0 8px;
		font-size: var(--arkb-the-size);
		line-height: 1;
	}
}

.arkb-iconPicker__popover {

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

	.components-popover__content {
		padding: 12px;
		overflow: hidden;
	}

	.arkb-iconPicker__s {
		// padding: 4px;

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

	.arkb-iconPicker__list {
		width: 212px;
		height: unquote("min(240px, 80vh)");
		margin-top: 12px;
		overflow-y: auto;

		@include pc {
			width: 240px;


		}

		.arkb-iconPicker__tab {
			// swl-iconPicker__list

			.components-tab-panel__tabs {
				border-bottom: solid 1px rgba(0, 0, 0, .2);
			}

			.components-tab-panel__tabs-item {
				height: 40px;
				margin-bottom: -1px;

				> svg {
					width: 16px;
					height: 16px;
				}
			}


			.components-tab-panel__tab-content {
				margin-top: 12px;
				padding: 0 4px;
			}
		}

		.components-button-group {
			display: flex;
			flex-wrap: wrap;
			width: calc(100% + 8px);
			// height: 100%;
			margin-left: -4px;
			padding: 4px;
			// overflow-y: scroll;

			.components-button {
				position: relative;
				z-index: 0;
				display: flex;
				justify-content: center;
				width: 20%;
				height: auto;
				margin: 0;
				padding: 0;
				border-radius: 4px;

				@include pc {

					width: 16.66%;

				}

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

				> svg {
					position: absolute;
					top: 20%;
					left: 20%;
					width: 60%;
					height: 60%;
				}

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


	}

	.__noIcon {
		margin: 0;
		text-align: center;
	}
}


.arkb-iconNameInput.arkb-iconNameInput {
	margin-top: -12px;
}

.arkb-helpText--iconPicker {
	margin-top: -12px;


	.arkb-helpPopover {

		.arkb-helpPopover__desc {
			// top: 0;
			right: 2em;
			left: auto;
			transform: translateY(-100%);
		}

		ul {
			margin: 1em 1.5em;
			list-style: disc;
		}

		li {
			line-height: 1.8;
			letter-spacing: .2px;
		}

		code {
			margin-left: 4px;
		}
	}
}


// 旧
.ark-iconPicker {

	display: flex;
	flex-wrap: wrap;

	button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20%;
		margin: -1px -1px 0 0 !important;
		padding: 8px;
		border-radius: 0;
	}

	svg {
		width: 16px;
		height: 16px;
	}

	i {
		font-size: 16px;
	}
}