@mixin square($size) {
  .square {
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    width: $size;
    height: $size;

    color: #fff;

    background-color: var(--color-gray-aaa); // todo in Scheme
    border-radius: 100%;

    app-cmf-doodle-icon {
      display: flex;
    }
  }
}

@mixin defaultStyles() {
  @include square(24px);

  display: flex;
  gap: 10px;
  align-items: center;

  width: 100%;
  padding: 3px 12px;

  app-cmf-gravatar {
    display: flex;
  }
}