// ---
// title: Help
// description: Buttons and icons when help is required.
// ---

// <div class="example html">
//   This text could use some help. <span class="lego-help-dot" v-poptip data-dir="top-center" data-content="This should be short text, no more than a sentence."></span>
// </div>

// [---]

.#{$namespace}help-dot {
  background: map-fetch($color, background muted);
  color: map-fetch($color, text white);
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  font-size: 10px;

  &::after {
    content: '?';
  }
}