:root {
  --bg-color: #252937;
  --radius: var(--bs-radius);
  --text-color: #fff;
  --size: var(--bs-tooltip-font-size);
  --offset: var(--bs-tooltip-offset);
  --time-short: 0.1s;
  --time-long: 0.2s;
}

.bs-tooltip {
  position: relative;

  &.fade-right::before,
  &.fade-left::before,
  &.fade-up::before,
  &.fade-down::before,
  &.zoom-right::before,
  &.zoom-left::before,
  &.zoom-up::before,
  &.zoom-down::before {
    box-sizing: border-box;
    opacity: 0;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    padding: 5px 10px;
    border-radius: var(--radius);
    content: attr(data-bs-text);
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    height: 30px;
    background-color: var(--bg-color);
    transition: var(--time-short);
    font-size: var(--size);
    color: var(--text-color);
    z-index: 19940121;
  }

  /* fade out */

  &.fade-right::before {
    top: calc(50% - 15px);
    left: 100%;
  }
  &.fade-right:hover::before {
    transition: var(--time-long);
    opacity: 1;
    transform: translateX(var(--offset));
  }

  &.fade-left::before {
    top: calc(50% - 15px);
    right: 100%;
  }
  &.fade-left:hover::before {
    transition: var(--time-long);
    opacity: 1;
    transform: translateX(calc(var(--offset) * -1));
  }

  &.fade-up::before {
    top: -15px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  &.fade-up:hover::before {
    transition: var(--time-long);
    opacity: 1;
    transform: translateY(calc(var(--offset) * -1)) translate(-50%, -50%);
  }

  &.fade-down::before {
    top: calc(100% + 15px);
    left: 50%;
    transform: translate(-50%, -50%);
  }
  &.fade-down:hover::before {
    transition: var(--time-long);
    opacity: 1;
    transform: translateY(var(--offset)) translate(-50%, -50%);
  }

  /* zoom out */

  &.zoom-right::before {
    transform: scale(0.1);
    transform-origin: center left;
    transition: var(--time-long);
    top: calc(50% - 15px);
    left: 100%;
  }
  &.zoom-right:hover::before {
    opacity: 1;
    transform: translateX(var(--offset));
  }

  &.zoom-left::before {
    transform: scale(0.1);
    transform-origin: center right;
    transition: var(--time-long);
    top: calc(50% - 15px);
    right: 100%;
  }
  &.zoom-left:hover::before {
    opacity: 1;
    transform: translateX(calc(var(--offset) * -1));
  }

  &.zoom-up::before {
    transform-origin: bottom center;
    transition: var(--time-long);
    top: -15px;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
  }
  &.zoom-up:hover::before {
    opacity: 1;
    transform: translateY(calc(var(--offset) * -1)) translate(-50%, -50%);
  }

  &.zoom-down::before {
    transform-origin: top center;
    transition: var(--time-long);
    top: calc(100% + 15px);
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
  }
  &.zoom-down:hover::before {
    opacity: 1;
    transform: translateY(var(--offset)) translate(-50%, -50%);
  }
}
