/* 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;

/* https://css-tricks.com/books/greatest-css-tricks/scroll-shadows * /
@define-mixin scroll-shadows {
  --bgRGB: 73, 89, 99;
  --bg: rgb(var(--bgRGB));
  --bgTrans: rgba(var(--bgRGB), 0);
  --shadow: rgba(41, 50, 56, 0.5);
  background:
    linear-gradient(var(--bg) 30%, var(--bgTrans)) center top, // Shadow Cover TOP
    linear-gradient(var(--bgTrans), var(--bg) 70%) center bottom, // Shadow Cover BOTTOM
    radial-gradient(farthest-side at 50% 0, var(--shadow), rgba(0, 0, 0, 0)) center top, // Shadow TOP
    radial-gradient(farthest-side at 50% 100%, var(--shadow), rgba(0, 0, 0, 0)) center bottom; // Shadow BOTTOM
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
}*/

@property --bk-tooltip-background-color { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --bk-tooltip-border-color { syntax: '<color>'; inherits: true; initial-value: transparent; }

/* https://css-generators.com/tooltip-speech-bubble (#21) */
@mixin bk-tooltip-arrow {
  --arrow-pos: 50%; /* Arrow position (0% = left 100% = right) */

  --a: 90deg; // Triangle angle (how "sharp" is the arrow)
  --h: 1em; // Triangle height
  --p: var(--arrow-pos); // Triangle position (0% = left, 100% = right)
  --r: var(--bk-tooltip-border-radius); // Border radius
  --b: 1px; // Border width
  --c1: var(--bk-tooltip-border-color); // Border color
  --c2: var(--bk-tooltip-background-color); // Background color
  
  position: relative;
  background: var(--c1);
  
  &::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    padding: var(--b);
    border-radius: inherit;
    background: var(--c2) content-box;
  }
}
@mixin bk-tooltip-arrow-top {
  border-radius:
    min(var(--r), var(--p) - var(--h) * tan(var(--a)/2))
    min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a)/2))
    var(--r)
    var(--r)
    / var(--r);
  clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
    min(100%,var(--p) + var(--h)*tan(var(--a)/2)) 0,
    var(--p) calc(-1*var(--h)),
    max(0%  ,var(--p) - var(--h)*tan(var(--a)/2)) 0);
  border-image: conic-gradient(var(--c1) 0 0) fill 0/
    0 max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(0%,var(--p) - var(--h)*tan(var(--a)/2))/var(--h) 0 0 0;
  
  &::before {
    clip-path: polygon(0 0,0 100%,100% 100%,100% 0,
      min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)) var(--b),
      var(--p) calc(var(--b)/sin(var(--a)/2) - var(--h)),
      max(       var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)) var(--b));
    border-image: conic-gradient(var(--c2) 0 0) fill 0/
      0 max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(var(--b),var(--p) - var(--h)*tan(var(--a)/2))/var(--h) 0 0 0;
  }
}
@mixin bk-tooltip-arrow-right {
  border-radius:
    var(--r)
    / var(--r)
    min(var(--r), var(--p) - var(--h) * tan(var(--a)/2))
    min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2))
    var(--r);
  clip-path: polygon(100% 0,0 0,0 100%,100% 100%,
    100% min(100%,var(--p) + var(--h)*tan(var(--a)/2)),
    calc(100% + var(--h)) var(--p),
    100% max(0%  ,var(--p) - var(--h)*tan(var(--a)/2)));
  border-image: conic-gradient(var(--c1) 0 0) fill 0
    / max(0%,var(--p) - var(--h)*tan(var(--a)/2)) 0 max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r)/0 var(--h) 0 0;
  
  &::before {
    clip-path: polygon(100% 0,0 0,0 100%,100% 100%,
      calc(100% - var(--b)) min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)),
      calc(100% + var(--h) - var(--b)/sin(var(--a)/2)) var(--p),
      calc(100% - var(--b)) max(       var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)));
    border-image: conic-gradient(var(--c2) 0 0) fill 0
      / max(var(--b),var(--p) - var(--h)*tan(var(--a)/2)) 0 max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r)/0 var(--h) 0 0;
  }
}
@mixin bk-tooltip-arrow-bottom {
  border-radius:
    var(--r)
    var(--r)
    min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a)/2))
    min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2))
    / var(--r);
  clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
    min(100%,var(--p) + var(--h)*tan(var(--a)/2)) 100%,
    var(--p) calc(100% + var(--h)),
    max(0%  ,var(--p) - var(--h)*tan(var(--a)/2)) 100%);
  border-image: conic-gradient(var(--c1) 0 0) fill 0
    / var(--r) max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) 0 max(0%,var(--p) - var(--h)*tan(var(--a)/2))/0 0 var(--h) 0;
  
  &::before {
    clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
      min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)) calc(100% - var(--b)),
      var(--p) calc(100% + var(--h) - var(--b)/sin(var(--a)/2)),
      max(       var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)) calc(100% - var(--b)));
    border-image: conic-gradient(var(--c2) 0 0) fill 0
      / var(--r) max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) 0 max(var(--b),var(--p) - var(--h)*tan(var(--a)/2))/0 0 var(--h) 0;
  }
}
@mixin bk-tooltip-arrow-left {
  border-radius:
    var(--r)
    / min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2))
    var(--r)
    var(--r)
    min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2));
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%,
    0 min(100%,var(--p) + var(--h)*tan(var(--a)/2)),
    calc(-1*var(--h)) var(--p),
    0 max(0%  ,var(--p) - var(--h)*tan(var(--a)/2)));
  border-image: conic-gradient(var(--c1) 0 0) fill 0
    / max(0%,var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) 0/0 0 0 var(--h);
  
  &::before {
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%,
      var(--b) min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)),
      calc(var(--b)/sin(var(--a)/2) - var(--h)) var(--p),
      var(--b) max(       var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)));
    border-image: conic-gradient(var(--c2) 0 0) fill 0
      / max(var(--b),var(--p) - var(--h)*tan(var(--a)/2)) var(--r) max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) 0/0 0 0 var(--h);
  }
}

