@use '../../../design/scss/_variables.scss' as *;
@use '../../../design/scss/_mixins.scss';
@use '../../../design/scss/_placeholders.scss';

/**
 * AdPresso - Condition Builder Styles (SCSS)
 * ==========================================
 *
 */

$spacing-unit: 1rem; // Base spacing unit


.adpresso-condition-builder {
	display: flex;
	flex-direction: column;
	gap: 1em;
}

// Header: "Match all/any of the following groups" ---
.adpresso-condition-builder-header {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-top: -.8em;

	span {
		font-size: $font-size;
	}

	//.components-select-control__input {
	//	font-weight: 600;
	//	font-size: 1.1em;
	//	border: none;
	//	box-shadow: none;
	//	padding-left: 0;
	//	cursor: pointer;
	//}
}

// Connector Lines (between groups and between conditions) ---
.adpresso-outer-connector,
.adpresso-inner-connector {
	display: flex;
	align-items: center;
	position: relative;
	text-align: center;
	font-size: $font-size;

	span {
		text-transform: uppercase;
		padding: 1em 2em;
		color: $color-text;
		border: 0.12em solid $color-primary;
	}
}

.adpresso-outer-connector {
	span {
		background-color: $color-primary-superlight;
	}
}

.adpresso-inner-connector {
	span {
		background-color: $color-accent-superlight;
		border-color: $color-accent;
	}
}


// Condition Group ---
.adpresso-condition-group {
	background-color: $color-primary-superlight;
	border: calc(0.12em * $font-size-rate) solid $color-primary;
	border-radius: 0.5em;
	padding: 2em;
	position: relative;


	.adpresso-condition-group-body {
		margin-right: 5em;
		display: flex;
		flex-direction: column;
		gap: 1em;
		margin-bottom: 1em;

		&:empty {
			margin-bottom: 0;
		}
	}

	.adpresso-condition-actions {
		flex-shrink: 0;
		margin-left: auto;
		position: absolute;
		top: 2em;
		right: 2em;

		.adpresso-condition-close {
			width: 1.5em;
			height: 1.5em;
			padding: 0.25em;
			border-radius: 0.5em;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

.adpresso-modal-sections .adpresso-modal-section .adpresso-modal-section-fields .adpresso-condition-builder .adpresso-input {
	width: 100%;
}

// Condition Row ---
.adpresso-condition-row {
	display: flex;
	align-items: flex-start;
	gap: 1em;
	width: 100%;
	justify-content: space-between;
	background-color: #fcf7ef;
	border: calc(0.12em * $font-size-rate) solid #D88200;
	border-radius: 0.5em;
	padding: 1em 5em 1em 1em;
	position: relative;

	.adpresso-condition-part {
		flex-shrink: 1;
		min-width: 100px;

		&.adpresso-condition-type {
			flex-basis: 30%;
		}
		&.adpresso-condition-operator {
			flex-basis: 20%;
		}
		&.adpresso-condition-value {
			flex-basis: 40%;
		}
	}

	&.adpresso-condition-row__readonly {
		background-color: #f3f3f3;
		border-style: dashed;

		.adpresso-condition-readonly-label {
			font-weight: 600;
		}
		.adpresso-condition-readonly-value {
			display: block;
		}
		.adpresso-condition-readonly-hint {
			display: block;
			font-size: 0.85em;
			font-style: italic;
			opacity: 0.75;
		}
	}

	&.adpresso-condition-row__incompatible {
		background-color: #fcf0f1;
		border-style: dashed;
		border-color: #d63638;
		flex-wrap: wrap;

		.adpresso-condition-incompatible-hint {
			flex-basis: 100%;
			order: -1;
			font-size: 0.85em;
			font-style: italic;
			color: #d63638;
		}
	}
}


// General Component Overrides for this context ---
.adpresso-condition-builder {
	.components-select-control__input,
	.components-text-control__input,
	input[type="text"] {
		font-size: $space-4; // Inherit base size
		width: 100%;
	}

	// Make buttons more compact
	.components-button {
		padding: 0.4em 0.8em;
		height: auto;
		line-height: 1.5;
	}
}