@sandlada/mdc/build/components/tooltip/tooltip.style.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

import{css as e,unsafeCSS as t}from"../../node_modules/@lit/reactive-element/css-tag.js";import"../../node_modules/lit/index.js";import{defineVars as n}from"../../node_modules/@sandlada/jss/dist/define-vars.js";import{defineTokenRefsRecord as r}from"../../node_modules/@sandlada/jss/dist/define-token-refs.js";import{Easing as i}from"../../node_modules/@sandlada/mdk/build/domain/easing.js";import"../../node_modules/@sandlada/mdk/build/index.js";import{PlainTooltipDefinition as a,RichTooltipDefinition as o}from"../../component-definitions/tooltip.definition.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
const s=n(r(a,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-tooltip`}),!0).join(``),c=n(r(o,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-tooltip`}),!0).join(``),l=t(i.EmphasizedDecelerate.ToCSSValue()),u=t(i.EmphasizedAccelerate.ToCSSValue()),d=e`
    @layer mdc.tooltip.variable {
        :host(:not([rich])) { ${t(s)}; }
        :host([rich]) { ${t(c)}; }
    }

    @layer mdc.tooltip.base {
        :host {
            display: inline-block;
            position: absolute;
            z-index: 1000;
            pointer-events: none;
            max-width: max-content;
        }

        .container {
            box-sizing: border-box;
            opacity: 0;
            transform: scale(0.8);
            transform-origin: center center;
            pointer-events: none;
            will-change: transform, opacity;
        }

        :host([open]) .container {
            opacity: 1;
            transform: scale(1);
            pointer-events: auto;
            transition: transform 250ms ${l},
                        opacity 150ms ${l};
        }

        :host(.hiding) .container {
            opacity: 0;
            transform: scale(0.8);
            transition: transform 150ms ${u},
                        opacity 150ms ${u};
        }
    }

    @layer mdc.tooltip.base.plain {
        :host(:not([rich])) .container {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: var(--_container-padding-block) var(--_container-padding-inline);
            min-width: var(--_container-min-width);
            min-height: var(--_container-min-height);
            max-width: var(--_container-max-width);
            border-start-start-radius: var(--_container-shape-start-start);
            border-start-end-radius: var(--_container-shape-start-end);
            border-end-start-radius: var(--_container-shape-end-start);
            border-end-end-radius: var(--_container-shape-end-end);
            background-color: var(--_enabled-container-color);
            color: var(--_enabled-label-color);
            font-family: var(--_label-font);
            font-size: var(--_label-size);
            font-weight: var(--_label-weight);
            letter-spacing: var(--_label-tracking);
            line-height: var(--_label-line-height);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    @layer mdc.tooltip.base.rich {
        :host([rich]) .container {
            display: flex;
            flex-direction: column;
            padding: var(--_container-padding);
            max-width: var(--_container-max-width);
            border-start-start-radius: var(--_container-shape-start-start);
            border-start-end-radius: var(--_container-shape-start-end);
            border-end-start-radius: var(--_container-shape-end-start);
            border-end-end-radius: var(--_container-shape-end-end);
            background-color: var(--_enabled-container-color);
            color: var(--_enabled-label-color);
            box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
        }

        :host([rich]) .headline {
            font-family: var(--_headline-font);
            font-size: var(--_headline-size);
            font-weight: var(--_headline-weight);
            letter-spacing: var(--_headline-tracking);
            line-height: var(--_headline-line-height);
            color: var(--_enabled-headline-color);
            padding-bottom: var(--_headline-padding-block);
        }

        :host([rich]:not(.has-headline)) .headline {
            display: none;
        }

        :host([rich]) .content {
            font-family: var(--_label-font);
            font-size: var(--_label-size);
            font-weight: var(--_label-weight);
            letter-spacing: var(--_label-tracking);
            line-height: var(--_label-line-height);
            color: var(--_enabled-label-color);
        }

        :host([rich]) .actions {
            display: flex;
            justify-content: flex-end;
            gap: var(--_actions-gap);
            padding-top: var(--_actions-padding-block);
        }

        :host([rich]:not(.has-actions)) .actions {
            display: none;
        }
    }

    @layer mdc.tooltip.position {
        :host([position="top"]) {
            left: 50%;
            bottom: 100%;
            transform: translateX(-50%);
            margin-bottom: var(--_container-margin);
        }

        :host([position="bottom"]) {
            left: 50%;
            top: 100%;
            transform: translateX(-50%);
            margin-top: var(--_container-margin);
        }

        :host([position="left"]) {
            right: 100%;
            top: 50%;
            transform: translateY(-50%);
            margin-right: var(--_container-margin);
        }

        :host([position="right"]) {
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            margin-left: var(--_container-margin);
        }
    }

    @media (forced-colors: active) {
        .container {
            border: 1px solid CanvasText;
        }
    }
`;export{d as TooltipStyles};
//# sourceMappingURL=tooltip.style.js.map