// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "../../common/variables";
@import "../../common/typography-colors";
@import "../popover/common";
@import "./common";

$tooltip-arrow-box-shadow: 1px 1px 6px rgba($black, $pt-drop-shadow-opacity) !default;
$dark-tooltip-arrow-box-shadow: 1px 1px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default;

.#{$ns}-tooltip {
  @include popover-sizing(
    $arrow-square-size: 22px,
    $arrow-offset: 3px,
    $arrow-target-offset: -4px
  );
  @include popover-appearance(
    $tooltip-background-color,
    $tooltip-text-color,
    $pt-tooltip-box-shadow,
    $tooltip-arrow-box-shadow,
    $pt-border-shadow-opacity
  );
  // lightweight scale for tooltips
  @include react-transition(
    "#{$ns}-popover",
    (transform: scale(0.8) scale(1)),
    $duration: $pt-transition-duration,
    $after: "> &"
  );
  // override typography & icon colors because we use a dark background
  @include pt-dark-typography-colors();

  .#{$ns}-popover-content {
    padding: $tooltip-padding-vertical $tooltip-padding-horizontal;
  }

  &.#{$ns}-dark,
  .#{$ns}-dark & {
    @include popover-appearance(
      $dark-tooltip-background-color,
      $dark-tooltip-text-color,
      $pt-dark-tooltip-box-shadow,
      $dark-tooltip-arrow-box-shadow,
      $pt-dark-border-shadow-opacity
    );
    // override typography because we use a light background
    @include pt-typography-colors();
  }

  @each $intent, $color in $pt-intent-colors {
    &.#{$ns}-intent-#{$intent} {
      .#{$ns}-popover-content {
        background: $color;
        color: $white;
      }

      .#{$ns}-popover-arrow-fill {
        fill: $color;

        @media (forced-colors: active) and (prefers-color-scheme: dark) {
          // In Windows high contrast mode, just force the color to be the same as the border.
          fill: $pt-high-contrast-mode-border-color;
        }
      }
    }
  }
}

.#{$ns}-tooltip-indicator {
  border-bottom: dotted 1px;
  cursor: help;
}
