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

@use "sass:color";
@import "./common";

$popover2-width: $pt-grid-size * 35 !default;
$popover2-arrow-box-shadow: 1px 1px 6px rgba($black, $pt-drop-shadow-opacity) !default;
// Extra border shadow added here to match the one in $pt-dark-popover-box-shadow.
// We can't use a transparent color here because it is outset and will overlay other lines/borders underneath.
// Also, it needs to have slightly increased lightness because its apparent width makes it look darker otherwise.
$dark-popover2-arrow-box-shadow:
  0 0 0 1px color.adjust($pt-dark-popover-border-color, $lightness: 10%),
  1px 1px 6px rgba($black, $pt-dark-drop-shadow-opacity) !default;

.#{$ns}-popover2 {
  @include popover2-sizing(
    $arrow-square-size: 30px,
    $arrow-offset: 4px,
    $arrow-target-offset: -4px
  );
  @include popover2-appearance(
    $pt-popover2-background-color,
    inherit,
    $pt-popover2-box-shadow,
    $popover2-arrow-box-shadow,
    $pt-border-shadow-opacity
  );
  @include scale-transition();
  border-radius: $pt-border-radius;
  display: inline-block;
  z-index: $pt-z-index-overlay;

  .#{$ns}-popover2-content {
    border-radius: $pt-border-radius;
    position: relative;
  }

  &.#{$ns}-popover2-content-sizing {
    .#{$ns}-popover2-content {
      max-width: $popover2-width;
      padding: $pt-grid-size * 2;
    }

    // only inline popover2s get a width if this class is applied.
    // note that an inline overlay will be an immediate next sibling
    // of the popover2 target as of Blueprint 2.0.
    .#{$ns}-popover2-target + .#{$ns}-overlay & {
      width: $popover2-width;
    }
  }

  &.#{$ns}-minimal {
    // Popover2 with no obvious trigger will never have margin because the arrow is hidden,
    // so it is safe to remove.
    margin: 0 !important; /* stylelint-disable-line declaration-no-important */

    .#{$ns}-popover2-arrow {
      display: none;
    }

    &.#{$ns}-popover2 {
      @include react-transition(
        "#{$ns}-popover2",
        (transform: scale(1) scale(1)),
        $duration: $pt-transition-duration,
        $after: "> &"
      );
    }
  }

  &.#{$ns}-popover2-match-target-width {
    // parent element will have width styles set by our custom popper.js modifier,
    // so we should fill that container's width
    width: 100%;
  }

  &.#{$ns}-dark,
  .#{$ns}-dark & {
    @include popover2-appearance(
      $pt-dark-popover2-background-color,
      inherit,
      $pt-dark-popover2-box-shadow,
      $dark-popover2-arrow-box-shadow,
      $pt-dark-border-shadow-opacity
    );
  }
}

// the box-shadow under the arrow SVG paths
.#{$ns}-popover2-arrow::before {
  border-radius: $pt-border-radius - 1;
  content: "";
  display: block;
  position: absolute;
  transform: rotate(45deg);
}

// use a more specific selector to ensure that we override core's _overlay.scss styles
.#{$ns}-overlay-backdrop.#{$ns}-popover2-backdrop {
  background: rgba($white, 0);
}

.#{$ns}-popover2-transition-container {
  @include fade-transition();

  // ensure element size exactly equals its children, no edge-case 4px spacing!
  // (try removing this property with Slider content in example)
  display: flex;
  z-index: $pt-z-index-overlay;

  &:focus {
    outline: none;
  }

  // popover2 content should ignore pointer events during a popover2's exit transition
  &.#{$ns}-popover2-leave .#{$ns}-popover2-content {
    pointer-events: none;
  }

  // Popper.js applies this attribute when the target fully leaves boundaries
  // &[data-x-out-of-boundaries] {
  //   display: none;
  // }
}

span.#{$ns}-popover2-target {
  // avoid `inline` elements as they won't account for padding etc
  display: inline-block;

  // this is important for span tag as default inline display height only includes text.
  // div tag can be used for display: block, which works fine.
}

.#{$ns}-popover2-target {
  &.#{$ns}-fill {
    width: 100%;
  }
}
