/**
 * WebXtrm Divider Widget Styles
 */

.wx-divider-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}

.wx-divider-wrap * {
	box-sizing: border-box;
}

.wx-divider {
	--wx-line-color: #00c9f0;
	--wx-thickness: 1px;
	--wx-glow-color: rgba(0, 201, 240, 0.5);
	--wx-glow-blur: 8px;
	--wx-shimmer-color: #ffffff;
	--wx-shimmer-duration: 3.5s;
	--wx-accent-color: #00c9f0;
	--wx-accent-size: 10px;

	display: flex;
	align-items: center;
	width: 70%;
	gap: 16px;
	position: relative;
}

/* ===== LINE ===== */
.wx-divider-line {
	flex: 1;
	height: var(--wx-thickness, 1px);
	min-width: 0;
	opacity: 0.6;
	position: relative;
}

/* === Line styles === */
.wx-divider--solid .wx-divider-line {
	background: var(--wx-line-color);
}

.wx-divider--gradient.wx-divider:not(.wx-divider--has-accent) .wx-divider-line {
	background: linear-gradient(90deg,
		transparent 0%,
		var(--wx-line-color) 20%,
		var(--wx-line-color) 80%,
		transparent 100%
	);
}

.wx-divider--gradient.wx-divider--has-accent .wx-divider-line--left {
	background: linear-gradient(90deg, transparent 0%, var(--wx-line-color) 80%);
}

.wx-divider--gradient.wx-divider--has-accent .wx-divider-line--right {
	background: linear-gradient(90deg, var(--wx-line-color) 20%, transparent 100%);
}

.wx-divider--dashed .wx-divider-line {
	background-image: linear-gradient(90deg, var(--wx-line-color) 50%, transparent 50%);
	background-size: 12px 100%;
	background-repeat: repeat-x;
}

.wx-divider--dotted .wx-divider-line {
	background-image: radial-gradient(circle, var(--wx-line-color) 30%, transparent 30%);
	background-size: 7px 100%;
	background-repeat: repeat-x;
	background-position: center;
}

/* ===== GLOW ===== */
.wx-divider--glow .wx-divider-line {
	box-shadow: 0 0 var(--wx-glow-blur, 8px) var(--wx-glow-color);
}

/* ===== SHIMMER ANIMATION ===== */
@keyframes wx-shimmer-sweep {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

.wx-divider--shimmer .wx-divider-line {
	background-image: linear-gradient(
		90deg,
		var(--wx-line-color) 0%,
		var(--wx-line-color) 40%,
		var(--wx-shimmer-color) 50%,
		var(--wx-line-color) 60%,
		var(--wx-line-color) 100%
	) !important;
	background-size: 200% 100% !important;
	background-repeat: no-repeat !important;
	animation: wx-shimmer-sweep var(--wx-shimmer-duration, 3.5s) ease-in-out infinite;
}

/* When gradient + shimmer combined, fade edges */
.wx-divider--gradient.wx-divider--shimmer:not(.wx-divider--has-accent) .wx-divider-line {
	-webkit-mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
	        mask-image: linear-gradient(90deg, transparent, black 20%, black 80%, transparent);
}

.wx-divider--gradient.wx-divider--shimmer.wx-divider--has-accent .wx-divider-line--left {
	-webkit-mask-image: linear-gradient(90deg, transparent, black 80%);
	        mask-image: linear-gradient(90deg, transparent, black 80%);
}

.wx-divider--gradient.wx-divider--shimmer.wx-divider--has-accent .wx-divider-line--right {
	-webkit-mask-image: linear-gradient(90deg, black 20%, transparent);
	        mask-image: linear-gradient(90deg, black 20%, transparent);
}

/* ===== ACCENT ===== */
.wx-divider-accent {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wx-accent-color);
	line-height: 1;
}

/* Single dot */
.wx-divider-accent--dot {
	width: var(--wx-accent-size, 10px);
	height: var(--wx-accent-size, 10px);
	border-radius: 50%;
	background: var(--wx-accent-color);
}

/* Triple dots */
.wx-divider-accent--triple {
	display: inline-flex;
	gap: 7px;
}

.wx-divider-accent--triple .wx-divider-dot {
	width: var(--wx-accent-size, 10px);
	height: var(--wx-accent-size, 10px);
	border-radius: 50%;
	background: var(--wx-accent-color);
}

/* Diamond (rotated square) */
.wx-divider-accent--diamond {
	width: var(--wx-accent-size, 10px);
	height: var(--wx-accent-size, 10px);
	background: var(--wx-accent-color);
	transform: rotate(45deg);
}

/* Plus & Star use SVG */
.wx-divider-accent--plus,
.wx-divider-accent--star {
	width: calc(var(--wx-accent-size, 10px) * 1.6);
	height: calc(var(--wx-accent-size, 10px) * 1.6);
}

.wx-divider-accent--plus svg,
.wx-divider-accent--star svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Icon (with optional circle wrap) */
.wx-divider-accent--circle {
	width: auto;
	height: auto;
	border-radius: 50%;
	padding: 10px;
	background: rgba(0, 201, 240, 0.08);
	border: 1px solid rgba(0, 201, 240, 0.3);
}

.wx-divider-accent svg {
	display: block;
}

.wx-divider-accent i {
	display: inline-flex;
}

/* Text label */
.wx-divider-accent-text {
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--wx-accent-color);
	white-space: nowrap;
	padding: 0 4px;
}

/* Subtle pulse on the dot/diamond/star for "alive" feel when glow is on */
.wx-divider--glow .wx-divider-accent--dot,
.wx-divider--glow .wx-divider-accent--diamond,
.wx-divider--glow .wx-divider-accent--star,
.wx-divider--glow .wx-divider-accent--triple .wx-divider-dot {
	box-shadow: 0 0 var(--wx-glow-blur, 8px) var(--wx-glow-color);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.wx-divider--shimmer .wx-divider-line {
		animation: none !important;
		background: var(--wx-line-color) !important;
	}
}