.icons__wrapper {
	position: relative;
	margin-bottom: 24px;

	.icons__head {
		display: flex;
		align-items: center;
		height: 36px;
		justify-content: space-between;
		border: 1px solid #c3cec4;
		padding: 0 0 0 10px;
		box-sizing: border-box;
		cursor: pointer;
		width: 100%;
		background: none;
		text-align: left;
	}

	.selected__icon {
		flex: 1;
		display: flex;
		align-items: center;

		i {
			display: inline-block;
			line-height: 1;
		}

		svg {
			width: 20px;
			height: 20px;
			display: block;
		}
	}

	.icons__pick {
		width: 35px;
		height: 36px;
		background: #406343;
	}

	.atlb__iconpicker_button {
		background: none;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		text-align: center;
		width: 100%;
		cursor: pointer;
		color: #fff;
		transition: 0.3s;
	}

	.icons__head[aria-expanded='true'] .atlb__iconpicker_button {
		transform: rotate(180deg);
	}

	.icons__list {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		grid-row-gap: 10px;
		grid-column-gap: 10px;
		border-top: 1px solid #c2cec3;
		padding: 10px;
		max-height: 200px;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.icons__list button {
		padding: 8px;
		background: #fff;
		border: 1px solid #c3cec4;
		border-radius: 2px;
		font-size: 15px;
		cursor: pointer;

		i {
			transition: 0.3s;
			transform: scale(1);
			display: inline-block;
			line-height: 1;
		}

		i svg {
			width: 1em;
			height: 1em;
			display: block;
		}

		&.active {
			background: #406343;
			color: #fff;
			border-color: #406343;
		}
		&:hover {
			background: #406343;
			color: #fff;
			border-color: #406343;
			i {
				transform: scale(1.2);
			}
		}
	}

	.icons__tabs {
		display: flex;
		border-bottom: 1px solid #c2cec3;

		button {
			flex: 1;
			background: none;
			border: none;
			border-right: 1px solid #c2cec3;
			padding: 8px 12px;
			font-size: 12px;
			cursor: pointer;
			color: #1e1e1e;

			&:last-child {
				border-right: none;
			}

			&.active {
				background: #406343;
				color: #fff;
			}
		}
	}

	.icons__load_more {
		display: block;
		width: 100%;
		background: none;
		border: none;
		border-top: 1px solid #c2cec3;
		padding: 8px;
		font-size: 12px;
		cursor: pointer;
		color: #406343;

		&:hover {
			text-decoration: underline;
		}
	}

	.icons__custom {
		padding: 10px;

		textarea {
			width: 100%;
			box-sizing: border-box;
			font-family: monospace;
			font-size: 12px;
			resize: vertical;
		}

		.icons__custom_preview {
			margin-top: 10px;
			padding: 12px;
			border: 1px solid #c2cec3;
			text-align: center;

			i {
				font-size: 32px;
				line-height: 1;
				display: inline-block;

				svg {
					width: 1em;
					height: 1em;
					display: block;
				}
			}
		}

		.icons__custom_error {
			margin: 8px 0 0;
			color: #cc1818;
			font-size: 12px;
		}

		.icons__custom_apply {
			display: block;
			width: 100%;
			margin-top: 10px;
			background: #406343;
			color: #fff;
			border: none;
			padding: 8px;
			font-size: 13px;
			cursor: pointer;

			&:hover {
				background: #335336;
			}
		}

		.icons__custom_help {
			margin: 8px 0 0;
			font-size: 11px;
			color: #757575;
		}
	}

	.icons__wrapper_search {
		border: 1px solid #c2cec3;
		overflow: hidden;
		margin-top: -1px;
	}

	.search__form input {
		width: 100%;
		border: none;
		box-sizing: border-box;
		border-radius: 0;
		line-height: 1;
		padding: 8px 16px;
	}

	.search__form input:focus {
		outline: none !important;
		box-shadow: none !important;
	}
}