/**
 * Logo Rotator Block Styles
 * 
 * Minimal CSS for Logo Rotator block
 * - Uses Tailwind CSS for most styling
 * - Animations handled by animations.css
 * 
 * @package Master
 * @version 1.0.0
 */

/* Logo hover effects */
.logo-rotator-block img {
	transition: all 0.3s ease;
	filter: grayscale(100%);
	opacity: 0.7;
}

.logo-rotator-block img:hover {
	filter: grayscale(0%);
	opacity: 1;
	transform: scale(1.05);
}

/* Navigation arrows styling */
.logo-rotator-block .glide__arrow {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo-rotator-block .glide__arrow:hover {
	background: var(--color-primary);
	color: white;
	border-color: var(--color-primary);
}

/* Focus states for accessibility */
.logo-rotator-block .glide__arrow:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Dark mode support */
.dark .logo-rotator-block img {
	filter: grayscale(100%) brightness(0.8);
}

.dark .logo-rotator-block img:hover {
	filter: grayscale(0%) brightness(1);
}

.dark .logo-rotator-block .glide__arrow {
	background: rgba(0, 0, 0, 0.8);
	border-color: rgba(255, 255, 255, 0.2);
	color: white;
}

.dark .logo-rotator-block .glide__arrow:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
}