/*
 * Skill Bars widget.
 *
 * The fill is rendered at its final width so the bar reads correctly with no
 * script at all; the handler only pulls it back to nothing and lets it grow
 * once the widget is on screen.
 */
.ekl-skills {
    @apply flex flex-col gap-[22px];
}

.ekl-skill__head {
    @apply mb-[8px] flex items-center justify-between gap-[10px];
}

.ekl-skill__title {
    @apply text-[16px] font-semibold leading-[1.4] text-ekl-secondary;
}

.ekl-skill__level {
    @apply text-[14px] font-semibold leading-none text-ekl-neutral-700;
}

.ekl-skill__track {
    @apply relative h-[10px] w-full overflow-hidden rounded-[999px] bg-ekl-neutral-200;
}

.ekl-skill__fill {
    @apply flex h-full items-center justify-end rounded-[999px] bg-ekl-brand transition-[width] ease-out;
}

/* Inside the bar the figure sits on the fill, so it takes the fill's colour. */
.ekl-skills[data-level-position='inside'] {
    .ekl-skill__track {
        @apply h-[26px] min-h-[26px];
    }

    .ekl-skill__fill {
        @apply pr-[12px] pl-[8px];
    }

    .ekl-skill__fill .ekl-skill__level {
        @apply text-[12px] font-bold leading-none text-white whitespace-nowrap select-none;
    }
}

/* A reader who asked for less motion gets the finished bar, not a growing one. */
@media (prefers-reduced-motion: reduce) {
    .ekl-skill__fill {
        @apply transition-none;
    }
}