@layer components {

/* Change color of the default dot by replacing the hex code*/
.w-slider-dot {
background-color: var(--color-neutral-100);
width: 0.625rem;
height: 0.625rem;
}

/* Change color of the active dot by replacing the hex code*/
.w-slider-dot.w-active {
background-color: var(--color-purple-700);
width: 0.625rem;
height: 0.625rem;
}

}