/* =============================================
   Elemance Widget — Skill Bar
   ============================================= */

.elemance-skill-bar {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.elemance-skill__item { width: 100%; }

.elemance-skill__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.elemance-skill__name {
	font-size: 14px;
	font-weight: 600;
}

.elemance-skill__percent {
	font-size: 13px;
	font-weight: 700;
}

/* Track */
.elemance-skill__track {
	width: 100%;
	height: 10px;
	background-color: #f3f0ff;
	overflow: hidden;
	position: relative;
}

/* Fill */
.elemance-skill__fill {
	height: 100%;
	width: 0%;
	transition: width 0s;
	position: relative;
}

.elemance-skill__fill.elmc-animated {
	transition: width var(--elmc-skill-duration, 1.2s) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rounded */
.elemance-skill-bar--rounded .elemance-skill__track,
.elemance-skill-bar--rounded .elemance-skill__fill {
	border-radius: 999px;
}

/* Square — no radius (default) */

/* Striped */
.elemance-skill-bar--striped .elemance-skill__fill {
	background-image: linear-gradient(
		45deg,
		rgba(255,255,255,0.15) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255,255,255,0.15) 50%,
		rgba(255,255,255,0.15) 75%,
		transparent 75%,
		transparent
	);
	background-size: 20px 20px;
	animation: elmc-stripe-move 0.8s linear infinite;
}

@keyframes elmc-stripe-move {
	from { background-position: 0 0; }
	to   { background-position: 20px 0; }
}

/* Floating percentage */
.elemance-skill__floating-pct {
	position: absolute;
	right: 0;
	top: -28px;
	background: #1a1a2e;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 4px;
	white-space: nowrap;
}

.elemance-skill__floating-pct::after {
	content: '';
	position: absolute;
	bottom: -4px;
	right: 6px;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid #1a1a2e;
}

/* ── Thin Line style ──────────────────────────── */
.elemance-skill-bar--thin .elemance-skill__track,
.elemance-skill-bar--thin .elemance-skill__fill {
	height: 3px !important;
	border-radius: 999px;
}

.elemance-skill-bar--thin .elemance-skill__name {
	font-size: 13px;
}

/* ── Dotted Segments style ────────────────────── */
.elemance-skill-bar--dotted .elemance-skill__track {
	background: transparent;
	display: flex;
	gap: 4px;
	height: auto !important;
}

.elemance-skill-bar--dotted .elemance-skill__fill {
	display: none;
}

.elemance-skill-bar--dotted .elemance-skill__track::before {
	content: '';
	display: none;
}

/* Use JS-driven inline width with dot segments via repeating-linear-gradient */
.elemance-skill-bar--dotted .elemance-skill__track {
	height: 10px !important;
	background: repeating-linear-gradient(
		90deg,
		#e5e7eb 0px,
		#e5e7eb 12px,
		transparent 12px,
		transparent 16px
	);
	border-radius: 0;
}

.elemance-skill-bar--dotted .elemance-skill__fill {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	height: 100% !important;
	background: repeating-linear-gradient(
		90deg,
		currentColor 0px,
		currentColor 12px,
		transparent 12px,
		transparent 16px
	) !important;
	background-clip: padding-box;
	border-radius: 0;
}

.elemance-skill-bar--dotted .elemance-skill__track {
	position: relative;
	overflow: hidden;
}