:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

:host {
  --image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjwhLS0gQ3JlYXRlZCB3aXRoIFZlY3Rvcm5hdG9yIChodHRwOi8vdmVjdG9ybmF0b3IuaW8vKSAtLT4KPHN2ZyBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0eWxlPSJmaWxsLXJ1bGU6bm9uemVybztjbGlwLXJ1bGU6ZXZlbm9kZDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMSAyOSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CjxkZWZzLz4KPGcgaWQ9IlVudGl0bGVkIj4KPHBhdGggZD0iTTEwLjQ3NzEgMC4wMTA5OTU2QzcuNTk1ODMgMC4wMTA5OTU2IDUuMDkwNTYgMS4wNDQ3OSAzLjA2NzE4IDMuMDY4MTdDMS4wNDM3OSA1LjA5MTU1IDAuMDEgNy41OTczNCAwLjAxIDEwLjQ3ODZDMC4wMSAxMy4yOTY5IDEuMDQyNTUgMTUuODQ1MSAyLjk4MDg4IDE3LjgxMkM0LjE1NzIgMTkuMDA1NiA1LjEyNzU2IDE5LjYyNzEgNy4wMDc1IDIwLjM5MDFDOC42NjU4MyAyMS4wNjMyIDkuMjk5MzkgMjEuNTEyNSA5Ljg3NjU4IDIyLjQyNTZDMTAuMTM4MiAyMi44Mzk1IDEwLjQwODEgMjMuMTc4NiAxMC40NzY1IDIzLjE3ODZDMTAuNTQ1IDIzLjE3ODYgMTAuODM3IDIyLjc5ODUgMTEuMTI1NiAyMi4zMzQyQzExLjY3NiAyMS40NDg4IDExLjY0MjIgMjEuNDcgMTUuMTM2NyAxOS44MTg2QzE4LjczMjYgMTguMTE5MiAyMC45NjAzIDE0LjUzODkgMjAuOTQ4MyAxMC40Nzg2QzIwLjkzOTcgNy41ODkyOCAxOS45MDY1IDUuMDg3MTggMTcuODg3NSAzLjA2ODE3QzE1Ljg2NDEgMS4wNDQ3OSAxMy4zNTgzIDAuMDEwOTk1NiAxMC40NzcxIDAuMDEwOTk1NlpNMTAuNDc3NiAyNC41ODkzQzkuODk0NjcgMjQuNTg5MyA5LjU5NTQ3IDI0Ljg4ODUgOS41OTU0NyAyNS40NzE1QzkuNTk1NDcgMjUuNzIzNyA5LjY5MDQxIDI2LjAyNTMgOS44MDY4MyAyNi4xNDE3QzkuOTIzMjQgMjYuMjU4MiAxMC4yMjU0IDI2LjM1MzYgMTAuNDc3NiAyNi4zNTM2QzExLjA2MDUgMjYuMzUzNiAxMS4zNTkyIDI2LjA1NDQgMTEuMzU5MiAyNS40NzE1QzExLjM1OTIgMjQuODg4NSAxMS4wNjA1IDI0LjU4OTMgMTAuNDc3NiAyNC41ODkzWiIgZmlsbD0iIzAwMDAwMCIgZmlsbC1ydWxlPSJldmVub2RkIiBvcGFjaXR5PSIxIiBzdHJva2U9Im5vbmUiLz4KPC9nPgo8L3N2Zz4K);
  display: inline-block;
}

.bubble {
  display: flex;
  background-color: var(--sl-color-red-500);
  -webkit-mask-image: var(--image);
  -webkit-mask-size: 100%;
  mask-image: var(--image);
  mask-size: 100%;
  height: 3em;
  width: 2.35em;
}

.bubble__slot {
  display: inline-block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  color: white;
  font-weight: var(--sl-font-weight-semibold);
  padding-bottom: 0.5em;
}