@import 'topcoder/tc-includes';

$tc-gray-80: #47474f;

.Tooltip {
  .tooltip-target {
    cursor: default;

    &.click-pointer {
      cursor: pointer;
    }
  }
  .tooltip-container {
    position: absolute;
    white-space: nowrap;
    display: block;
    visibility: visible;
    opacity: 1;
    transition: opacity 0s linear;
    z-index: 1000;
    left: -9999px;
    top: -9999px;

    &.tooltip-hide {
      visibility: hidden;
      opacity: 0;
    }

    .tooltip-content-container {
      background-color: $tc-gray-80;
      color: #fff;
      width: 100%;
      height: 100%;
      padding: 15px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;

      .tooltip-pointer {
        position: absolute;
        height: 10px;
        width: 10px;
        background-color: $tc-gray-80;
        transform: rotate(45deg);
        bottom: -5px;
        left: calc(50% - 5px);
        z-index:-1;
      }

      .tooltip-body {
        position: relative;
        color: #fff;
        font-size: 14px;
        padding: 0;
        margin: 0;
        z-index:2;
      }
    }
  }
  //tooltip theme styling
  &.default {
    .tooltip-content-container {
      //additional theme styling goes here
      .tooltip-pointer {

      }
      .tooltip-body {

      }
    }
  }
}