.bui-tooltip {
  --arrow-size: var(--bui-tooltip-arrow-size, 8PX);
  --localtion-position: var(--bui-tooltip-localtion-position, 8PX);
  --max-width: var(--bui-tooltip-max-width, 350px);
  --content-min-width: var(--bui-tooltip-content-min-width, 30px);
  --content-min-height: var(--bui-tooltip-content-min-height, 32px);
  --content-padding: var(--bui-tooltip-content-padding, 6px 8px);
  max-width: var(--max-width);
  font-size: var(--bui-text-size-1);
  position: absolute;
  visibility: hidden;
  z-index: var(--bui-z-index-tooltip);
}
.bui-tooltip .bui-tooltip-arrow {
  width: 0;
  height: 0;
  position: absolute;
}
.bui-tooltip .bui-tooltip-arrow.location-left {
  left: var(--localtion-position);
}
.bui-tooltip .bui-tooltip-arrow.location-right {
  right: var(--localtion-position);
}
.bui-tooltip .bui-tooltip-arrow.location-top {
  top: var(--localtion-position);
}
.bui-tooltip .bui-tooltip-arrow.location-bottom {
  bottom: var(--localtion-position);
}
.bui-tooltip.tooltip-top .location-center,
.bui-tooltip.tooltip-bottom .location-center {
  left: 50%;
  transform: translateX(-50%);
}
.bui-tooltip.tooltip-left .location-center,
.bui-tooltip.tooltip-right .location-center {
  top: 50%;
  transform: translateY(-50%);
}
.bui-tooltip.tooltip-top {
  padding-bottom: var(--arrow-size);
}
.bui-tooltip.tooltip-top .bui-tooltip-arrow {
  border-left: var(--arrow-size) solid transparent;
  border-right: var(--arrow-size) solid transparent;
  border-top: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
  bottom: 0;
}
.bui-tooltip.tooltip-bottom {
  padding-top: var(--arrow-size);
}
.bui-tooltip.tooltip-bottom .bui-tooltip-arrow {
  border-left: var(--arrow-size) solid transparent;
  border-right: var(--arrow-size) solid transparent;
  border-bottom: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
  top: 0;
}
.bui-tooltip.tooltip-left {
  padding-right: var(--arrow-size);
}
.bui-tooltip.tooltip-left .bui-tooltip-arrow {
  border-top: var(--arrow-size) solid transparent;
  border-bottom: var(--arrow-size) solid transparent;
  border-left: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
  right: 0;
}
.bui-tooltip.tooltip-right {
  padding-left: var(--arrow-size);
}
.bui-tooltip.tooltip-right .bui-tooltip-arrow {
  border-top: var(--arrow-size) solid transparent;
  border-bottom: var(--arrow-size) solid transparent;
  border-right: var(--arrow-size) solid var(--bui-color-bg-alpha-dark-7);
  left: 0;
}
.bui-tooltip .bui-tooltip-content {
  min-width: var(--content-min-width);
  min-height: var(--content-min-height);
  padding: var(--content-padding);
  color: var(--bui-color-white);
  text-align: left;
  text-decoration: none;
  word-wrap: break-word;
  background-color: var(--bui-color-bg-alpha-dark-7);
  border-radius: var(--bui-shape-radius-poster);
  box-shadow:
    0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 9px 28px 8px rgba(0, 0, 0, 0.05);
}