.tooltipContainer {
  z-index: $popperZIndex;
  margin: 10px 15px;
}

.tooltip {
  position: relative;

  &.default {
    background-color: $white;
    box-shadow: 0 5px 10px $popoverShadowColor;
  }

  &.inverse {
    background-color: $themeDarkColor;
    box-shadow: 0 5px 10px $popoverShadowInverseColor;
  }
}

.arrow,
.arrow::after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-width: 11px;
  border-style: solid;
  border-color: transparent;
}

.arrow::after {
  border-width: 10px;
  content: '';
}

.top {
  bottom: -11px;
  left: 50%;
  margin-left: -11px;
  border-bottom-width: 0;

  &::after {
    bottom: 1px;
    margin-left: -10px;
    border-bottom-width: 0;
    content: ' ';

    &.default {
      border-top-color: $popoverArrowBorderColor;
    }

    &.inverse {
      border-top-color: $popoverArrowBorderInverseColor;
    }
  }

  &.default {
    border-top-color: $popoverArrowBorderColor;
  }

  &.inverse {
    border-top-color: $popoverArrowBorderInverseColor;
  }
}

.right {
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-left-width: 0;

  &::after {
    bottom: -10px;
    left: 1px;
    border-left-width: 0;
    content: ' ';

    &.default {
      border-right-color: $popoverArrowBorderColor;
    }

    &.inverse {
      border-right-color: $popoverArrowBorderInverseColor;
    }
  }

  &.default {
    border-right-color: $popoverArrowBorderColor;
  }

  &.inverse {
    border-right-color: $popoverArrowBorderInverseColor;
  }
}

.bottom {
  top: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;

  &::after {
    top: 1px;
    margin-left: -10px;
    border-top-width: 0;
    content: ' ';

    &.default {
      border-bottom-color: $popoverArrowBorderColor;
    }

    &.inverse {
      border-bottom-color: $popoverArrowBorderInverseColor;
    }
  }

  &.default {
    border-bottom-color: $popoverArrowBorderColor;
  }

  &.inverse {
    border-bottom-color: $popoverArrowBorderInverseColor;
  }
}

.left {
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-right-width: 0;

  &::after {
    right: 1px;
    bottom: -10px;
    border-right-width: 0;
    content: ' ';

    &.default {
      border-left-color: $popoverArrowBorderColor;
    }

    &.inverse {
      border-left-color: $popoverArrowBorderInverseColor;
    }
  }

  &.default {
    border-left-color: $popoverArrowBorderColor;
  }

  &.inverse {
    border-left-color: $popoverArrowBorderInverseColor;
  }
}

.body {
  padding: 5px;
}