/**
 * SVG Icons Editor Styles
 *
 * @package Functionalities
 * @since 0.11.0
 */

/* Icon wrapper - inline-flex for proper sizing */
.func-icon-wrapper {
	display: inline-flex !important;
	align-items: center;
	line-height: 0;
}

/* Inline SVG icon styling */
.func-icon-wrapper .func-icon,
svg.func-icon,
.func-icon {
	display: inline-block !important;
	width: 1em !important;
	height: 1em !important;
	vertical-align: -0.125em;
	fill: currentColor;
}

/* Ensure path elements inherit fill */
.func-icon path,
.func-icon-wrapper svg path {
	fill: inherit;
}

/* Hide the placeholder bullet character inside func-icon.
   We use a bullet to force Gutenberg to keep the closing tag.
   The ::before pseudo-element shows the icon, text is hidden. */
i.func-icon,
span.func-icon {
	font-size: 0 !important;
	line-height: 0 !important;
}

/* The icon is shown via ::before pseudo-element, which uses normal font-size */
i.func-icon::before,
span.func-icon::before {
	font-size: 1rem;
}

/* Popover styles */
.func-svg-icon-popover {
	z-index: 100001;
}

.func-svg-icon-popover .components-popover__content {
	padding: 0;
	overflow: visible;
}

.func-svg-icon-picker {
	padding: 12px;
	min-width: 280px;
	max-width: 340px;
	background: #fff;
}

/* Search wrapper */
.func-icon-search-wrapper {
	margin-bottom: 12px;
}

.func-icon-search-input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #949494;
	border-radius: 4px;
	font-size: 14px;
	outline: none;
	transition: border-color 0.1s ease-in-out;
}

.func-icon-search-input:focus {
	border-color: #007cba;
	box-shadow: 0 0 0 1px #007cba;
}

/* Icon grid in popover */
.func-icon-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
	max-height: 240px;
	overflow-y: auto;
	padding: 4px;
}

.func-icon-grid::-webkit-scrollbar {
	width: 6px;
}

.func-icon-grid::-webkit-scrollbar-track {
	background: #f0f0f0;
	border-radius: 3px;
}

.func-icon-grid::-webkit-scrollbar-thumb {
	background: #c0c0c0;
	border-radius: 3px;
}

/* Empty state */
.func-icon-empty {
	text-align: center;
	color: #666;
	padding: 20px;
	margin: 0;
	grid-column: 1 / -1;
	font-size: 13px;
}

/* Icon button in grid */
.func-icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	transition: all 0.15s ease;
}

.func-icon-btn:hover {
	border-color: #007cba;
	background: #f0f6fc;
	transform: scale(1.05);
}

.func-icon-btn:focus {
	outline: 2px solid #007cba;
	outline-offset: -2px;
	box-shadow: none;
}

/* Icon preview wrapper */
.func-icon-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.func-icon-preview svg {
	width: 22px;
	height: 22px;
	max-width: 100%;
	max-height: 100%;
	fill: currentColor;
	color: #1e1e1e;
}

/* Make SVGs inside icon buttons scale properly */
.func-icon-btn svg[viewBox],
.func-icon-btn svg[viewbox] {
	width: 100%;
	height: 100%;
	max-width: 22px;
	max-height: 22px;
}

/* Block styles */
.func-svg-icon-block-wrapper {
	margin: 1em 0;
	clear: both;
}

.func-svg-icon-block-render {
	line-height: 0;
}

.func-svg-icon-block-render svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

.func-svg-icon-block-render svg path {
	fill: inherit;
}

.func-svg-icon-block-placeholder {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 40px !important;
	background: #f0f0f0 !important;
	border: 2px dashed #ccc !important;
	color: #666 !important;
	border-radius: 4px;
	cursor: pointer;
}

.func-svg-icon-block-placeholder:hover {
	background: #e8e8e8 !important;
	border-color: #999 !important;
}

.func-icon-btn.is-selected {
	border-color: #007cba;
	background: #f0f6fc;
	box-shadow: 0 0 0 1px #007cba;
}