@layer baklava.components {
  .bk-tooltip {
    @include bk.component-base(bk-tooltip);
    
    --bk-tooltip-background-color: #{bk.$theme-tooltip-background-default};
    --bk-tooltip-border-color: #{bk.$theme-tooltip-border-default};
    --bk-tooltip-border-radius: #{bk.$radius-2};
    
    cursor: default;
    
    max-inline-size: 30rem;
    max-block-size: 8lh; /* Show about 8 lines of text before scrolling */
    /* Alternatively: https://floating-ui.com/docs/misc#handling-large-content
    max-inline-size: calc(100svw - bk.$spacing-2);
    max-block-size: calc(100svh - bk.$spacing-2);
    */
    
    padding: bk.$spacing-2;
    &:not(.bk-tooltip--compact) {
      padding: bk.$spacing-4;
      padding-block-end: bk.$spacing-7;
    }
    
    border-radius: bk.$radius-2;
    background: var(--bk-tooltip-background-color);
    border: 1px solid var(--bk-tooltip-border-color);
    
    &.bk-tooltip--small {
      inline-size: 140px;
    }
    &.bk-tooltip--medium {
      inline-size: 225px;
    }
    &.bk-tooltip--large {
      inline-size: 345px;
    }
    
    
    /* Tooltip arrow */
    
    --arrow-size: 7px;
    
    --h: 6px; /* Height of the triangle. Note: must match the `offset` in `useFloating()`. */
    --b: calc(var(--h) * 2); /* Base of the triangle */
    @include bk-tooltip-arrow;
    &.bk-tooltip--arrow { --keep: ; }
    &.bk-tooltip--arrow-top { @include bk-tooltip-arrow-top; }
    &.bk-tooltip--arrow-right { @include bk-tooltip-arrow-right; }
    &.bk-tooltip--arrow-bottom { @include bk-tooltip-arrow-bottom; }
    &.bk-tooltip--arrow-left { @include bk-tooltip-arrow-left; }
    
    /*
    &.bk-tooltip--arrow::before {
      content: '';
      border-bottom: 1px solid bk.$theme-tooltip-border-default;
      border-right: 1px solid bk.$theme-tooltip-border-default;
      background-color: bk.$theme-tooltip-background-default;
      position: absolute;
      inline-size: calc(2 * var(--arrow-size));
      block-size: calc(2 * var(--arrow-size));
    }
    &:is(.bk-tooltip--arrow-bottom, .bk-tooltip--arrow-top)::before {
      left: calc(50% - var(--arrow-size));
    }
    &.bk-tooltip--arrow-bottom::before {
      bottom: calc(-1 * (calc(var(--arrow-size) + 1px)));
      transform: rotate(45deg);
    }
    &.bk-tooltip--arrow-top::before {
      top: calc(-1 * (calc(var(--arrow-size) + 1px)));
      transform: rotate(-135deg);
    }
    &:is(.bk-tooltip--arrow-left, .bk-tooltip--arrow-right)::before {
      top: calc(50% - var(--arrow-size));
    }
    &.bk-tooltip--arrow-left::before {
      left: calc(-1 * (calc(var(--arrow-size) + 1px)));
      transform: rotate(135deg);
    }
    &.bk-tooltip--arrow-right::before {
      right: calc(-1 * (calc(var(--arrow-size) + 1px)));
      transform: rotate(-45deg);
    }
    */
    
    
    /* Content */
    
    display: flex;
    flex-direction: column;
    align-items: stretch;
    @include bk.text-layout;
    text-align: start;
    color: bk.$theme-tooltip-text-default;
    @include bk.font(bk.$font-family-body);
    font-size: bk.$font-size-s;
    
    .bk-tooltip__content {
      --keep: ;
    }
    
    .bk-tooltip__title {
      font-size: bk.$font-size-l;
      font-weight: bk.$font-weight-semibold;
    }
    
    .bk-tooltip__icon {
      font-size: 18px;
      margin-block-end: 10px;
    }
    
    .bk-tooltip__alert {
      color: bk.$theme-tooltip-text-error;
    }
  }
}
