@charset "UTF-8";
/* HTML: <div class="tooltip">This is a Speech Bubble with a solid coloration and with border radius </div> */
.tooltip {
    color: #fff;
    font-size: 18px;
    max-width: 28ch;
    text-align: center;
}

.tooltip {
  /* triangle dimension */
  --b: 2em;
  /* base */
  --h: 1em;
  /* height */

  --p: 50%;
  /* triangle position (0%:left 100%:right) */
  --r: 1.2em;
  /* the radius */
  --c: #6A4A3C;

  padding: 1em;
  border-radius: min(var(--r), var(--p) - var(--b)/2) min(var(--r), 100% - var(--p) - var(--b)/2) var(--r) var(--r)/var(--r);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0,
      min(100%, var(--p) + var(--b)/2) 0,
      var(--p) calc(-1*var(--h)),
      max(0%, var(--p) - var(--b)/2) 0);
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) fill 0/ 0 calc(100% - var(--p) - var(--b)/2) var(--r) calc(var(--p) - var(--b)/2)/ var(--h) 0 0 0;
}