$eps-indicator-bullet-border-color: theme-colors(light);
$eps-indicator-bullet-dark-border-color: dark-tints(500);

:root {
	--indicator-bullet-border-color: #{$eps-indicator-bullet-border-color};
}

.eps-theme-dark {
	--indicator-bullet-border-color: #{$eps-indicator-bullet-dark-border-color};
}

$eps-indicator-bullet-size: spacing(16) * 0.75;
$eps-indicator-bullet-color: tints(300);
$eps-indicator-bullet-color-active: theme-colors(success);
$eps-indicator-bullet-box-shadow: $eps-box-shadow-1;
$eps-indicator-bullet-radius: 100%;
$eps-indicator-bullet-border: 2px solid var(--indicator-bullet-border-color);
$eps-indicator-bullet-spacing: spacing(10);

.eps-indicator-bullet {
	display: block;
	flex-shrink: 0;
	width: $eps-indicator-bullet-size;
	height: $eps-indicator-bullet-size;
	box-shadow: $eps-indicator-bullet-box-shadow;
	background-color: $eps-indicator-bullet-color;
	border: $eps-indicator-bullet-border;
	border-radius: $eps-indicator-bullet-radius;
	margin-inline-end: $eps-indicator-bullet-spacing;

	&--active {
		background-color: $eps-indicator-bullet-color-active;
	}
}