/**
 * Copyright Aquera Inc 2023
 *
 * 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';

/**
 * Tooltip CSS
 */
export const styles = css`
  :host {
    --max-width: 20rem;
    --hide-delay: 0ms;
    --show-delay: 150ms;
    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
    display: contents;
  }

  .tooltip {
    --arrow-size: var(--nile-height-6px, var(--ng-height-5px));
    --arrow-color: var(--nile-tooltip-color-background, var(--ng-colors-bg-primary-solid));
  }

  .tooltip::part(popup) {
    pointer-events: none;
    z-index: 1000;
  }

  .tooltip[placement^='top']::part(popup) {
    transform-origin: bottom;
  }

  .tooltip[placement^='bottom']::part(popup) {
    transform-origin: top;
  }

  .tooltip[placement^='left']::part(popup) {
    transform-origin: right;
  }

  .tooltip[placement^='right']::part(popup) {
    transform-origin: left;
  }

  .tooltip__body {
    display: block;
    width: max-content;
    max-width: var(--max-width);
    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
    background-color: var(--nile-tooltip-color-background, var(--ng-colors-bg-primary-solid));
    font-size: var(--nile-tooltip-font-size-sm, var(--ng-font-size-text-xs));
    font-weight: var(--nile-tooltip-font-weight-sm, var(--ng-font-weight-semibold));
    line-height: var(--nile-tooltip-line-height-sm, var(--ng-line-height-text-xs));
    padding: var(--nile-tooltip-padding-y, var(--ng-spacing-md)) var(--nile-tooltip-padding-x, var(--ng-spacing-md));
    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
    pointer-events: none;
    word-break: break-word;
    font-family: var(--nile-font-family-inherit, var(--ng-font-family-body));
    box-shadow:var(--nile-box-shadow-none, var(--ng-shadow-lg));
  }

  .tooltip__body--large {
    font-size: var(--nile-tooltip-font-size-lg);
    line-height: var(--nile-tooltip-line-height-lg);
    font-weight: var(--nile-tooltip-font-weight-lg);
  }
`;

export default [styles];