@use "../../../../styles/int.scss";

.dots-container {
  display: flex;
  align-items: center;
  column-gap: 2px;
  margin-left: auto;

  @include int.breakpoint-at-most("xs") {
    column-gap: 1px;
  }
}

.blank-dot {
  width: 4px;
  height: 4px;
  background-color: int.$warmgray-20;
  border-radius: 100%;

  @include int.breakpoint-at-most("xs") {
    width: 3px;
    height: 3px;
  }
}

.party-dot {
  padding: 0 1px 0 2px;

  @include int.breakpoint-at-most("xs") {
    --size: 4px;
    --pxOffset: .15px;
  }
}