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

@import "@blueprintjs/core/src/common/typography-colors";
@import "./common";

$tooltip2-background-color: $dark-gray5 !default;
$tooltip2-text-color: $light-gray5 !default;

$dark-tooltip2-background-color: $light-gray3 !default;
$dark-tooltip2-text-color: $dark-gray5 !default;

$tooltip2-padding-vertical: $pt-grid-size !default;
$tooltip2-padding-horizontal: 1.2 * $pt-grid-size !default;

$tooltip2-padding-compact-vertical: 0.5 * $pt-grid-size !default;
$tooltip2-padding-compact-horizontal: 0.7 * $pt-grid-size !default;

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

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

  .#{$ns}-popover2-content {
    padding: $tooltip2-padding-vertical $tooltip2-padding-horizontal;
  }

  &.#{$ns}-compact {
    .#{$ns}-popover2-content {
      line-height: 1rem; // ensure a consistent line height
      padding: $tooltip2-padding-compact-vertical $tooltip2-padding-compact-horizontal;
    }

    // Compact tooltip content is usually just a single line with default line-height, where the slight vertical
    // misalignment of <Code> spans inside text stands out more than it does elsewhere in the design system. We apply
    // a small typographic adjustment here to counteract this problem.
    // TODO(adahiya): consider applying this more broadly to fix the root problem...
    .#{$ns}-code {
      vertical-align: text-bottom;
    }
  }

  // need to adjust arrow placement a little bit for tooltips
  &.#{$ns}-popover2-placement-top .#{$ns}-popover2-arrow { transform: translateY(-3px); }
  &.#{$ns}-popover2-placement-left .#{$ns}-popover2-arrow { transform: translateX(-3px); }
  &.#{$ns}-popover2-placement-bottom .#{$ns}-popover2-arrow { transform: translateY(3px); }
  &.#{$ns}-popover2-placement-right .#{$ns}-popover2-arrow { transform: translateX(3px); }

  &.#{$ns}-dark,
  .#{$ns}-dark & {
    @include popover2-appearance(
      $dark-tooltip2-background-color,
      $dark-tooltip2-text-color,
      $pt-dark-tooltip2-box-shadow,
      $dark-tooltip2-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}-popover2-content {
        background: $color;
        color: $white;
      }

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

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