@use "~@wordpress/base-styles/breakpoints" as wp-breakpoints;
@use "licenses";
@use "subnav";
@use "gateways";
@use "../../variables/icons" as icons;

.edd-settings-content {
	max-width: wp-breakpoints.$break-huge;

	h3 {
		margin: 0;
	}
}

.edd-settings-colors,
.edd-settings-color {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.edd-settings-color {
	flex-direction: column;
}

.edd-upload-button-wrapper {
	width: 100%;
	display: flex;
	gap: 5px;
}

.edd-upload-button-wrapper button.edd_settings_upload_button {
    margin-bottom: 0;
}

.edd-settings__list--disc {
	list-style: disc;
	list-style-position: inside;
}

.edd-ai-powered th label:after {
	content: "";
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	background-color: var(--edd-light-blue);
	mask-image: icons.$icon-ai;
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
	mask-position: center;
	margin-left: 6px;
	vertical-align: middle;
}

// Warning state for conditionally shown settings (like delete options)
tr.edd-setting--warning {
	border-left: 4px solid var(--edd-alert-red);
	background-color: color-mix(in srgb, var(--edd-alert-red) 10%, transparent);

	// Smooth transition when revealed
	&:not(.edd-hidden) {
		animation: edd-setting-warning-reveal 0.3s ease-in-out;
	}

	th {
		padding-left: 20px;
		position: relative;

		// Optional: Add warning icon
		label:before {
			content: "\f534"; // dashicon-warning
			font-family: dashicons;
			color: var(--edd-alert-red);
			margin-right: 6px;
			vertical-align: middle;
		}
	}

	@media screen and (max-width: wp-breakpoints.$break-medium) {
		border-left-width: 3px;

		th {
			padding-left: 12px;

			label:before {
				font-size: 16px;
			}
		}

		td {
			padding-left: 12px;
		}
	}
}

@keyframes edd-setting-warning-reveal {
	from {
		opacity: 0;
		transform: translateX(-10px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}