/**
 * Minimal Editor-only Styles for DGDev Icon Button
 * Applied only in the WordPress block editor
 * @package DGDev_Icon_Button
 */

/* ============================================================================
   SCSS Mixins (Shared with style.scss)
   ============================================================================ */

@mixin focus-outline($offset: 4px) {
	outline: 4px dashed var(--focus-color, #0073aa);
	outline-offset: $offset;
	z-index: 999;
}

@mixin focus-properties {
	text-decoration: none !important;
	filter: none;
	box-shadow: none;
	transform: none;
}

@mixin button-pressed-base($scale: 0.98) {
	filter: none;
	transform: scale($scale);
	transition: none;
}

@mixin maintain-style-colors($dark: false) {
	$contrast: if($dark, #1a8ccc, #0073aa);
	$base: #e2e2e2;

	&.is-style-fill {
		background-color: var(--wp--preset--color--contrast, $contrast);
		color: var(--wp--preset--color--base, $base);
	}
	&.is-style-outline {
		background-color: transparent;
		color: var(--wp--preset--color--contrast, $contrast);
		border-color: currentColor;
	}
}

/* ============================================================================
   Editor-Specific Overrides
   ============================================================================ */

/* Prevent navigation in editor */
.editor-styles-wrapper .wp-block-dgdev-icon-button__link {
	pointer-events: auto;
	cursor: default;
}

/* Override WordPress editor's default a:focus styles */
.editor-styles-wrapper .wp-block-dgdev-icon-button__link:is(a):focus {
	text-decoration: none !important;
	outline: none !important;
	text-decoration-skip-ink: auto !important;

	&.is-style-outline {
		background: transparent !important;
	}

	&.is-style-fill {
		background-color: var(--wp--preset--color--contrast, #0073aa);
	}
}

/* Ensure our focus-visible styles still work */
.editor-styles-wrapper .wp-block-dgdev-icon-button__link:is(a):focus-visible,
.editor-styles-wrapper
	.wp-block-dgdev-icon-button__link:is(a).is-focus-preview {
	text-decoration: none !important;

	&.is-style-outline {
		background-color: transparent !important;
	}

	&.is-style-fill {
		background-color: var(
			--wp--preset--color--contrast,
			#0073aa
		) !important;
	}
}

/* ============================================================================
   Focus & Active States
   ============================================================================ */

.editor-styles-wrapper
	.wp-block-dgdev-icon-button
	.wp-block-dgdev-icon-button__link {
	/* KEYBOARD FOCUS */
	&:is(a, button):is(:focus-visible, .is-focus-preview) {
		@include focus-outline(var(--focus-offset, 4px));
		@include focus-properties;

		&.has-external-link {
			outline-offset: var(--focus-offset-indicator, 6px);

			&.is-style-outline {
				outline-offset: calc(var(--focus-offset-indicator, 6px) + 1px);
			}
		}

		&.has-external-link.no-text {
			outline-offset: 8px;

			&.is-style-outline {
				outline-offset: 9px;
			}
		}

		@include maintain-style-colors;
	}

	/* ACTIVE STATE (Preview in Editor) */
	&.is-pressed-preview {
		@include button-pressed-base(0.98);

		/* Text Button Shadows */
		&:not(.no-text) {
			box-shadow:
				inset 3px 3px 8px rgba(0, 0, 0, 0.4),
				inset -2px -2px 6px rgba(0, 0, 0, 0.2);

			&.is-style-fill {
				box-shadow:
					inset 4px 4px 10px rgba(0, 0, 0, 0.5),
					inset -3px -3px 8px rgba(0, 0, 0, 0.3);
			}

			&.is-style-outline {
				box-shadow:
					inset 3px 3px 8px rgba(0, 0, 0, 0.25),
					inset -2px -2px 6px rgba(255, 255, 255, 0.3);
			}
		}

		/* Icon-Only Button */
		&.no-text {
			@include button-pressed-base(0.95);

			&.is-style-fill {
				box-shadow:
					inset 2px 2px 4px rgba(0, 0, 0, 0.5),
					inset -2px -2px 3px rgba(255, 255, 255, 0.35);
			}

			&.is-style-outline {
				box-shadow:
					inset 2px 2px 4px rgba(0, 0, 0, 0.4),
					inset -2px -2px 4px rgba(255, 255, 255, 0.2);
			}
		}

		/* Combined pressed + focus state */
		&.is-focus-preview {
			@include focus-outline(var(--focus-offset, 4px));

			&.no-text {
				outline-offset: 6px;
			}
			&.has-external-link.no-text {
				outline-offset: 8px;
			}
		}

		@include maintain-style-colors;
	}
}

/* ============================================================================
   Dark Theme Support in Editor
   ============================================================================ */

.editor-styles-wrapper .is-theme-dark {
	.wp-block-dgdev-icon-button
		.wp-block-dgdev-icon-button__link.is-pressed-preview {
		/* Dark Theme Text Button Shadows */
		&:not(.no-text) {
			&.is-style-fill {
				box-shadow:
					inset 3px 3px 8px rgba(0, 0, 0, 0.6),
					inset -2px -2px 6px rgba(255, 255, 255, 0.1);
			}
			&.is-style-outline {
				box-shadow:
					inset 3px 3px 8px rgba(0, 0, 0, 0.4),
					inset -2px -2px 6px rgba(255, 255, 255, 0.15);
			}
		}

		@include maintain-style-colors(true);
	}
}

/* ============================================================================
   Reduced Motion Support in Editor
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
	.editor-styles-wrapper .wp-block-dgdev-icon-button__link,
	.editor-styles-wrapper .wp-block-dgdev-icon-button__link::after,
	.editor-styles-wrapper .wp-block-dgdev-icon-button__link::before {
		transition: none;
		animation: none;
	}

	.editor-styles-wrapper
		.wp-block-dgdev-icon-button__link:is(:active, .is-pressed-preview) {
		transform: none;
	}
}