.tooltip {
  --bs-tooltip-bg: var(--white);
  --bs-tooltip-color: var(--dark);
  --bs-tooltip-padding-y: 30px;
  box-shadow: var(--color) 1px 1px 4px 0px;
  border: 1px solid var(--color-line);
  margin-bottom: -30px;

  &.show {
    opacity: 1;
  }

  .tooltip-arrow {
   --bs-tooltip-arrow-width: 30px;
    --bs-tooltip-arrow-height: 30px;
  }
}

.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  border-bottom: none;
  border-right: none;
  border-left: 1px solid var(--color-line);
  border-top: 1px solid var(--color-line);
  box-shadow: var(--color) 0px 0px 4px 0px;
  transform: rotate(45deg);
  width: 30px;
  height: 30px;
  background: var(--white);
  margin-bottom: -13px;
}
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  border-top: none;
  border-left: none;
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  box-shadow: var(--color) 0px 0px 4px 0px;
  transform: rotate(45deg);
  width: 30px;
  height: 30px;
  background: var(--white);
  margin-top: -13px;
}
