@import "../../helpers";
.sf-bullet {
  box-sizing: border-box;
  width: var(--bullet-width, var(--bullet-size, 0.5rem));
  height: var(--bullet-height, var(--bullet-size, 0.5rem));
  margin: var(--bullet-margin, var(--spacer-2xs));
  border-radius: var(--bullet-border-radius, 100%);
  background: var(--bullet-background, var(--c-gray));
  transition: transform 150ms linear, box-shadow 150ms linear;
  @include box-shadow(
    --bullet-box-shadow,
    0px,
    4px,
    4px,
    0px,
    var(--c-black),
  );
  --bullet-box-shadow-opacity: 0;
  &:hover,
  &.is-active {
    transform: scale3d(1.25, 1.25, 1);
    --bullet-box-shadow-opacity: 0.25;
  }
  &.is-active {
    --bullet-background: var(--c-primary);
    cursor: default;
  }
}
.sf-bullets {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style-type: none;
}