/* Copyright (c) Fortanix, Inc.
|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@use '../../../styling/defs.scss' as bk;

// Anchor positioning
@position-try --bk-tooltip-position-top {
  margin-block: var(--bk-app-layout-header-height) 6px; // Compensate for layout header
  /* position-area: top; */
  inset-block-end: anchor(top);
  justify-self: anchor-center;
}
@position-try --bk-tooltip-position-bottom {
  margin-block-start: 6px;
  /* position-area: bottom; */
  justify-self: anchor-center;
  inset-block-start: anchor(bottom);
}
@position-try --bk-tooltip-position-left {
  justify-self: anchor-center;
  inset-inline-end: anchor(left);
}
@position-try --bk-tooltip-position-right {
  justify-self: anchor-center;
  inset-inline-start: anchor(right);
}

@layer baklava.components {
  .bk-tooltip-provider__tooltip {
    &[popover] {
      &:not(:popover-open) { display: none; }
      
      inset: auto; // Note: future versions of Chrome should have this by default
      position: fixed;
      //position-anchor: --anchor-1; // Needs to be set dynamically
      
      // Anchor positioning
      position-try-fallbacks:
        --bk-tooltip-position-top,
        --bk-tooltip-position-bottom,
        --bk-tooltip-position-left,
        --bk-tooltip-position-right;
      
      filter: drop-shadow(4px 4px 4px rgb(50 50 50 / 30%));
      
      @media (prefers-reduced-motion: no-preference) {
        --transition-duration: 80ms; // Close transition
        transition:
          display var(--transition-duration) allow-discrete,
          overlay var(--transition-duration) allow-discrete,
          opacity var(--transition-duration) ease-out,
          translate var(--transition-duration) ease-out;
          //transform // Note: don't animate `transform` with floating-ui, since it relies on it for positioning
        opacity: 0;
        translate: 0 0.3rem;
      }
      
      &:popover-open {
        --transition-duration: 120ms; // Open transition
        
        opacity: 1;
        translate: none;
        
        @starting-style {
          opacity: 0;
          translate: 0 0.3rem;
        }
      }
    }
  }
}
