@import "settings.colors";

@import "mixins/settings.fonts";
@import "mixins/tools.mixins";

.c-comment-bubble {
  float: right;
  width: rem(77);
  margin: rem(16) rem(8);
}

.c-comment-bubble__head {
  height: rem(44);
  padding-top: rem(5);
  border-radius: rem(2);
  background-color: $color-grey-100;
}

.c-comment-bubble__count {
  @include font-gm-sans-bold;
  font-size: rem(18);
  color: $color-grey-900;
  letter-spacing: rem(1);
  text-align: center;
}

.c-comment-bubble__label {
  @include font-gm-sans;
  font-size: rem(11);
  color: $color-grey-660;
  letter-spacing: rem(1);
  text-align: center;
  text-transform: uppercase;
}

.c-comment-bubble__tail {
  text-align: right;
  padding-right: rem(4);
}

.c-comment-bubble__tip {
  margin-top: rem(-4);
  width: rem(18);
  height: rem(18);
  fill: $color-grey-100;
}
