/**
 * Easy Testimonial Blocks — all editor styles.
 * Loaded from a single point: imported by src/blocks/grid/edit.js and
 * enqueued through the grid block's editorStyle (build/blocks/grid/index.css).
 */

/*
 * ─── Shared control styles ───────────────────────────────────────────────
 */

// help text
.components-base-control__help {
	font-style: italic;
}

// label
.etb-label {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;

	&.no-margin {
		margin: 0 !important;
	}
}

/*
 * ─── Buttons control ─────────────────────────────────────────────────────
 */

.etb-buttons-control {
	margin: 16px 0;

	.buttons-group {
		display: flex;
		align-items: stretch;
		border: 1px solid #ddd;
		border-radius: 4px;
		overflow: hidden;
		box-sizing: border-box;
	}

	.single-btn {
		width: 100%;
		background: #fff;
		border: none;
		padding: 8px;
		box-sizing: border-box;
		cursor: pointer;

		&.active {
			background: #e6e6e6;
			color: #007cba;
		}
	}

	.single-btn:nth-child(2) {
		border-left: 1px solid #ddd;
		border-right: 1px solid #ddd;
	}
}

/*
 * ─── Single input control (responsive values) ────────────────────────────
 */

.etb-single-input {
	margin: 24px 0;

	.etb-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16px;
	}

	.etb-devices {
		display: flex;
		flex-direction: row;
		gap: 4px;
		justify-content: space-between;

		.etb-device {
			background: none;
			border: none;
			padding: 0;
			margin: 0;
			cursor: pointer;

			&.active-device svg {
				fill: #5c4fdb;
			}

			svg {
				width: 14px;
				height: 10px;
				fill: #e0e0e0;
			}
		}
	}
}

/*
 * ─── Color control ───────────────────────────────────────────────────────
 */

.etb-color-wrapper {
	margin: 16px 0;

	.color-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.color-indicator {
		background: none;
		border: none;
		cursor: pointer;
		position: relative;
		width: 25px;
		height: 25px;
	}

	.component-color-indicator {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-image: linear-gradient(45deg, #ddd 25%, transparent 0),
			linear-gradient(-45deg, #ddd 25%, transparent 0),
			linear-gradient(45deg, transparent 75%, #ddd 0),
			linear-gradient(-45deg, transparent 75%, #ddd 0);
		background-size: 10px 10px;
		background-position: 0 0, 0 5px, 5px -5px, -5px 0;
	}
}

.etb-clear-btn {
	background: #f00;
	color: #fff;
	border: none;
	padding: 5px 15px;
	border-radius: 3px;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 500;
	margin: 0 0 15px 15px;
	cursor: pointer;
}

/*
 * ─── Icon picker ─────────────────────────────────────────────────────────
 */

.etb-icon-picker {

	.icons-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		border: 1px solid #e0e0e0;
		padding: 10px;
		box-sizing: border-box;
		gap: 10px;

		.icon {
			background: none;
			border: 1px solid #e0e0e0;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10px;

			&.active-icon {
				border-color: #5c4fdb !important;

				svg {
					fill: #5c4fdb;
				}
			}
		}

		.icon svg {
			width: 45px;
		}
	}

	.icon-header {
		display: flex;
		width: 100%;
		align-items: stretch;
		justify-content: space-between;
		background: none;
		border: 1px solid #e0e0e0;
		margin-bottom: -1px;
		padding: 0;
		box-sizing: border-box;
		cursor: pointer;
	}

	.selected-icon {
		width: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.selected-icon svg {
		width: 18px;
	}

	.icon-header span.dashicon {
		display: block;
		width: 36px;
		border-left: 1px solid #e0e0e0;
		height: 36px;
		line-height: 36px;
		text-align: center;
	}
}

/*
 * ─── Grid block canvas ───────────────────────────────────────────────────
 */

.wp-block-etb-grid {
	display: block;

	.block-editor-block-list__layout {
		display: grid;
		min-height: 0;
		min-width: 0;
	}

	.testimonial-message {
		white-space: normal !important;
	}
}

/*
 * ─── Core box control (container padding) ────────────────────────────────
 * Neutralize the inspector margins so the label, inputs and the linked
 * button stay vertically centered.
 */

.etb-box-control {
	margin-bottom: 16px;

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

/*
 * ─── Core border control (container / photo border) ──────────────────────
 */

.etb-border-control {
	margin-bottom: 16px;

	.components-number-control {
		margin-bottom: 0 !important;
	}
}

.etb-font-size {
	margin-bottom: 16px;

	.components-font-size-picker__header {
		margin-bottom: 8px;
	}
}