/**
 * Collection meta fields styles.
 */

.newspack-collections-meta-panel {
	.collection-meta-fields {
		display: flex;
		flex-direction: column;
		gap: 8px;

		.meta-field-error {
			input {
				border-color: var(--newspack-ui-color-error-50);
			}

			.components-base-control__help {
				color: var(--newspack-ui-color-error-50);
			}
		}

		.cta-input-row {
			position: relative;
			display: flex;
			flex-direction: column;
			gap: 6px;
			margin-bottom: 1rem;
			padding: 12px;
			border: 1px solid var(--newspack-ui-color-neutral-30);
			border-radius: 4px;
			background: var(--newspack-ui-color-neutral-5);
			transition: opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;

			&.cta-dragging {
				opacity: 0.5;
			}

			&.cta-drag-over {
				border-color: var(--wp-admin-theme-color);
				box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
			}

			&:hover {
				border-color: var(--newspack-ui-color-neutral-40);
			}

			.cta-drag-handle {
				position: absolute;
				top: 0;
				right: 0;
				cursor: grab;

				&:active {
					cursor: grabbing;
				}

				&:focus {
					box-shadow: none;
				}

				&:hover {
					color: var(--wp-admin-theme-color);
				}
			}

			.attachment-info {
				display: flex;
				align-items: center;
				padding: 3px;
				background: var(--newspack-ui-color-neutral-0);
				border: 1px solid var(--newspack-ui-color-neutral-30);
				border-radius: 4px;
				min-height: 32px;
				margin: 0;

				.dashicons {
					font-size: 1.5rem;
					width: auto;
					height: auto;
					margin-right: 4px;
				}

				.attachment-name {
					margin-right: auto;
				}
			}

			.components-spinner {
				margin-bottom: 7px;
			}
		}

		.upload-button,
		.remove-cta-button {
			min-height: 32px;
		}

		.components-button:not(.has-icon) {
			width: 100%;
			justify-content: center;
		}
	}
}
