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

.adpresso-modal-sections .adpresso-modal-section .adpresso-modal-section-fields .adpresso-assignment__section-header .adpresso-input {
	width: 100%;
}

.adpresso-assignment__section + span {
	margin-bottom: 1em;
	display: inline-block;
	font-size: $font-size;
}

.adpresso-assignment__section {
	border-radius: 0.5em;
	border: calc(0.12em * $font-size-rate) solid $color-icon;
	padding: 2em;
	margin-bottom: 2em;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	gap: 2em;

	&:has(.adpresso-card--context.is-active) {
		border-color: $color-primary;
		background-color: $color-primary-superlight;
	}

	.adpresso-assignment__section-header {
		flex: 0 0 auto;
	}

	.adpresso-assignment__section-body {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: scroll;
		max-height: 50vh;
	}

	.adpresso-assignment__section-footer {
		flex: 0 0 auto;
		text-align: center;
		border-top: calc(0.12em * 1.3) solid $color-primary;
		padding-top: 1em;
		margin-bottom: -1em;
	}

	&:last-of-type {
		margin-bottom: 0;
	}
}

.adpresso-card {
	// First state. Neutral, stage 1
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;

	// All clickable context-cards (singular + groups)
	&.adpresso-card--context {
		cursor: pointer;
		background-color: $color-divider;
		border-color: $color-icon;

		.adpresso-card__title,
		.adpresso-card__meta,
		.adpresso-card__chevron {
			color: $color-icon;
		}

		&:hover:not(.is-active):not(.is-disabled) {
			// Stage 2 Styling
			background-color: $color-white;
			border-color: $color-accent;
			.adpresso-card__title,
			.adpresso-card__meta,
			.adpresso-card__chevron {
				color: $color-text;
			}
		}

		&.is-active {
			// Stage 3 Styling
			background-color: $color-accent;
			border-color: $color-accent;

			.adpresso-card__title,
			.adpresso-card__meta {
				color: $color-white;
			}

			.adpresso-card__chevron {
				color: $color-white;
			}

		}
	}
}

.adpresso-card--placement {
	background-color: $color-white;

	&.is-assigned {
		background-color: $color-accent-superlight;
		border-color: $color-accent;

		.adpresso-card__title {
			color: $color-text;
		}
	}
}

.adpresso-card__checkbox {
	input:disabled + * {
		opacity: .6;
	}
}

.adpresso-assignment__placeholder,
.adpresso-assignment__loading {
	color: var(--adpresso-muted-text);
}

.adpresso-card.is-active:hover {
	background-color: $color-accent;
}

// Placement cards are never stage 3
.adpresso-card--placement.is-active {

}


.adpresso-assignment__column--target {
	.adpresso-assignment__section {
		background-color: $color-primary-superlight;
	}
}