/**
 * Icon Button Block Styles
 * WCAG 2.1/2.2 Level AA Compliant
 * WordPress Coding Standards Compliant
 * RTL Ready
 * @package DGDev_Icon_Button
 * @version 1.0.0
 */

/* ============================================================================
   SCSS Mixins for DRY Code
   ============================================================================ */

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

@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 button-shadow-hover {
	box-shadow:
		2px 2px 2px rgba(128, 128, 128, 0.1),
		4px 4px 2px rgba(128, 128, 128, 0.2),
		6px 6px 2px rgba(128, 128, 128, 0.3),
		8px 8px 2px rgba(128, 128, 128, 0.4);
}

@mixin button-shadow-active-fill($theme: "light") {
	@if $theme == "light" {
		box-shadow:
			inset 4px 4px 10px rgba(0, 0, 0, 0.5),
			inset -3px -3px 8px rgba(0, 0, 0, 0.3);
	} @else {
		box-shadow:
			inset 3px 3px 8px rgba(0, 0, 0, 0.6),
			inset -2px -2px 6px rgba(255, 255, 255, 0.1);
	}
}

@mixin button-shadow-active-outline($theme: "light") {
	@if $theme == "light" {
		box-shadow:
			inset 3px 3px 8px rgba(0, 0, 0, 0.25),
			inset -2px -2px 6px rgba(255, 255, 255, 0.3);
	} @else {
		box-shadow:
			inset 3px 3px 8px rgba(0, 0, 0, 0.4),
			inset -2px -2px 6px rgba(255, 255, 255, 0.15);
	}
}

@mixin button-shadow-active-icon-fill {
	box-shadow:
		inset 2px 2px 4px rgba(0, 0, 0, 0.5),
		inset -2px -2px 3px rgba(255, 255, 255, 0.35);
}

@mixin button-shadow-active-icon-outline {
	box-shadow:
		inset 2px 2px 4px rgba(0, 0, 0, 0.4),
		inset -2px -2px 4px rgba(255, 255, 255, 0.2);
}

@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;
	}
}

/* ============================================================================
   CSS Custom Properties
   ============================================================================ */
:root {
	--focus-color: #404040;
	--focus-color-rgb: 64, 64, 64;
	--focus-text-color: #d1d1d1;
	--focus-offset: 4px;
	--focus-offset-indicator: 6px;
	--active-background-rgb: 18, 112, 179;
	--external-link-indicator: #008000;
	--tooltip-bg: rgba(64, 64, 64, 0.9);
	--tooltip-color: #d1d1d1;
	--transition-fast: 0.2s ease;
	--transition-medium: 0.3s ease;
	--transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.is-theme-dark {
	--focus-color: #d1d1d1;
	--focus-color-rgb: 181, 181, 181;
	--focus-text-color: #404040;
	--active-background-rgb: 128, 192, 230;
	--external-link-indicator: #4ceb5e;
	--tooltip-bg: rgba(181, 181, 181, 0.9);
}

@media (prefers-contrast: high) {
	:root {
		--external-link-indicator: #000;
	}
	.is-theme-dark {
		--external-link-indicator: #fff;
	}
}

/* ============================================================================
   Utility Classes
   ============================================================================ */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================================
   Main Button Component Structure
   ============================================================================ */
.wp-block-dgdev-icon-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	padding: 0;
	background-color: transparent;
	position: relative;
}

/* ============================================================================
   Button Link Element Base & States
   ============================================================================ */
