@import "variable";
// tooltip css
.dnxte_dashb_tool_tip {
  position: relative;
  cursor: pointer;
  display: inline-block;

  i {
    color: #adb5bd;
    margin-left: 4px;
    font-size: 16px;
    margin-top: 1px;

    &:hover {
      color: #495057;
    }
  }

  &::before {
    width: 0;
    height: 0;
    content: "";

    @media only screen and (max-width: 991px) {
      display: none;
    }
  }

  &::before,
  &::after {
    position: absolute;
    transition:
      opacity 250ms ease 0ms,
      transform 250ms ease 0ms;
    transform-style: preserve-3d;
    opacity: 0;
    z-index: -1;
  }

  &::after {
    font-size: 12px;
    line-height: 14px;
    background-color: $dash-main-title;
    border-radius: 4px;
    color: $dash-white;
    content: attr(data-tooltip-title) " ";
    font-weight: 500;
    width: 224px;
    padding: 8px 12px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    text-transform: none;
  }

  &[data-tooltip-position="top"]::before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    left: 50%;
    transform: translate3d(-50%, 10px, 0);
    border-top: 7px solid #323a45;
    bottom: calc(100% + 3px);
  }

  &[data-tooltip-position="top"]::after {
    left: 50%;
    transform: translate3d(-40%, 10px, 0);
    bottom: calc(100% + 10px);

    @media only screen and (max-width: 991px) {
      left: 30%;
      transform: translate3d(-30%, 10px, 0);
    }
  }

  &:hover::before,
  &:hover::after {
    opacity: 1;
    z-index: 10;
  }

  &[data-tooltip-position="top"]:hover::before,
  &[data-tooltip-position="top"]:hover::after {
    transform: translate3d(-40%, 0px, 0);

    @media only screen and (max-width: 991px) {
      transform: translate3d(-30%, 0px, 0);
    }
  }
}

.dnxte_dashb_notification {
  [data-tooltip-position="bottom"]::after {
    left: 50%;
  }

  [data-tooltip-position="bottom"]::after {
    transform: translate3d(-50%, -10px, 0);
  }

  [data-tooltip-position="bottom"]::after {
    top: calc(100% + 10px);
  }

  [data-tooltip-position="bottom"]::before {
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    left: 50%;
  }

  [data-tooltip-position="bottom"]::before {
    transform: translate3d(-50%, -10px, 0);
  }

  [data-tooltip-position="bottom"]::before {
    border-bottom: 7px solid #323a45;
    top: calc(100% + 3px);
  }

  [data-tooltip-position="bottom"]:hover::before,
  [data-tooltip-position="bottom"]:hover::after {
    transform: translate3d(-50%, 0px, 0);
  }
}

// bottom