@import '../style/variable.less';

.@{prefix}-tooltip-wrapper {
  position: relative;
  margin: 0px;
  padding: 0px;
  display: inline-block;

  .@{prefix}-tooltip-content {
    display: inline-block;
    position: fixed;
    font-size: 12px;
    font-weight: normal;
    border-radius: 2px;
    line-height: 20px;
    padding: 4px 8px;
    z-index: 2;
    white-space: nowrap;
    color: var(--kt-tooltip-foreground);
    background: var(--kt-tooltip-background);
    box-shadow: 0px 6px 16px -8px rgba(0, 0, 0, 0.24), 0px 9px 28px 0px rgba(0, 0, 0, 0.15),
      0px 12px 48px 16px rgba(0, 0, 0, 0.09);

    .@{prefix}-tooltip-arrow-placeholder {
      position: absolute;
      top: 100%;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 7px 7px 0 7px;
      border-color: var(--kt-tooltip-background) transparent transparent transparent;

      &.@{prefix}-tooltip-reverse-arrow {
        top: auto !important;
        bottom: 100% !important;
        border-width: 0px 7px 7px 7px !important;
        border-color: transparent transparent var(--kt-tooltip-background) transparent !important;
      }
    }
  }
}
