.bz-tooltip {
    background: $bz-neutral-100;
    border: 1px solid $bz-neutral-300;
    border-radius: $bz-border-radius-m;
    box-shadow: $bz-shadow-s;
    color: $bz-neutral-600;
    font-size: $bz-font-size-caption;
    margin: $bz-space-inset-s;
    overflow: hidden;
    padding: $bz-space-inset-s;
    text-overflow: ellipsis;
    user-select: none;
}
.up-arrow {
}
.up-arrow:before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-39%);
  top: -11px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: $bz-neutral-300;
}
.up-arrow:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -11px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: $bz-neutral-100;
}
.down-arrow {
}
.down-arrow:before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: $bz-neutral-300;
  -webkit-transform: translateX(-50%) rotate(180deg);
  transform: translateX(-50%) rotate(180deg);
  bottom: -11px;
}
.down-arrow:after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border: 9px solid transparent;
  border-bottom-color: $bz-neutral-100;
  -webkit-transform: translateX(-50%) rotate(180deg);
  bottom: -8px;
  transform: translateX(-50%) rotate(180deg);
}
.left-arrow{}
.left-arrow:before {
  content: '';
  display: block;
  position: absolute;
  left: -11px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: $bz-neutral-300;
  -webkit-transform: translateX(-50%) rotate(270deg);
  transform: translateY(24%) rotate(270deg);
}

.left-arrow:after {
  content: '';
  display: block;
  position: absolute;
  left: -9px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: $bz-neutral-100;
  -webkit-transform: translateX(-50%) rotate(180deg);
  transform: translateY(-118%) rotate(270deg);
}

.right-arrow{}
.right-arrow:before {
  content: '';
  display: block;
  position: absolute;
  right: -9px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: $bz-neutral-300;
  -webkit-transform: translateX(-50%) rotate(180deg);
  transform: translateY(28%) rotate(90deg);
}

.right-arrow:after {
  content: '';
  display: block;
  position: absolute;
  right: -8px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: $bz-neutral-100;
  -webkit-transform: translateX(-50%) rotate(180deg);
  transform: translateY(-118%) rotate(90deg);
}