import { r as registerInstance, h, H as Host, a as getElement } from './index-DBTJNfo7.js';
import { g as getRel } from './link-helper-5KsJICvh.js';
import { g as getMouseEventHandlers } from './3d-tilt-hover-effect-5eP2N9QI.js';

const shortcutCss = () => `@charset "UTF-8";:host(limel-shortcut){--badge-text-color:var(       --shortcut-badge-text-color,       rgb(var(--color-white))   );--badge-background-color:var(       --shortcut-badge-background-color,       rgb(var(--color-red-default))   );position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:0.0625rem}:host(limel-shortcut) *{box-sizing:border-box}:host(limel-shortcut[disabled]) a{opacity:0.5;box-shadow:unset;cursor:not-allowed}a{all:unset;text-align:center;height:calc(100% - 1rem);width:calc(100% - 1rem);padding:0.5rem;border-radius:var(--shortcut-border-radius, 1rem);background-color:var(--shortcut-background-color, var(--lime-elevated-surface-background-color))}limel-icon{display:flex;height:100%;width:100%;justify-content:center;color:var(--shortcut-icon-color, rgb(var(--contrast-1000)));border-radius:var(--shortcut-border-radius, 1rem)}span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;color:var(--shortcut-label-color, rgb(var(--contrast-1100)));font-size:0.75rem;text-align:center}limel-badge{position:absolute;top:-0.25rem;right:0.125rem}limel-3d-hover-effect-glow{border-radius:var(--shortcut-border-radius, 1rem)}:host(limel-shortcut){isolation:isolate;transform-style:preserve-3d;perspective:1000px}@media (prefers-reduced-motion){:host(limel-shortcut){perspective:2000px}}a{position:relative;transition-duration:0.8s;transition-property:transform, box-shadow, background-color;transition-timing-function:ease-out;transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg)}a:focus{outline:none}a:hover,a:focus,a:focus-visible,a:focus-within{will-change:background-color, box-shadow, transform}a:hover,a:focus,a:focus-visible,a:active{transition-duration:0.2s}a:hover,a:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}a:hover{transform:scale3d(1.01, 1.01, 1.01) rotate3d(var(--limel-3d-hover-effect-rotate3d))}a:focus-visible{outline:none;transform:scale3d(1.01, 1.01, 1.01)}a:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.5}@media (prefers-reduced-motion){a:hover limel-3d-hover-effect-glow{--limel-3d-hover-effect-glow-opacity:0.2}}a{cursor:pointer;box-shadow:var(--button-shadow-normal)}a:hover,a:focus-visible{box-shadow:var(--button-shadow-hovered), var(--shadow-depth-16)}a:active{transform:scale3d(1, 1, 1) rotate3d(0, 0, 0, 0deg);box-shadow:var(--button-shadow-pressed)}a:focus-visible{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-hovered)}a:focus-visible:active{box-shadow:var(--shadow-depth-8-focused), var(--button-shadow-pressed)}`;

const Shortcut = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * The text to show below the shortcut. Long label will be truncated.
         */
        this.label = null;
        /**
         * Set to `true` if shortcut is disabled.
         */
        this.disabled = false;
        this.renderLabel = () => {
            if (this.label) {
                return h("span", { "aria-hidden": "true" }, this.label);
            }
        };
        this.getAriaLabel = () => {
            var _a, _b;
            if (this.label && ((_a = this.link) === null || _a === void 0 ? void 0 : _a.title)) {
                return this.label + '. ' + this.link.title;
            }
            if (this.label) {
                return this.label;
            }
            if ((_b = this.link) === null || _b === void 0 ? void 0 : _b.title) {
                return this.link.title;
            }
        };
        this.renderNotification = () => {
            if (this.badge) {
                return h("limel-badge", { label: this.badge });
            }
        };
    }
    componentWillLoad() {
        const { handleMouseEnter, handleMouseLeave } = getMouseEventHandlers(this.host);
        this.handleMouseEnter = handleMouseEnter;
        this.handleMouseLeave = handleMouseLeave;
    }
    render() {
        var _a, _b, _c, _d, _e;
        const rel = getRel((_a = this.link) === null || _a === void 0 ? void 0 : _a.target, (_b = this.link) === null || _b === void 0 ? void 0 : _b.rel);
        return (h(Host, { key: '3a8b1065324570ae46d22a1974c34432692632dc', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("a", { key: 'a29c1d1e4c3bd0222762fb0675f01e9d12000ab7', "aria-disabled": this.disabled, href: (_c = this.link) === null || _c === void 0 ? void 0 : _c.href, target: (_d = this.link) === null || _d === void 0 ? void 0 : _d.target, rel: rel, tabindex: "0", "aria-label": this.getAriaLabel(), title: (_e = this.link) === null || _e === void 0 ? void 0 : _e.title }, h("limel-icon", { key: '1f1c964a055f6625ff0d67e6e1c7da182834d101', name: this.icon }), h("limel-3d-hover-effect-glow", { key: '45b45dd5a3c945c6662dbba504f2d2d43a87f1c4' })), this.renderLabel(), this.renderNotification()));
    }
    get host() { return getElement(this); }
};
Shortcut.style = shortcutCss();

export { Shortcut as limel_shortcut };
