/**
 * Status Notices styles for Fluid Design System Admin
 *
 * @package Arts\FluidDesignSystem
 * @since 1.0.0
 */

/* Status area (primary status container) */
.fluid-status-area {
	min-height: 32px;
	padding: 8px 12px;
	margin: 0;
	border-left-width: 4px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-right-width: 1px;
	border-style: solid;
	border-color: transparent;
	border-radius: 3px;
	font-size: 14px;
	line-height: 1.4;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: opacity 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
	background-color: transparent;
	position: relative;
	z-index: 1;
}

.fluid-status-area.hidden {
	opacity: 0;
	/* Keep min-height and padding to reserve space and prevent layout shift */
}

/* Status area variants - WordPress admin notice styling */
.fluid-status-area.loading {
	background-color: #f0f0f1;
	color: #646970;
	border: 1px solid #c3c4c7;
	border-left: 4px solid #646970;
}

.fluid-status-area.success {
	background-color: #edfaef;
	color: #00a32a;
	border: 1px solid #c3c4c7;
	border-left: 4px solid #00a32a;
}

.fluid-status-area.is-error {
	background-color: #fcf0f1;
	color: #d63638;
	border: 1px solid #c3c4c7;
	border-left: 4px solid #d63638;
}

.fluid-status-area.warning {
	background-color: #fff4e6;
	color: #b45309;
	border: 1px solid #c3c4c7;
	border-left: 4px solid #dba617;
}

.fluid-status-area.info {
	background-color: #eff6ff;
	color: #1d4ed8;
	border: 1px solid #c3c4c7;
	border-left: 4px solid #3582f4;
}

/* Loading spinner styling */
.fluid-status-area .spinner {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin: 0;
}

/* Unified status icons */
.fluid-status-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 10px;
	font-weight: bold;
	line-height: 1;
	position: relative;
}

.fluid-status-icon.success {
	background-color: #00a32a;
	color: white;
}

.fluid-status-icon.success:before {
	content: "✓";
}

.fluid-status-icon.is-error {
	background-color: #d63638;
	color: white;
}

.fluid-status-icon.is-error:before {
	content: "✕";
}

.fluid-status-icon.warning {
	background-color: #dba617;
	color: white;
}

.fluid-status-icon.warning:before {
	content: "!";
}

.fluid-status-icon.info {
	background-color: #3582f4;
	color: white;
}

.fluid-status-icon.info:before {
	content: "i";
}

/* Enhanced status animations */
@keyframes statusFadeIn {
	from {
		opacity: 0;
		transform: translateY(-2px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes statusFadeOut {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(-2px);
	}
}

/* Apply animations when status changes */
.fluid-status-area:not(.hidden) {
	animation: statusFadeIn 0.3s ease-out;
}

/* Status area positioning helpers */
.fluid-status-container {
	position: relative;
	margin: 15px 0;
}

.fluid-status-container .fluid-status-area {
	width: 100%;
}

/* Inline status notices (for contextual feedback) */
.fluid-inline-status {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	padding: 2px 6px;
	border-radius: 2px;
	margin-left: 8px;
	white-space: nowrap;
}

.fluid-inline-status.success {
	background-color: rgba(0, 163, 42, 0.1);
	color: #00a32a;
}

.fluid-inline-status.is-error {
	background-color: rgba(214, 54, 56, 0.1);
	color: #d63638;
}

.fluid-inline-status.warning {
	background-color: rgba(219, 166, 23, 0.1);
	color: #b45309;
}

.fluid-inline-status.info {
	background-color: rgba(53, 130, 244, 0.1);
	color: #1d4ed8;
}

/* Status text styling */
.fluid-status-area span {
	flex: 1;
	font-weight: 400;
}

/* Loading state specific styling */
.fluid-status-area.loading span {
	font-weight: 500;
}

/* Error state specific styling */
.fluid-status-area.is-error {
	box-shadow: 0 1px 3px rgba(214, 54, 56, 0.1);
}

/* Success state specific styling */
.fluid-status-area.success {
	box-shadow: 0 1px 3px rgba(0, 163, 42, 0.1);
}

/* Warning state specific styling */
.fluid-status-area.warning {
	box-shadow: 0 1px 3px rgba(219, 166, 23, 0.1);
}

/* Info state specific styling */
.fluid-status-area.info {
	box-shadow: 0 1px 3px rgba(53, 130, 244, 0.1);
}

/* Responsive adjustments for status notices */
@media screen and (max-width: 782px) {
	.fluid-status-area {
		font-size: 13px;
		padding: 6px 10px;
		min-height: 28px;
	}

	.fluid-status-icon {
		width: 14px;
		height: 14px;
		font-size: 9px;
	}

	.fluid-status-area .spinner {
		width: 14px;
		height: 14px;
	}

	.fluid-inline-status {
		font-size: 11px;
		padding: 1px 4px;
		margin-left: 4px;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.fluid-status-area {
		border-width: 2px;
	}

	.fluid-status-area.success {
		border-left-width: 6px;
	}

	.fluid-status-area.is-error {
		border-left-width: 6px;
	}

	.fluid-status-area.warning {
		border-left-width: 6px;
	}

	.fluid-status-area.info {
		border-left-width: 6px;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.fluid-status-area {
		transition: opacity 0.1s ease;
	}

	.fluid-status-area:not(.hidden) {
		animation: none;
	}
}

/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {
	.fluid-status-area.loading {
		background-color: #2c2c2c;
		color: #e0e0e0;
		border-color: #555;
		border-left-color: #888;
	}

	.fluid-status-area.success {
		background-color: #1a3e1a;
		color: #4ade80;
		border-color: #555;
		border-left-color: #22c55e;
	}

	.fluid-status-area.is-error {
		background-color: #3e1a1a;
		color: #f87171;
		border-color: #555;
		border-left-color: #ef4444;
	}

	.fluid-status-area.warning {
		background-color: #3e3a1a;
		color: #fbbf24;
		border-color: #555;
		border-left-color: #f59e0b;
	}

	.fluid-status-area.info {
		background-color: #1a2e3e;
		color: #60a5fa;
		border-color: #555;
		border-left-color: #3b82f6;
	}
}