/**
* Copyright Aquera Inc 2025
*
* This source code is licensed under the BSD-3-Clause license found in the
* LICENSE file in the root directory of this source tree.
*/

import {css} from 'lit';

/**
 * LightTooltip CSS
 */
export const styles = css`
  :host { }

  .tippy-box[data-animation=fade][data-state=hidden] { opacity: 0; }
  [data-tippy-root] { max-width: calc(100vw - 10px); }

  .tippy-box {
    position: relative;
    background-color: var(--nile-colors-dark-900, var(--ng-colors-bg-primary-solid));
    color: var(--nile-colors-dark-200, var(--ng-colors-text-white));
    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-xs));
    line-height: 1.4;
    white-space: normal;
    outline: 0;
    transition-property: transform, visibility, opacity;
    padding: var(--nile-spacing-xs, var(--ng-spacing-md)) var(--nile-spacing-sm, var(--ng-spacing-lg));
    box-shadow: 0px 12px 16px -4px #0A0D1214, 0px 4px 6px -2px #0A0D1208, 0px 2px 2px -1px #0A0D120A;
   }

 
  .tippy-box[data-placement^=top] > .tippy-arrow { bottom: 0; }
  .tippy-box[data-placement^=top] > .tippy-arrow:before {
    bottom: -7px;
    border-width: 8px 8px 0;
    border-top-color: initial;
  }

  .tippy-box[data-placement^=bottom] > .tippy-arrow { top: 0; }
  .tippy-box[data-placement^=bottom] > .tippy-arrow:before {
    top: -7px;
    border-width: 0 8px 8px;
    border-bottom-color: initial;
  }

  .tippy-box[data-placement^=left] > .tippy-arrow { right: 0; }
  .tippy-box[data-placement^=left] > .tippy-arrow:before {
    right: -7px;
    border-width: 8px 0 8px 8px;
    border-left-color: initial;
  }

  .tippy-box[data-placement^=right] > .tippy-arrow { left: 0; }
  .tippy-box[data-placement^=right] > .tippy-arrow:before {
    left: -7px;
    border-width: 8px 8px 8px 0;
    border-right-color: initial;
  }

  .tippy-box[data-inertia][data-state=visible] {
    transition-timing-function: cubic-bezier(.54, 1.5, .38, 1.11);
  }

  .tippy-box.large { font-size: 16px; padding: 8px 12px; }
  .tippy-arrow { width: 16px; height: 16px; color: #333; }
  .tippy-arrow:before {
    content: "";
    position: absolute;
    border-color: transparent;
    border-style: solid;
  }

  .tippy-content {
    position: relative;
    z-index: 1;
  }

  .tippy-box[data-placement^=top] > .tippy-svg-arrow { bottom: 0; }
  .tippy-box[data-placement^=top] > .tippy-svg-arrow:after,
  .tippy-box[data-placement^=top] > .tippy-svg-arrow > svg {
    top: 16px;
    transform: rotate(180deg);
  }
  .tippy-box[data-placement^=bottom] > .tippy-svg-arrow { top: 0; }
  .tippy-box[data-placement^=bottom] > .tippy-svg-arrow > svg { bottom: 16px; }
  .tippy-box[data-placement^=left] > .tippy-svg-arrow { right: 0; }
  .tippy-box[data-placement^=left] > .tippy-svg-arrow:after,
  .tippy-box[data-placement^=left] > .tippy-svg-arrow > svg {
    transform: rotate(90deg);
    top: calc(50% - 3px);
    left: 11px;
  }
  .tippy-box[data-placement^=right] > .tippy-svg-arrow { left: 0; }
  .tippy-box[data-placement^=right] > .tippy-svg-arrow:after,
  .tippy-box[data-placement^=right] > .tippy-svg-arrow > svg {
    transform: rotate(-90deg);
    top: calc(50% - 3px);
    right: 11px;
  }

  .tippy-svg-arrow {
    width: 16px;
    height: 16px;
    fill: var(--nile-colors-dark-900, var(--ng-colors-bg-primary-solid));
    text-align: initial;
    position: absolute;
  }

  .tippy-svg-arrow > svg {
    position: absolute;
  }
`;


export function injectGlobalTippyStyles(): void {
  const STYLE_ID = 'nile-lite-tooltip-styles';
  if (document.getElementById(STYLE_ID)) return;

  const style = document.createElement('style');
  style.id = STYLE_ID;
  style.textContent = styles.cssText;
  document.head.appendChild(style);
}
 
injectGlobalTippyStyles();

export default [styles];