@use '../scss/_variables.scss' as *;

.adpresso-assignment-field {
	display: grid;
	grid-template-columns: 50% 50%; //40% 1fr; // Verhältnis 40% zu 60%
	gap: 1em;
	align-items: stretch;
	> span {
		font-size: $font-size;
	}

	.adpresso-card {
		font-size: $font-size;
	}

	.adpresso-card__main, .adpresso-card__main-clickable {
		gap: calc(1em / $font-size-rate);
	}

	.adpresso-card__main-clickable {
		&__actions {
			.dashicons {
				width: auto;
				height: auto;
				&:before {
					font-size: 1.5em;
				}
			}
		}
	}

	.adpresso-card__notice {
		display: flex;
		align-items: center;
		gap: $space-2;

		.dashicons-info {
			color: $color-icon;
		}

		a {
			color: $color-icon;
			text-decoration: underline;
			cursor: pointer;

			&.adpresso-link {
				color: $color-icon;
			}
		}
	}
	.adpresso-card--placement {
		.adpresso-card__notice {
			.dashicons-info {
				color: $color-accent2;
			}

			a {
				color: $color-accent2;

				&.adpresso-link {
					color: $color-text-active;
				}
			}
		}
	}
	.is-active {
		.adpresso-card__notice {
			.dashicons-info {
				color: $color-white;
			}

			a {
				color: $color-white;
			}
		}
	}
}


.adpresso-assignment-source-column,
.adpresso-assignment-target-column {
	border: 0.12em solid #aaa;
	padding: 2em;
	border-radius: 0.5em;
	overflow-y: auto;
	background-color: #eee;
	color: #aaa;
}