/* *****************************************************************************
*
*  Tooltip : ngx-popper
*
* ***************************************************************************** */
.tooltip {
  &.ngxp__container {
    border: 0;
    padding: 0;

    & > .ngxp__arrow {
      border-color: $gray-900;
    }

    &[x-placement^='top'] > .ngxp__arrow {
      border-width: 6px 6px 0 6px;
      bottom: -6px;
      left: calc(50% - 6px);
    }

    &[x-placement^='bottom'] > .ngxp__arrow {
      border-width: 0 6px 6px 6px;
      top: -6px;
      left: calc(50% - 6px);
    }

    &[x-placement^='left'] > .ngxp__arrow {
      border-width: 6px 0 6px 6px;
      right: -6px;
      top: calc(50% - 6px);
    }

    &[x-placement^='right'] > .ngxp__arrow {
      border-width: 6px 6px 6px 0;
      left: -6px;
      top: calc(50% - 6px);
    }
  }

  .ngxp__inner {
    max-width: 200px;
    padding: $input-padding-y $input-padding-x;
    color: $gray-500;
    text-align: center;
    background-color: $gray-900;
    border-radius: 0;
  }
}