@use "~@wordpress/base-styles/colors" as wp-colors;

.newspack-campaigns-wizard-segments {
	&__list {
		margin: 32px 0;

		&.is-loading {
			pointer-events: none;
		}

		.newspack-popover {
			margin-left: -4px;
		}
	}

	&__title {
		padding-bottom: 32px;

		.components-base-control__field {
			margin: 0;
		}
	}

	&__recorded-visitors {
		margin: -48px 0 0;

		+ .newspack-card {
			margin-top: 64px;
		}
	}
}

.newspack-campaigns__draggable {
	margin: 16px 0;

	&.is-dragging {
		display: none;
	}

	&.is-drop-target::before,
	&.drop-target-after::after {
		background-color: var(--newspack-ui-color-primary);
		content: "";
		display: block;
		height: 2px;
		margin-bottom: 16px;
		margin-top: 16px;
		width: 100%;
	}

	.newspack-campaigns__segment-priority-controls {
		align-items: center;
		display: flex;
		height: 100%;
		justify-content: center;
		margin-right: 8px;

		.drag-handle {
			align-items: center;
			cursor: grab;
			display: flex;
			height: 100%;
			justify-content: flex-end;
			margin-left: -8px;
			width: 32px;

			.is-dragging & {
				cursor: grabbing;
			}

			svg {
				padding: 3px;
			}
		}

		.movers {
			display: flex;
			flex-direction: column;
			margin: -4px 0;

			.components-button {
				color: wp-colors.$gray-900;
				display: block;
				height: 24px;
				line-height: 24px;
				min-width: 24px;
				padding: 0;
				width: 24px;
			}
		}
	}

	.newspack-card {
		margin: 0;
	}

	.newspack-action-card {
		background: white;
		flex-direction: row;

		.newspack-action-card__region-children {
			padding: 0 0 0 16px;
		}

		.newspack-action-card__region-top {
			padding: 8px 16px 8px 0 !important;
			flex: 1;
			order: 2;
		}
	}
}

.components-draggable__clone {
	.newspack-card {
		box-shadow: 0 0 8px 4px rgba(black, 0.08);
	}
}
