.tooltip-type (@color, @bgcolor, @border-color) {
  background: @bgcolor;
  color: @color;

  &[x-placement^='top'] .popper__arrow {
    border-top-color: @border-color;

    &::after {
      border-top-color: @border-color;
    }
  }

  &[x-placement^='bottom'] .popper__arrow {
    border-bottom-color: @border-color;

    &::after {
      border-bottom-color: @border-color;
    }
  }

  &[x-placement^='left'] .popper__arrow {
    border-left-color: @border-color;

    &::after {
      border-left-color: @border-color;
    }
  }

  &[x-placement^='right'] .popper__arrow {
    border-right-color: @border-color;

    &::after {
      border-right-color: @border-color;
    }
  }
}

.tooltip-light (@color, @bgcolor, @border-color) {
  background: @bgcolor;
  color: @color;

  &[x-placement^='top'] .popper__arrow {
    border-top-color: @border-color;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.08));

    &::after {
      border-top-color: @bgcolor;
    }
  }

  &[x-placement^='bottom'] .popper__arrow {
    border-bottom-color: @border-color;
    filter: drop-shadow(0px -2px 2px rgba(0, 0, 0, 0.08));

    &::after {
      border-bottom-color: @bgcolor;
    }
  }

  &[x-placement^='left'] .popper__arrow {
    border-left-color: @border-color;
    filter: drop-shadow(2px 0px 2px rgba(0, 0, 0, 0.08));

    &::after {
      border-left-color: @bgcolor;
    }
  }

  &[x-placement^='right'] .popper__arrow {
    border-right-color: @border-color;
    filter: drop-shadow(-2px 0px 2px rgba(0, 0, 0, 0.08));

    &::after {
      border-right-color: @bgcolor;
    }
  }
}