$block: pips;

.#{$block} {
  --local-pip-size:  var(--pip-size, #{unit(1.2)});
  --local-pip-size-flex: calc(var(--local-pip-size) + #{unit(1)});
  --local-pip-border-color: var(--pip-border-color, hsla(0, 0%, 100%, 0.15));

  width: 100%;
  flex: 0 0 var(--local-pip-size-flex);
  display: flex;
  justify-content: center;
  align-items: center;

  &__pip {
    width: var(--local-pip-size);
    height: var(--local-pip-size);
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid var(--local-pip-border-color);
    transition: background-color var(--animation-duration-fast) ease-in;

    &:not(:last-child):not(:only-child) {
      margin-right: unit(0.5);
    }

    &--active {
      background-color: var(--local-pip-border-color);
    }
  }

  &--large {
    --local-pip-size:  var(--pip-size, #{unit(2)});
    --local-pip-size-flex: calc(var(--local-pip-size) + #{unit(1)});
  }
}