/**
 * Feedspace Widgets Frontend Styles
 *
 * @package Feedspace
 * @since 1.0.0
 */

.feedspace-widgets {
	position: relative;
	width: 100%;
	margin: 20px 0;

	.feedspace-widget {
		width: 100%;
		min-height: 200px;

		&.feedspace-loading {
			position: relative;

			&::before {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				width: 20px;
				height: 20px;
				margin: -10px 0 0 -10px;
				border: 2px solid #f3f3f3;
				border-top: 2px solid #0073aa;
				border-radius: 50%;
				animation: feedspace-spin 1s linear infinite;
			}
		}
	}
}

@keyframes feedspace-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Shortcode specific styles */
.feedspace-widgets.feedspace-shortcode {
	.feedspace-widget {
		/* Additional styles for shortcode usage if needed */
	}
}

/* Empty state styles */
.feedspace-empty-state {
	padding: 20px;
	text-align: center;
	color: #666;
	font-style: italic;
	background-color: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 4px;

	a {
		color: #0073aa;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
}