Abstract top balloon component

scss

//
// @param  hash  $params
//   background-color  hex
//   border-color      hex
//   border-size       length
//   triangle-size     length
//

@use "node_modules/sass-basis/src/css/core";

.c-top-balloon {
  @include core.top-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  padding: var(--_padding1);
}

html

<div class="c-top-balloon">
  ...
</div>

Abstract right balloon component

scss

//
// @param  hash  $params
//   background-color  hex
//   border-color      hex
//   border-size       length
//   triangle-size     length
//

@use "node_modules/sass-basis/src/css/core";

.c-right-balloon {
  @include core.right-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  padding: var(--_padding1);
}

html

<div class="c-right-balloon">
  ...
</div>

Abstract bottom balloon component

scss

//
// @param  hash  $params
//   background-color  hex
//   border-color      hex
//   border-size       length
//   triangle-size     length
//

@use "node_modules/sass-basis/src/css/core";

.c-bottom-balloon {
  @include core.bottom-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  padding: var(--_padding1);
}

html

<div class="c-bottom-balloon">
  ...
</div>

Abstract left balloon component

scss

//
// @param  hash  $params
//   background-color  hex
//   border-color      hex
//   border-size       length
//   triangle-size     length
//

@use "node_modules/sass-basis/src/css/core";

.c-left-balloon {
  @include core.left-balloon((
    background-color: #fff,
    border-color: null,
    border-size: null,
    triangle-size: 10px,
  ));
  padding: var(--_padding1);
}

html

<div class="c-left-balloon">
  ...
</div>