.tooltip {
  display: block !important;
  z-index: 10000;
  background: #fff;
  box-shadow: 0 25px 100px rgba(0, 0, 0, 0.5);
  padding: 24px;

  .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 12px;
    border-color: white;
  }

  &[x-placement^="top"] {
    margin-bottom: 12px;

    .tooltip-arrow {
      border-width: 12px 12px 0 12px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      bottom: -12px;
      left: calc(50% - 12px);
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &[x-placement^="bottom"] {
    margin-top: 12px;

    .tooltip-arrow {
      border-width: 0 12px 12px 12px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-top-color: transparent !important;
      top: -12px;
      left: calc(50% - 12px);
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &[x-placement^="right"] {
    margin-left: 12px;

    .tooltip-arrow {
      border-width: 12px 12px 12px 0;
      border-left-color: transparent !important;
      border-top-color: transparent !important;
      border-bottom-color: transparent !important;
      left: -12px;
      top: calc(50% - 12px);
      margin-left: 0;
      margin-right: 0;
    }
  }

  &[x-placement^="left"] {
    margin-right: 12px;

    .tooltip-arrow {
      border-width: 12px 0 12px 12px;
      border-top-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      right: -12px;
      top: calc(50% - 12px);
      margin-left: 0;
      margin-right: 0;
    }
  }

  &[aria-hidden='true'] {
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s, visibility .15s;
  }

  &[aria-hidden='false'] {
    visibility: visible;
    opacity: 1;
    transition: opacity .15s;
  }
}