@use "sass:math";
@use "variables";

[data-hidden] {
  display: none !important;
}

.fade-nt-tooltip-enter-active,
.fade-nt-tooltip-leave-active {
  transition: all 0.2s;
}

.fade-nt-tooltip-enter-from,
.fade-nt-tooltip-leave-to {
  opacity: 0;
}

#nt-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: variables.$ntBackdropBackground;
  z-index: variables.$ntBackdropZIndex;
}

#nt-tooltip {
  position: variables.$ntTooltipPosition;
  background-color: variables.$ntTooltipBackgroundColor;
  border: variables.$ntTooltipBorder;
  padding: variables.$ntTooltipPadding;
  box-shadow: variables.$ntTooltipBoxShadow;
  border-radius: variables.$ntTooltipBorderRadius;
  z-index: variables.$ntTooltipZIndex;
  max-width: variables.$ntTooltipMaxWidth;
  display: variables.$ntTooltipDisplay;
  flex-direction: variables.$ntTooltipFlexDirection;
  gap: variables.$ntTooltipGap;
}

.nt-center {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

#nt-tooltip-header {
  display: variables.$ntTooltipHeaderDisplay;
  flex-direction: variables.$ntTooltipHeaderFlexDirection;
  gap: variables.$ntTooltipHeaderGap;

  #nt-tooltip-title {
    font-size: variables.$ntTooltipTitleFontSize;
    line-height: variables.$ntTooltipTitleLineHeight;
    font-weight: variables.$ntTooltipTitleFontWeight;
    color: variables.$ntTooltipTitleColor;
  }

  #nt-tooltip-sub-text {
    line-height: variables.$ntTooltipSubTextLineHeight;
    font-size: variables.$ntTooltipSubTextFontSize;
    color: variables.$ntTooltipSubTextColor;
  }
}

#nt-tooltip-body {
  font-size: variables.$ntTooltipBodyFontSize;
  color: variables.$ntTooltipBodyColor;
}

#nt-tooltip[data-popper-placement^="top"] {
  #nt-arrow {
    bottom: math.div(-(variables.$ntTooltipArrowSize), 2);
    &::before {
      content: "";
      border-bottom: variables.$ntTooltipArrowBorder;
      border-right: variables.$ntTooltipArrowBorder;
    }
  }
}

#nt-tooltip[data-popper-placement^="bottom"] {
  #nt-arrow {
    top: math.div(-(variables.$ntTooltipArrowSize), 2);
    &::before {
      content: "";
      border-top: variables.$ntTooltipArrowBorder;
      border-left: variables.$ntTooltipArrowBorder;
    }
  }
}

#nt-tooltip[data-popper-placement^="left"] {
  #nt-arrow {
    right: math.div(-(variables.$ntTooltipArrowSize), 2);
    &::before {
      content: "";
      border-top: variables.$ntTooltipArrowBorder;
      border-right: variables.$ntTooltipArrowBorder;
    }
  }
}

#nt-tooltip[data-popper-placement^="right"] {
  #nt-arrow {
    left: math.div(-(variables.$ntTooltipArrowSize), 2);
    &::before {
      content: "";
      border-bottom: variables.$ntTooltipArrowBorder;
      border-left: variables.$ntTooltipArrowBorder;
    }
  }
}

#nt-arrow {
  width: variables.$ntTooltipArrowSize;
  height: variables.$ntTooltipArrowSize;
  position: absolute;
  z-index: -99;

  &::before {
    content: "";
    width: variables.$ntTooltipArrowSize;
    height: variables.$ntTooltipArrowSize;
    background-color: variables.$ntTooltipArrowBackgroundColor;
    transform: rotate(45deg);
    position: absolute;
  }
}

.nt-highlight {
  outline: variables.$ntHighlightOutline;
  outline-offset: variables.$ntHighlightOffset;
  border-radius: variables.$ntHighlightOutlineRadius;
}

.nt-actions {
  display: variables.$ntActionDisplay;
  gap: variables.$ntActionGap;
  align-items: variables.$ntActionAlignItems;
  gap: variables.$ntActionGap;
  margin-top: variables.$ntActionMarginTop;

  button {
    display: variables.$ntButtonDisplay;
    align-items: variables.$ntButtonAlignItems;
    justify-content: variables.$ntButtonJustifyContent;
    line-height: variables.$ntButtonLineHeight;
    gap: variables.$ntButtonGap;
    height: variables.$ntButtonHeight;
    padding: variables.$ntButtonPadding;
    border-radius: variables.$ntButtonBorderRadius;
    background-color: variables.$ntButtonBackgroundColor;
    color: variables.$ntButtonColor;
    font-size: variables.$ntButtonFontSize;
    font-weight: variables.$ntButtonFontWeight;
    transition: variables.$ntButtonTransition;
    white-space: nowrap;
    cursor: pointer;

    &#nt-action-skip {
      background-color: variables.$ntButtonSkipBackgroundColor;
      color: variables.$ntButtonSkipColor;
      border: variables.$ntButtonSkipBorder;

      &:hover {
        background-color: variables.$ntButtonSkipHoverBackgroundColor;
      }
    }

    &#nt-action-prev {
      background-color: variables.$ntButtonPrevBackgroundColor;
      color: variables.$ntButtonPrevColor;
      border: variables.$ntButtonPrevBorder;

      &:hover {
        background-color: variables.$ntButtonPrevHoverBackgroundColor;
        border-color: variables.$ntButtonPrevHoverBorderColor;
        color: variables.$ntButtonPrevHoverColor;
      }
    }

    &:hover {
      opacity: 0.85;
    }
  }
}
