.smb-balloon {
  --smb-balloon--border-radius: var(--_global--border-radius);
  --smb-balloon--background-color: var(--_lightest-color-gray);
  --smb-balloon--border-color: var(--_lightest-color-gray);
  --smb-balloon--border-style: solid;
  --smb-balloon--border-width: 0px;
  --smb-balloon--color: inherit;
  --smb-balloon--avatar-border-color: var(--_lighter-color-gray);
  --smb-balloon--avatar-border-style: solid;
  --smb-balloon--avatar-border-width: 3px;
  --smb-balloon--gap: calc(var(--_margin-1) + var(--smb-balloon--border-width));
  align-items: flex-start;
  display: flex;
  flex-direction: column
}

.smb-balloon__person {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  margin: 0 var(--smb-balloon--border-width) var(--smb-balloon--gap) 0
}

.smb-balloon__person .smb-balloon__name {
  margin: 0 5px 0 0
}

.smb-balloon__figure {
  border: var(--smb-balloon--avatar-border-width) var(--smb-balloon--avatar-border-style) var(--smb-balloon--avatar-border-color);
  border-radius: 100%;
  box-sizing: initial;
  flex: 0 0 auto;
  height: 60px;
  overflow: hidden;
  position: relative;
  width: 60px
}

.smb-balloon__figure .components-button.image-button {
  height: 100%;
  width: 100%
}

.smb-balloon__figure img {
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%
}

.smb-balloon__name {
  --_font-size-level: -2;
  font-size: var(--_font-size);
  line-height: var(--_line-height);
  white-space: nowrap
}

.smb-balloon__body {
  background-color: var(--smb-balloon--background-color);
  border: var(--smb-balloon--border-width) var(--smb-balloon--border-style) var(--smb-balloon--border-color);
  border-radius: var(--smb-balloon--border-radius);
  color: var(--smb-balloon--color);
  flex: 1 1 auto;
  overflow-wrap: break-word;
  padding: var(--_padding1);
  position: relative
}

.smb-balloon__body:after,
.smb-balloon__body:before {
  border-color: #0000;
  border-style: solid;
  content: "";
  display: block;
  height: 0;
  margin-right: 0;
  position: absolute;
  width: 0
}

.smb-balloon__body:before {
  border-bottom-color: var(--smb-balloon--border-color);
  border-width: 0 calc(5px + var(--smb-balloon--border-width)) calc((5px + var(--smb-balloon--border-width))*2);
  right: calc(25px + var(--smb-balloon--avatar-border-width)*2/2 - var(--smb-balloon--border-width)*2/2);
  top: calc(-10px - var(--smb-balloon--border-width)*2)
}

.smb-balloon__body:after {
  border-bottom-color: var(--smb-balloon--background-color);
  border-width: 0 5px 10px;
  right: calc(25px + var(--smb-balloon--avatar-border-width)*2/2);
  top: -10px
}

.smb-balloon--reverse {
  align-items: flex-end
}

.smb-balloon--reverse .smb-balloon__person {
  margin: 0 0 var(--smb-balloon--gap) var(--smb-balloon--border-width)
}

.smb-balloon--reverse .smb-balloon__person .smb-balloon__name {
  margin-left: 5px;
  order: -1
}

.smb-balloon--reverse .smb-balloon__body:after,
.smb-balloon--reverse .smb-balloon__body:before {
  right: auto
}

.smb-balloon--reverse .smb-balloon__body:before {
  left: calc(25px + var(--smb-balloon--avatar-border-width)*2/2 - var(--smb-balloon--border-width)*2/2)
}

.smb-balloon--reverse .smb-balloon__body:after {
  left: calc(25px + var(--smb-balloon--avatar-border-width)*2/2)
}

:where(.smb-balloon__body.is-layout-constrained>*) {
  --wp--style--global--content-size: 100%;
  --wp--style--global--wide-size: 100%
}

.smb-balloon:where([style*=border-width]) {
  border: none
}

@media(min-width:640px) {
  .smb-balloon {
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap
  }

  .smb-balloon__person {
    flex-direction: column;
    margin: 0 0 0 var(--smb-balloon--gap)
  }

  .smb-balloon__person .smb-balloon__name {
    margin: 5px 0 0
  }

  .smb-balloon__body:after,
  .smb-balloon__body:before {
    border-color: #0000
  }

  .smb-balloon__body:before {
    border-left-color: var(--smb-balloon--border-color);
    border-width: calc(5px + var(--smb-balloon--border-width)) 0 calc(5px + var(--smb-balloon--border-width)) calc((5px + var(--smb-balloon--border-width))*2);
    right: calc(-10px - var(--smb-balloon--border-width)*2);
    top: calc(50% - 5px - var(--smb-balloon--border-width))
  }

  .smb-balloon__body:after {
    border-left-color: var(--smb-balloon--background-color);
    border-width: 5px 0 5px 10px;
    right: -10px;
    top: calc(50% - 5px)
  }

  .smb-balloon--reverse {
    align-items: center;
    flex-direction: row-reverse
  }

  .smb-balloon--reverse .smb-balloon__person {
    margin: 0 var(--smb-balloon--gap) 0 0
  }

  .smb-balloon--reverse .smb-balloon__person .smb-balloon__name {
    margin-left: 0;
    order: 0
  }

  .smb-balloon--reverse .smb-balloon__body:after,
  .smb-balloon--reverse .smb-balloon__body:before {
    border-color: #0000
  }

  .smb-balloon--reverse .smb-balloon__body:before {
    border-right-color: var(--smb-balloon--border-color);
    border-width: calc(5px + var(--smb-balloon--border-width)) calc((5px + var(--smb-balloon--border-width))*2) calc(5px + var(--smb-balloon--border-width)) 0;
    left: calc(-10px - var(--smb-balloon--border-width)*2)
  }

  .smb-balloon--reverse .smb-balloon__body:after {
    border-right-color: var(--smb-balloon--background-color);
    border-width: 5px 10px 5px 0;
    left: -10px
  }
}