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

export const styles = css`
  nile-floating-panel {
    display: inline-block;
  }

  .tippy-box[data-theme~='floating-panel'] {
    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
    border: solid 1px var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
    box-shadow: var(--nile-box-shadow-2, var(--ng-shadow-lg));
    padding: 0;
    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
    line-height: 1.4;
    white-space: normal;
    outline: 0;
    transition-property: transform, visibility, opacity;
  }

  .tippy-box[data-theme~='floating-panel'][data-animation='fade'][data-state='hidden'] {
    opacity: 0;
  }

  .tippy-box[data-theme~='floating-panel'][data-inertia][data-state='visible'] {
    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
  }

  .tippy-box[data-theme~='floating-panel'] > .tippy-content {
    position: relative;
    z-index: 1;
    padding: 0;
  }

  .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow {
    fill: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
  }

  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow {
    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
  }

  .nile-floating-panel__body {
    display: flex;
    flex-direction: column;
    height: auto;
    min-width: var(--nile-width-352px, var(--ng-width-80));
    gap: var(--nile-spacing-xl, var(--ng-spacing-xl));
    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
  }

  .nile-floating-panel__title {
    display: block;
    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-sm));
    font-style: normal;
    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
    letter-spacing: var(--nile-spacing-one-by-five-x, var(--ng-spacing-none));
  }

  .nile-floating-panel__title:empty {
    display: none;
  }

  .nile-floating-panel__action {
    align-self: end;
    display: inline;
  }

  .nile-floating-panel__action:empty {
    display: none;
  }

  /* Offset arrow by 0.5px so its outline aligns with the panel border and its fill fully covers it. */
  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow { bottom: 0; }
  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-svg-arrow > svg {
    top: 15.5px;
    transform: rotate(180deg);
  }
  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-svg-arrow { top: 0; }
  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-svg-arrow > svg { bottom: 15.5px; }
  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow { right: 0; }
  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-svg-arrow > svg {
    transform: rotate(90deg);
    top: calc(50% - 3.5px);
    left: 11px;
  }
  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow { left: 0; }
  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-svg-arrow > svg {
    transform: rotate(-90deg);
    top: calc(50% - 3.5px);
    right: 11px;
  }

  .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow {
    width: 16px;
    height: 16px;
    text-align: initial;
    position: absolute;
  }

  .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow > svg {
    position: absolute;
    overflow: visible;
  }

  .tippy-box[data-theme~='floating-panel'] > .tippy-svg-arrow > svg > .nile-floating-panel__arrow-outline {
    fill: none;
    stroke: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-arrow {
    bottom: 0;
  }
  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-arrow:before {
    bottom: -7px;
    border-width: 8px 8px 0;
    border-top-color: initial;
  }
  .tippy-box[data-theme~='floating-panel'][data-placement^='top'] > .tippy-arrow:after {
    bottom: -8px;
    left: -1px;
    border-width: 9px 9px 0;
    border-top-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
    clip-path: inset(2px 0 0 0);
  }
  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-arrow {
    top: 0;
  }
  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-arrow:before {
    top: -7px;
    border-width: 0 8px 8px;
    border-bottom-color: initial;
  }
  .tippy-box[data-theme~='floating-panel'][data-placement^='bottom'] > .tippy-arrow:after {
    top: -8px;
    left: -1px;
    border-width: 0 9px 9px;
    border-bottom-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
    clip-path: inset(0 0 2px 0);
  }
  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-arrow {
    right: 0;
  }
  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-arrow:before {
    right: -7px;
    border-width: 8px 0 8px 8px;
    border-left-color: initial;
  }
  .tippy-box[data-theme~='floating-panel'][data-placement^='left'] > .tippy-arrow:after {
    right: -8px;
    top: -1px;
    border-width: 9px 0 9px 9px;
    border-left-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
    clip-path: inset(0 0 0 2px);
  }
  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-arrow {
    left: 0;
  }
  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-arrow:before {
    left: -7px;
    border-width: 8px 8px 8px 0;
    border-right-color: initial;
  }
  .tippy-box[data-theme~='floating-panel'][data-placement^='right'] > .tippy-arrow:after {
    left: -8px;
    top: -1px;
    border-width: 9px 9px 9px 0;
    border-right-color: var(--nile-colors-dark-200, var(--ng-colors-border-secondary-alt));
    clip-path: inset(0 2px 0 0);
  }

  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow {
    width: 16px;
    height: 16px;
    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
  }
  /* :after is a 1px-larger triangle in the border colour, stacked behind :before, so the border continues around the arrow. */
  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:before,
  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:after {
    content: '';
    position: absolute;
    border-color: transparent;
    border-style: solid;
  }
  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:before { z-index: 1; }
  .tippy-box[data-theme~='floating-panel'] > .tippy-arrow:after { z-index: 0; }
`;

export function injectGlobalFloatingPanelStyles(): void {
  if (typeof document === 'undefined') return;

  const STYLE_ID = 'nile-floating-panel-styles';
  if (document.getElementById(STYLE_ID)) return;

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

injectGlobalFloatingPanelStyles();

export default [styles];