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

.tooltip {
  position: relative;

  &.default {
    background-color: var(--popoverBodyBackgroundColor);
    box-shadow: 0 5px 10px var(--popoverShadowColor);
  }

  &.inverse {
    background-color: var(--themeDarkColor);
    box-shadow: 0 5px 10px var(--popoverShadowInverseColor);
    color: var(--white);
  }
}

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

.arrowDisabled {
  display: none;
}

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

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

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

    &.default {
      border-top-color: var(--popoverArrowBorderColor);
    }

    &.inverse {
      border-top-color: var(--popoverArrowBorderInverseColor);
    }
  }

  &.default {
    border-top-color: var(--popoverArrowBorderColor);
  }

  &.inverse {
    border-top-color: var(--popoverArrowBorderInverseColor);
  }
}

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

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

    &.default {
      border-right-color: var(--popoverArrowBorderColor);
    }

    &.inverse {
      border-right-color: var(--popoverArrowBorderInverseColor);
    }
  }

  &.default {
    border-right-color: var(--popoverArrowBorderColor);
  }

  &.inverse {
    border-right-color: var(--popoverArrowBorderInverseColor);
  }
}

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

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

    &.default {
      border-bottom-color: var(--popoverArrowBorderColor);
    }

    &.inverse {
      border-bottom-color: var(--popoverArrowBorderInverseColor);
    }
  }

  &.default {
    border-bottom-color: var(--popoverArrowBorderColor);
  }

  &.inverse {
    border-bottom-color: var(--popoverArrowBorderInverseColor);
  }
}

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

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

    &.default {
      border-left-color: var(--popoverArrowBorderColor);
    }

    &.inverse {
      border-left-color: var(--popoverArrowBorderInverseColor);
    }
  }

  &.default {
    border-left-color: var(--popoverArrowBorderColor);
  }

  &.inverse {
    border-left-color: var(--popoverArrowBorderInverseColor);
  }
}

.body {
  padding: 5px;
}

.verticalContainer {
  max-height: 300px;
}

.horizontalContainer {
  max-width: calc($breakpointExtraSmall - 20px);
}

@media only screen and (min-width: $breakpointExtraSmall) {
  .horizontalContainer {
    max-width: calc($breakpointSmall * 0.8);
  }
}

@media only screen and (min-width: $breakpointSmall) {
  .horizontalContainer {
    max-width: calc($breakpointMedium * 0.8);
  }
}

@media only screen and (min-width: $breakpointMedium) {
  .horizontalContainer {
    max-width: calc($breakpointLarge * 0.8);
  }
}

/* @media only screen and (max-width: $breakpointLarge) {
  .horizontalContainer {
    max-width: calc($breakpointLarge * 0.8);
  }
} */