@import '../settings';
@import '../common/utils';

@mixin bubble($size) {
  display: inline-block;
  margin: 0 $global-margin * 0.2;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  width: $size;
  height: $size;
  line-height: $size;
  font-size: bubbleFontSize($size);
  color: var(--fr--color-sky-white);

  --main-color: var(--main-bubble-color, var(--fr--color-sea-blue));
  background-color: var(--main-color);
}

.bubble--small {
  @include bubble($small-bubble);
}

.bubble--medium {
  @include bubble($medium-bubble);
}

.bubble--large {
  @include bubble($large-bubble);
}