.wp-block-dgdev-icon-button__link {
	display: inline-flex;
	position: relative;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	font-weight: bold;
	box-sizing: border-box;
	min-width: 40px;
	min-height: 40px;
	transition:
		box-shadow var(--transition-medium),
		filter var(--transition-fast),
		background-color var(--transition-medium),
		color var(--transition-fast);

	&:focus {
		outline: none;
	}

	&:focus-visible {
		@include focus-outline(var(--focus-offset, 4px));
		@include focus-properties;

		&.has-external-link {
			outline-offset: var(--focus-offset-indicator, 6px);
		}
		@include maintain-style-colors;
	}

	&:focus-visible:active {
		outline: 4px dashed var(--focus-color, #0073aa) !important;
		outline-offset: var(--focus-offset, 4px) !important;

		&.has-external-link {
			outline-offset: var(--focus-offset-indicator, 6px) !important;
		}
		&.no-text {
			outline-offset: 6px !important;

			&.has-external-link {
				outline-offset: 8px !important;
			}
		}
	}

	&:active {
		@include button-pressed-base(0.98);
		@include maintain-style-colors;
	}

	// Icon-only button
	&.no-text {
		width: 40px;
		height: 40px;
		transition:
			transform var(--transition-fast),
			box-shadow var(--transition-medium),
			filter var(--transition-fast),
			background-color var(--transition-medium),
			color var(--transition-fast);

		&:hover:not(:focus-visible):not(:active) {
			@include button-shadow-hover;
		}
		&:active {
			@include button-pressed-base(0.95);

			&.is-style-fill {
				@include button-shadow-active-icon-fill;
			}
			&.is-style-outline {
				@include button-shadow-active-icon-outline;
			}
		}
	}

	// Text buttons (icon + text or text only)
	&:not(.no-text) {
		position: relative;
		z-index: 1;
		width: auto;
		height: auto;
		min-height: 40px;
		padding: 0.25em 0.5em;

		&::after {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: inherit;
			z-index: -1;
			opacity: 0;
			transition:
				opacity var(--transition-fast),
				box-shadow var(--transition-fast);
			@include button-shadow-hover;
			pointer-events: none;
		}

		&:hover:not(:focus-visible):not(:active)::after {
			opacity: 1;
		}

		&:is(:focus-visible, :active)::after {
			opacity: 0 !important;
		}

		&:active {
			@include button-pressed-base(0.98);

			&.is-style-fill {
				@include button-shadow-active-fill("light");
			}
			&.is-style-outline {
				@include button-shadow-active-outline("light");
			}
		}
	}

	// Style variants
	&.is-style-outline {
		background-color: transparent;
		color: var(--wp--preset--color--contrast, #0073aa);
		border: 2px solid currentColor;
		transition:
			transform var(--transition-fast),
			box-shadow var(--transition-medium),
			background-color var(--transition-medium),
			border-color var(--transition-fast);
	}
}

/* Fill style */
.wp-block-dgdev-icon-button .wp-block-dgdev-icon-button__link.is-style-fill {
	background-color: var(--wp--preset--color--contrast, #0073aa);
	color: var(--wp--preset--color--base, #e2e2e2);
}

/* ============================================================================
   Dark Theme Support (Merged)
   ============================================================================ */
/* stylelint-disable no-duplicate-selectors */
.is-theme-dark .wp-block-dgdev-icon-button__link {
	&.is-style-fill {
		background-color: var(--wp--preset--color--contrast, #1a8ccc);
	}

	&.is-style-outline {
		color: var(--wp--preset--color--contrast, #1a8ccc);
	}
	// Text buttons
	&:not(.no-text):active {
		&.is-style-fill {
			@include button-shadow-active-fill("dark");
		}
		&.is-style-outline {
			@include button-shadow-active-outline("dark");
		}
		@include maintain-style-colors(true);
	}

	// Icon-only buttons
	&.no-text:active {
		@include maintain-style-colors(true);
	}
}
/* stylelint-enable no-duplicate-selectors */

/* ============================================================================
   Tooltip System
   ============================================================================ */
.wp-block-dgdev-icon-button__link.no-text[title] {
	&::before {
		content: attr(title);
		position: absolute;
		bottom: 150%;
		left: 50%;
		transform: translateX(-50%) translateY(5px);
		background-color: var(--tooltip-bg);
		color: var(--tooltip-color);
		padding: 8px 12px;
		border-radius: 6px;
		white-space: nowrap;
		z-index: 15;
		pointer-events: none;
		opacity: 0;
		font-size: 16px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		min-width: max-content;
		transition:
			opacity var(--transition-medium),
			transform var(--transition-bounce);
	}

	&::after {
		content: "";
		position: absolute;
		bottom: 115%;
		left: 50%;
		transform: translateX(-50%) translateY(20px);
		border-width: 6px;
		border-style: solid;
		border-color: var(--tooltip-bg) transparent transparent transparent;
		z-index: 5;
		pointer-events: none;
		opacity: 0;
		transition:
			opacity var(--transition-medium) ease-in,
			transform var(--transition-bounce) ease-out;
	}

	&:hover::before,
	&:hover::after {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/* ============================================================================
   External Link Indicator
   ============================================================================ */
.wp-block-dgdev-icon-button__indicator {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	outline-width: 3px;
	outline-style: solid;
	outline-color: var(--external-link-indicator);
	outline-offset: 2px;
	border-radius: inherit;
	opacity: 0.85;
	transition:
		opacity 0.3s ease-out,
		outline-color 0.3s ease-out;
}

.wp-block-dgdev-icon-button__link.is-style-outline
	.wp-block-dgdev-icon-button__indicator {
	outline-offset: 4px;
}

.wp-block-dgdev-icon-button__link:is(:hover, :focus, :focus-visible)
	.wp-block-dgdev-icon-button__indicator {
	opacity: 1;
}

/* ============================================================================
   Text Content Wrapper
   ============================================================================ */
.wp-block-dgdev-icon-button__text {
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: max-content;
	width: 100%;
	height: 100%;
	gap: 8px;
	letter-spacing: 1.1px;
	transition: letter-spacing var(--transition-fast);
	flex-wrap: wrap;

	.text-span-before,
	.text-span-after {
		white-space: normal;
		word-wrap: break-word;
		hyphens: auto;
		max-width: 100%;
	}

	> .text-span-before {
		padding-inline-start: 0.25em;
	}

	> .text-span-after {
		padding-inline-end: 0.25em;
	}
}

/* ============================================================================
   Reduced Motion
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
	.wp-block-dgdev-icon-button__link,
	.wp-block-dgdev-icon-button__link::after,
	.wp-block-dgdev-icon-button__link::before,
	.wp-block-dgdev-icon-button__indicator {
		transition: none;
		animation: none;
	}

	.wp-block-dgdev-icon-button__link {
		&:hover:not(:focus):not(:focus-visible) {
			transform: none;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
			filter: none;
		}

		&:focus-visible {
			@include focus-outline(6px);
			transform: none;
			box-shadow: none;
			filter: none;
			background-color: rgba(var(--active-background-rgb), 0.15);
		}

		&:focus:not(:focus-visible) {
			outline: none;
			background-color: rgba(var(--active-background-rgb), 0.15);
			box-shadow: 0 0 0 2px rgba(var(--focus-color-rgb), 0.3);
		}

		&:is(:focus, :focus-visible):hover {
			filter: none;
			box-shadow: none;
			outline: 4px dashed var(--focus-color) !important;
			outline-offset: 6px !important;
		}

		&:active {
			transform: none;
			box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.4);
		}

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

		&.is-style-outline {
			&:is(:hover, :focus-visible) {
				background-color: rgba(var(--active-background-rgb), 0.1);
			}
		}
	}

	.wp-block-dgdev-icon-button__text {
		gap: 12px;
		letter-spacing: 1.3px;
	}
}

/* ============================================================================
   High Contrast Mode
   ============================================================================ */
@media (prefers-contrast: high) {
	.wp-block-dgdev-icon-button__link:focus-visible {
		outline-width: 4px;
		outline-style: solid;
	}

	.wp-block-dgdev-icon-button__link.is-style-fill {
		border: 2px solid transparent;
	}

	.wp-block-dgdev-icon-button__indicator {
		outline-width: 4px;
		outline-style: solid;
	}
}

/* ============================================================================
   Mobile/Touch Optimization
   ============================================================================ */
@media (max-width: 768px) {
	.wp-block-dgdev-icon-button__link {
		min-width: 44px;
		min-height: 44px;

		&:is(:hover, :focus, :focus-visible) {
			outline-offset: 2px;
			background-color: rgba(var(--active-background-rgb), 0.2);
		}

		&:active {
			box-shadow:
				inset 0 3px 6px rgba(0, 0, 0, 0.3),
				0 0 0 2px rgba(var(--focus-color-rgb), 0.3);
		}
	}

	.wp-block-dgdev-icon-button__text {
		gap: 6px;
		letter-spacing: 1px;

		> .text-span-before,
		> .text-span-after {
			word-break: break-word;
			hyphens: auto;
			max-width: calc(100vw - 120px);
		}
	}
}

/* ============================================================================
   Tablet Optimization
   ============================================================================ */
@media (min-width: 769px) and (max-width: 1023px) {
	.wp-block-dgdev-icon-button__link {
		min-width: 44px;
		min-height: 44px;

		&.no-text {
			width: 44px;
			height: 44px;
		}

		&:not(.no-text) {
			min-height: 44px;
			padding: 0.375em 0.75em;
		}
	}

	.wp-block-dgdev-icon-button__text {
		gap: 10px;
		letter-spacing: 1.2px;
	}
}

/* ============================================================================
   Desktop Optimization
   ============================================================================ */
@media (min-width: 1024px) {
	.wp-block-dgdev-icon-button__link {
		min-width: 48px;
		min-height: 48px;

		&.no-text {
			width: 48px;
			height: 48px;
		}

		&:not(.no-text) {
			min-height: 48px;
			padding: 0.5em 1em;
		}
	}

	.wp-block-dgdev-icon-button__text {
		gap: 12px;
		letter-spacing: 1.3px;
	}
}

/* ============================================================================
   RTL Support
   ============================================================================ */
[dir="rtl"] .wp-block-dgdev-icon-button__text {
	direction: rtl;
	letter-spacing: 0.5px;
}

@media (min-width: 769px) and (max-width: 1023px) {
	[dir="rtl"] .wp-block-dgdev-icon-button__text {
		letter-spacing: 0.8px;
	}
}

@media (min-width: 1024px) {
	[dir="rtl"] .wp-block-dgdev-icon-button__text {
		letter-spacing: 1px;
	}
}