<svelte:options
  customElement={{
    tag: 'm-tooltip',
    props: {
      pointer: { reflect: true, type: 'Boolean', attribute: 'pointer' },
      standalone: { reflect: true, type: 'Boolean', attribute: 'standalone' },
    },
  }}
/>

<script lang="ts">
  /**
   * A tooltip is a small, contextual message that appears when users hover over, focus on, or tap an element, providing additional information or guidance without cluttering the interface. Tooltips are commonly used to explain icons, abbreviations, or complex actions. They typically disappear automatically when the user moves away from the trigger element.
   *
   * @slot default - The tooltip will point to the content of the slot.
   */
  interface Props {
    [key: string]: any;
    /**
     * A unique identifier for the tooltip, used to describe the tooltip.
     */
    id: string;
    /**
     * Content of the tooltip.
     */
    text: string;
    /**
     * Determines the position of the tooltip.
     */
    position?: 'top' | 'bottom' | 'left' | 'right';
    /**
     * If `true`, the tooltip display a pointer.
     */
    pointer?: boolean;
    /**
     * Standalone tooltip
     */
    standalone?: boolean;
  }

  let {
    id,
    text,
    position = 'top',
    pointer = true,
    standalone,
    class: className,
    ...attrs
  }: Props = $props();
</script>

<div
  class={[
    'mc-tooltip',
    !pointer && 'mc-tooltip--no-pointer',
    `mc-tooltip--${position}`,
    standalone && 'mc-tooltip--standalone',
    className,
  ]}
  aria-describedby={id}
  {...attrs}
>
  <slot />
  <span {id} class="mc-tooltip__content" role="tooltip">
    {text}
  </span>
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-tooltip {
  display: inline-flex;
  position: relative;
}
.mc-tooltip:focus, .mc-tooltip:hover {
  cursor: help;
}
.mc-tooltip:focus .mc-tooltip__content, .mc-tooltip:hover .mc-tooltip__content {
  visibility: visible;
}
.mc-tooltip__content {
  font-size: var(--font-size-100, 0.875rem);
  border-radius: var(--border-radius-s, 0.25rem);
  line-height: var(--line-height-s, 1.3);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  align-items: center;
  max-width: 16rem;
  min-width: 4rem;
  background-color: var(--tooltip-color-background, #242938);
  box-sizing: border-box;
  color: var(--tooltip-color-text, #ffffff);
  position: absolute;
  text-align: center;
  visibility: hidden;
  z-index: var(--tooltip-z-index, 1);
  border: var(--border-width-s, 0.0625rem) solid var(--tooltip-color-border, #636d88);
  word-break: break-all;
  padding: 0.375rem 0.5rem;
}
@supports (width: max-content) {
  .mc-tooltip__content {
    width: max-content;
  }
}
.mc-tooltip__content::before {
  background-color: var(--tooltip-color-border, #636d88);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;
  content: "";
  height: 0.625rem;
  position: absolute;
  width: 0.625rem;
}
.mc-tooltip__content::after {
  background-color: var(--tooltip-color-background, #242938);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='0.5rem' width='0.5rem' viewBox='0 0 8 8'%3E%3Cpath d='M1.79 3.11l6.21-3.11v8l-6.21-3.11a1 1 0 0 1-.45-1.34 1 1 0 0 1 .45-.44z'/%3E%3C/svg%3E") no-repeat center/contain;
  content: "";
  height: 0.5rem;
  position: absolute;
  width: 0.5rem;
}
.mc-tooltip--top .mc-tooltip__content {
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% - 1rem));
}
.mc-tooltip--top .mc-tooltip__content::after, .mc-tooltip--top .mc-tooltip__content::before {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 100%) rotate(-90deg);
}
.mc-tooltip--top .mc-tooltip__content::before {
  bottom: -1px;
}
.mc-tooltip--right .mc-tooltip__content {
  top: 50%;
  right: 0;
  transform: translate(calc(100% + 1rem), -50%);
}
.mc-tooltip--right .mc-tooltip__content::after, .mc-tooltip--right .mc-tooltip__content::before {
  top: 50%;
  left: 0;
  transform: translate(-99%, -50%);
}
.mc-tooltip--right .mc-tooltip__content::before {
  left: -1px;
}
.mc-tooltip--left .mc-tooltip__content {
  left: 0;
  top: 50%;
  transform: translate(calc(-100% - 1rem), -50%);
}
.mc-tooltip--left .mc-tooltip__content::after, .mc-tooltip--left .mc-tooltip__content::before {
  top: 50%;
  right: 0;
  transform: translate(99%, -50%) rotate(180deg);
}
.mc-tooltip--left .mc-tooltip__content::before {
  right: -1px;
}
.mc-tooltip--bottom .mc-tooltip__content {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, calc(100% + 1rem));
}
.mc-tooltip--bottom .mc-tooltip__content::after, .mc-tooltip--bottom .mc-tooltip__content::before {
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%) rotate(90deg);
}
.mc-tooltip--bottom .mc-tooltip__content::before {
  top: -1px;
}
.mc-tooltip--no-pointer .mc-tooltip__content::after, .mc-tooltip--no-pointer .mc-tooltip__content::before {
  background: none;
}
.mc-tooltip--standalone {
  cursor: help;
}
.mc-tooltip--standalone .mc-tooltip__content {
  visibility: visible;
  position: relative;
  transform: none;
  top: 0;
  left: 0;
}</style>
