@cfx-dev/ui-components 2.1.23 → 3.0.0

package/dist/main.js

@@ -1,153 +1,157 @@
 import { mergeRefs as t } from "./utils/mergeRefs.js";
 import { clsx as f } from "./utils/clsx.js";
-import { getValue as m } from "./utils/getValue.js";
+import { getValue as x } from "./utils/getValue.js";
 import { usePopoverController as l } from "./utils/hooks/usePopoverController.js";
 import { useInstance as i } from "./utils/hooks/useInstance.js";
 import { useDynamicRef as u } from "./utils/hooks/useDynamicRef.js";
 import { useGlobalKeyboardEvent as d } from "./utils/hooks/useGlobalKeyboardEvent.js";
 import { useKeyboardClose as T } from "./utils/hooks/useKeyboardClose.js";
-import { useWindowResize as B } from "./utils/hooks/useWindowResize.js";
+import { useWindowResize as g } from "./utils/hooks/useWindowResize.js";
 import { useOutlet as C } from "./utils/hooks/useOutlet.js";
-import { CLIPBOARD_TITLE_APPEARANCE as y, useClipboardComponent as R } from "./utils/hooks/useClipboardComponent.js";
-import { identity as k, invoke as A, noop as O, returnFalse as P, returnTrue as E } from "./utils/functional.js";
-import { Linkify as _, defaultLinkReplacer as h, defaultLinkReplacerx as v, isExternalUrl as F, linkify as U, linkifyx as z, matchLinkNodes as K, matchLinks as N } from "./utils/links.js";
+import { CLIPBOARD_TITLE_APPEARANCE as S, useClipboardComponent as y } from "./utils/hooks/useClipboardComponent.js";
+import { identity as b, invoke as A, noop as O, returnFalse as P, returnTrue as E } from "./utils/functional.js";
+import { Linkify as _, defaultLinkReplacer as h, defaultLinkReplacerx as v, isExternalUrl as F, linkify as U, linkifyx as N, matchLinkNodes as z, matchLinks as K } from "./utils/links.js";
 import { clamp as w, clamp01 as G } from "./utils/math.js";
 import { isFalseString as H, isTrueString as M, normalizeSlashes as W, replaceRange as j, splitByIndices as q, unicodeCharAt as J } from "./utils/string.js";
 import { debounce as X, throttle as Z } from "./utils/execution.js";
 import { getColor as oo } from "./utils/color.js";
 import { default as eo } from "./components/IconButton/IconButton.js";
-import { Accordion as po, AccordionContent as fo, AccordionHeader as xo, AccordionItem as mo, AccordionTrigger as ao } from "./components/Accordion/Accordion.js";
+import { Accordion as po, AccordionContent as fo, AccordionHeader as mo, AccordionItem as xo, AccordionTrigger as ao } from "./components/Accordion/Accordion.js";
 import { default as no } from "./components/ClipboardButton/ClipboardButton.js";
 import { default as so } from "./components/Checkbox/Checkbox.js";
 import { Button as co } from "./components/Button/Button.js";
 import { LinkButton as To } from "./components/Button/LinkButton.js";
-import { ButtonBar as Bo } from "./components/Button/ButtonBar.js";
-import { Avatar as Co } from "./components/Avatar/Avatar.js";
-import { BACKDROP_OUTLET_ID as yo, BackdropPortal as Ro } from "./components/BackdropPortal/BackdropPortal.js";
-import { Badge as ko } from "./components/Badge/Badge.js";
-import { ControlBox as Oo } from "./components/ControlBox/ControlBox.js";
-import { CountryFlag as Eo } from "./components/CountryFlag/CountryFlag.js";
-import { Decorate as _o } from "./components/Decorate/Decorate.js";
-import { Dot as vo } from "./components/Dot/Dot.js";
-import { FLYOUT_OUTLET_ID as Uo, Flyout as zo } from "./components/Flyout/Flyout.js";
-import { Logos as No } from "./components/Logos/index.js";
-import { I as wo } from "./cfxIcons-BlbKR-zU.js";
-import { I as Yo } from "./cfxIconsBig-BLJjMT-Y.js";
-import { Icon as Mo } from "./components/Icon/Icon.js";
-import { IconBig as jo } from "./components/IconBig/IconBig.js";
-import { Indicator as Jo } from "./components/Indicator/Indicator.js";
-import { default as Xo } from "./components/InfoPanel/InfoPanel.js";
-import { default as $o } from "./components/Input/Input.js";
-import { default as rr } from "./components/Input/RichInput.js";
-import { Interactive as tr } from "./components/Interactive/Interactive.js";
-import { Island as fr } from "./components/Island/Island.js";
-import { Box as mr } from "./components/Layout/Box/Box.js";
-import { Center as lr } from "./components/Layout/Center/Center.js";
-import { Flex as ir } from "./components/Layout/Flex/Flex.js";
-import { FlexRestricter as ur } from "./components/Layout/Flex/FlexRestricter.js";
-import { Pad as dr } from "./components/Layout/Pad/Pad.js";
-import { Page as Tr } from "./components/Layout/Page/Page.js";
-import { R as Br } from "./Rail-nVRissv6.js";
-import { Scrollable as Cr } from "./components/Layout/Scrollable/Scrollable.js";
-import { VirtualScrollable as yr } from "./components/Layout/Scrollable/VirtualScrollable.js";
-import { Loaf as br } from "./components/Loaf/Loaf.js";
-import { Modal as Ar } from "./components/Modal/Modal.js";
-import { NavList as Pr } from "./components/NavList/NavList.js";
-import { OVERLAY_OUTLET_ID as Dr, Overlay as _r } from "./components/Overlay/Overlay.js";
-import { Popover as vr } from "./components/Popover/Popover.js";
-import { PremiumBadge as Ur } from "./components/PremiumBadge/PremiumBadge.js";
-import { Prose as Kr } from "./components/Prose/Prose.js";
-import { Radio as Vr } from "./components/Radio/Radio.js";
-import { Select as Gr } from "./components/Select/Select.js";
-import { Separator as Hr } from "./components/Separator/Separator.js";
-import { Shroud as Wr } from "./components/Shroud/Shroud.js";
-import { Spacer as qr } from "./components/Spacer/Spacer.js";
-import { Style as Qr, useContextualStyle as Xr } from "./components/Style/Style.js";
-import { default as $r } from "./components/Switch/Switch.js";
-import { ToggleGroup as re } from "./components/ToggleGroup/ToggleGroup.js";
-import { Tabular as te } from "./components/Tabular/Tabular.js";
-import { Table as fe, TableIconButton as xe } from "./components/Table/Table.js";
-import { Text as ae, TextBlock as le, getTextOpacity as ne } from "./components/Text/Text.js";
-import { Textarea as se } from "./components/Textarea/Textarea.js";
-import { TITLE_OUTLET_ID as ce, Title as de } from "./components/Title/Title.js";
-import { default as Te } from "./components/InputDropzone/InputDropzone.js";
+import { default as go, getLinkClassName as Bo } from "./components/Link/Link.js";
+import { default as ko } from "./components/Link/ButtonLink.js";
+import { ButtonBar as yo } from "./components/Button/ButtonBar.js";
+import { Avatar as bo } from "./components/Avatar/Avatar.js";
+import { BACKDROP_OUTLET_ID as Oo, BackdropPortal as Po } from "./components/BackdropPortal/BackdropPortal.js";
+import { Badge as Do } from "./components/Badge/Badge.js";
+import { ControlBox as ho } from "./components/ControlBox/ControlBox.js";
+import { CountryFlag as Fo } from "./components/CountryFlag/CountryFlag.js";
+import { Decorate as No } from "./components/Decorate/Decorate.js";
+import { Dot as Ko } from "./components/Dot/Dot.js";
+import { FLYOUT_OUTLET_ID as wo, Flyout as Go } from "./components/Flyout/Flyout.js";
+import { Logos as Ho } from "./components/Logos/index.js";
+import { I as Wo } from "./cfxIcons-BlbKR-zU.js";
+import { I as qo } from "./cfxIconsBig-BLJjMT-Y.js";
+import { Icon as Qo } from "./components/Icon/Icon.js";
+import { IconBig as Zo } from "./components/IconBig/IconBig.js";
+import { Indicator as or } from "./components/Indicator/Indicator.js";
+import { default as er } from "./components/InfoPanel/InfoPanel.js";
+import { default as pr } from "./components/Input/Input.js";
+import { default as mr } from "./components/Input/RichInput.js";
+import { Interactive as ar } from "./components/Interactive/Interactive.js";
+import { Island as nr } from "./components/Island/Island.js";
+import { Box as sr } from "./components/Layout/Box/Box.js";
+import { Center as cr } from "./components/Layout/Center/Center.js";
+import { Flex as Ir } from "./components/Layout/Flex/Flex.js";
+import { FlexRestricter as Lr } from "./components/Layout/Flex/FlexRestricter.js";
+import { Pad as Br } from "./components/Layout/Pad/Pad.js";
+import { Page as kr } from "./components/Layout/Page/Page.js";
+import { R as yr } from "./Rail-XT5PwAlx.js";
+import { Scrollable as br } from "./components/Layout/Scrollable/Scrollable.js";
+import { VirtualScrollable as Or } from "./components/Layout/Scrollable/VirtualScrollable.js";
+import { Loaf as Er } from "./components/Loaf/Loaf.js";
+import { Modal as _r } from "./components/Modal/Modal.js";
+import { NavList as vr } from "./components/NavList/NavList.js";
+import { OVERLAY_OUTLET_ID as Ur, Overlay as Nr } from "./components/Overlay/Overlay.js";
+import { Popover as Kr } from "./components/Popover/Popover.js";
+import { PremiumBadge as wr } from "./components/PremiumBadge/PremiumBadge.js";
+import { Prose as Yr } from "./components/Prose/Prose.js";
+import { Radio as Mr } from "./components/Radio/Radio.js";
+import { Select as jr } from "./components/Select/Select.js";
+import { Separator as Jr } from "./components/Separator/Separator.js";
+import { Shroud as Xr } from "./components/Shroud/Shroud.js";
+import { Spacer as $r } from "./components/Spacer/Spacer.js";
+import { Style as re, useContextualStyle as ee } from "./components/Style/Style.js";
+import { default as pe } from "./components/Switch/Switch.js";
+import { ToggleGroup as me } from "./components/ToggleGroup/ToggleGroup.js";
+import { Tabular as ae } from "./components/Tabular/Tabular.js";
+import { Table as ne, TableIconButton as ie } from "./components/Table/Table.js";
+import { Text as ue, TextBlock as ce, getTextOpacity as de } from "./components/Text/Text.js";
+import { Textarea as Te } from "./components/Textarea/Textarea.js";
+import { TITLE_OUTLET_ID as ge, Title as Be } from "./components/Title/Title.js";
+import { default as ke } from "./components/InputDropzone/InputDropzone.js";
 import "./components/InputDropzone/ItemPreview.js";
-import { default as Be } from "./components/Skeleton/Skeleton.js";
-import { OnScreenSensor as Ce } from "./components/OnScreenSensor.js";
-import { ui as ye } from "./components/ui.js";
-import { Symbols as be } from "./components/Symbols.js";
+import { default as ye } from "./components/Skeleton/Skeleton.js";
+import { OnScreenSensor as be } from "./components/OnScreenSensor.js";
+import { ui as Oe } from "./components/ui.js";
+import { Symbols as Ee } from "./components/Symbols.js";
 export {
   po as Accordion,
   fo as AccordionContent,
-  xo as AccordionHeader,
-  mo as AccordionItem,
+  mo as AccordionHeader,
+  xo as AccordionItem,
   ao as AccordionTrigger,
-  Co as Avatar,
-  yo as BACKDROP_OUTLET_ID,
-  Ro as BackdropPortal,
-  ko as Badge,
-  mr as Box,
+  bo as Avatar,
+  Oo as BACKDROP_OUTLET_ID,
+  Po as BackdropPortal,
+  Do as Badge,
+  sr as Box,
   co as Button,
-  Bo as ButtonBar,
-  y as CLIPBOARD_TITLE_APPEARANCE,
-  lr as Center,
+  yo as ButtonBar,
+  ko as ButtonLink,
+  S as CLIPBOARD_TITLE_APPEARANCE,
+  cr as Center,
   so as Checkbox,
   no as ClipboardButton,
-  Oo as ControlBox,
-  Eo as CountryFlag,
-  _o as Decorate,
-  vo as Dot,
-  Uo as FLYOUT_OUTLET_ID,
-  ir as Flex,
-  ur as FlexRestricter,
-  zo as Flyout,
-  Mo as Icon,
-  jo as IconBig,
+  ho as ControlBox,
+  Fo as CountryFlag,
+  No as Decorate,
+  Ko as Dot,
+  wo as FLYOUT_OUTLET_ID,
+  Ir as Flex,
+  Lr as FlexRestricter,
+  Go as Flyout,
+  Qo as Icon,
+  Zo as IconBig,
   eo as IconButton,
-  wo as Icons,
-  Yo as IconsBig,
-  Jo as Indicator,
-  Xo as InfoPanel,
-  $o as Input,
-  Te as InputDropzone,
-  tr as Interactive,
-  fr as Island,
+  Wo as Icons,
+  qo as IconsBig,
+  or as Indicator,
+  er as InfoPanel,
+  pr as Input,
+  ke as InputDropzone,
+  ar as Interactive,
+  nr as Island,
+  go as Link,
   To as LinkButton,
   _ as Linkify,
-  br as Loaf,
-  No as Logos,
-  Ar as Modal,
-  Pr as NavList,
-  Dr as OVERLAY_OUTLET_ID,
-  Ce as OnScreenSensor,
-  _r as Overlay,
-  dr as Pad,
-  Tr as Page,
-  vr as Popover,
-  Ur as PremiumBadge,
-  Kr as Prose,
-  Vr as Radio,
-  Br as Rail,
-  rr as RichInput,
-  Cr as Scrollable,
-  Gr as Select,
-  Hr as Separator,
-  Wr as Shroud,
-  Be as Skeleton,
-  qr as Spacer,
-  Qr as Style,
-  $r as Switch,
-  be as Symbols,
-  ce as TITLE_OUTLET_ID,
-  fe as Table,
-  xe as TableIconButton,
-  te as Tabular,
-  ae as Text,
-  le as TextBlock,
-  se as Textarea,
-  de as Title,
-  re as ToggleGroup,
-  yr as VirtualScrollable,
+  Er as Loaf,
+  Ho as Logos,
+  _r as Modal,
+  vr as NavList,
+  Ur as OVERLAY_OUTLET_ID,
+  be as OnScreenSensor,
+  Nr as Overlay,
+  Br as Pad,
+  kr as Page,
+  Kr as Popover,
+  wr as PremiumBadge,
+  Yr as Prose,
+  Mr as Radio,
+  yr as Rail,
+  mr as RichInput,
+  br as Scrollable,
+  jr as Select,
+  Jr as Separator,
+  Xr as Shroud,
+  ye as Skeleton,
+  $r as Spacer,
+  re as Style,
+  pe as Switch,
+  Ee as Symbols,
+  ge as TITLE_OUTLET_ID,
+  ne as Table,
+  ie as TableIconButton,
+  ae as Tabular,
+  ue as Text,
+  ce as TextBlock,
+  Te as Textarea,
+  Be as Title,
+  me as ToggleGroup,
+  Or as VirtualScrollable,
   w as clamp,
   G as clamp01,
   f as clsx,
@@ -155,17 +159,18 @@ export {
   h as defaultLinkReplacer,
   v as defaultLinkReplacerx,
   oo as getColor,
-  ne as getTextOpacity,
-  m as getValue,
-  k as identity,
+  Bo as getLinkClassName,
+  de as getTextOpacity,
+  x as getValue,
+  b as identity,
   A as invoke,
   F as isExternalUrl,
   H as isFalseString,
   M as isTrueString,
   U as linkify,
-  z as linkifyx,
-  K as matchLinkNodes,
-  N as matchLinks,
+  N as linkifyx,
+  z as matchLinkNodes,
+  K as matchLinks,
   t as mergeRefs,
   O as noop,
   W as normalizeSlashes,
@@ -174,15 +179,15 @@ export {
   E as returnTrue,
   q as splitByIndices,
   Z as throttle,
-  ye as ui,
+  Oe as ui,
   J as unicodeCharAt,
-  R as useClipboardComponent,
-  Xr as useContextualStyle,
+  y as useClipboardComponent,
+  ee as useContextualStyle,
   u as useDynamicRef,
   d as useGlobalKeyboardEvent,
   i as useInstance,
   T as useKeyboardClose,
   C as useOutlet,
   l as usePopoverController,
-  B as useWindowResize
+  g as useWindowResize
 };

package/dist/styles-scss/global.scss

@@ -24,6 +24,7 @@ body {
   @include badge-tokens;
   @include accordion-tokens;
   @include mp-tokens;
+  @include anchor-tokens;
 
   // initiat fonts
   @include font-HelveticaNow;
@@ -38,21 +39,28 @@ body {
 
 a {
   display: inline-flex;
-  color: ui.color('tertiary');
-
-  text-decoration: underline;
-  text-decoration-color: currentColor;
-
+  color: ui.color-token('anchor-color');
   cursor: pointer;
+  text-decoration: underline;
 
   @include ui.animated();
 
-  &.unstyle {
+  &:not([aria-disabled="true"]) {
+    text-decoration-color: currentColor;
+
+    &:hover {
+      text-decoration-color: ui.color-token('anchor-decoration-color-hover');
+    }
+  }
+
+  &[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: .5;
     text-decoration: none;
   }
 
-  &:hover {
-    text-decoration-color: ui.color('tertiary', $alpha: .5);
+  &[aria-disabled="true"]:active {
+    pointer-events: none;
   }
 }
 

package/dist/styles-scss/tokens.scss

@@ -27,6 +27,13 @@ $mpMap: (
   }
 }
 
+@mixin anchor-tokens() {
+  @include ui.define-color-token('anchor-color', ui.color('tertiary'));
+  @include ui.define-color-token('anchor-decoration-color-hover', ui.color('tertiary', $alpha: .5));
+  @include ui.define-color-token('anchor-secondary-color', ui.color('secondary'));
+  @include ui.define-color-token('anchor-secondary-decoration-color-hover', ui.color('secondary', $alpha: .5));
+}
+
 @mixin border-radius-tokens() {
   @include ui.def('border-radius-none', 0);
   @include ui.def('border-radius-xxsmall', ui.q(.25));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "2.1.23",
+  "version": "3.0.0",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",
@@ -61,7 +61,6 @@
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.9.1",
-    "vite-plugin-lib-inject-css": "^2.1.1",
     "vite-plugin-static-copy": "^1.0.5",
     "vitest": "^1.6.0"
   },

package/dist/assets/Button.css

@@ -1 +0,0 @@
-._root_1cisu_1{flex-shrink:0;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--offset-small);--height: var(--control-height-large);height:var(--height);min-width:var(--control-height-large);padding:var(--offset-xxsmall) calc(var(--quant) * 5);outline:none;font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-xxsmall);line-height:1.2;letter-spacing:1px;text-transform:uppercase;text-decoration:none;cursor:pointer;border:solid 1.5px;border-radius:var(--border-radius-small);--color: var(--color-button-text);--border-color: var(--color-button-border);--background-color: var(--color-button-background);color:var(--color);border-color:var(--border-color);background-color:var(--background-color)}._root_1cisu_1{transition:background-color .25s ease,color .25s ease,outline-offset 0s,outline 0s}._root_1cisu_1._fullWidth_1cisu_33{width:100%;flex-shrink:1}._root_1cisu_1:disabled{cursor:not-allowed;opacity:.5}._root_1cisu_1:not(:disabled):hover{--border-color: var(--color-button-hover-border);--background-color: var(--color-button-hover-background)}._root_1cisu_1:not(:disabled):active{--border-color: var(--color-button-active-border);--background-color: var(--color-button-active-background);transform:translateY(1px)}._root_1cisu_1:not(:disabled):focus-visible:not(:active):not(:hover){box-shadow:0 0 0 2px var(--color-button-focus-outline)}._root_1cisu_1._primary_1cisu_53{-webkit-backdrop-filter:none;backdrop-filter:none;--color: var(--color-button-primary-text);--border-color: var(--color-button-primary-border);--background-color: var(--color-button-primary-background)}._root_1cisu_1._primary_1cisu_53:disabled{--color: var(--color-button-primary-disabled-text);--border-color: var(--color-button-primary-disabled-border);--background-color: var(--color-button-primary-disabled-background)}._root_1cisu_1._primary_1cisu_53:not(:disabled):hover{--color: var(--color-button-primary-hover-text);--border-color: var(--color-button-primary-hover-border);--background-color: var(--color-button-primary-hover-background)}._root_1cisu_1._primary_1cisu_53:not(:disabled):active{--color: var(--color-button-primary-active-text);--border-color: var(--color-button-primary-active-border);--background-color: var(--color-button-primary-active-background)}._root_1cisu_1._secondary_1cisu_74{-webkit-backdrop-filter:none;backdrop-filter:none;--color: var(--color-button-secondary-text);--border-color: var(--color-button-secondary-border);--background-color: var(--color-button-secondary-background)}._root_1cisu_1._secondary_1cisu_74:disabled{--color: var(--color-button-secondary-disabled-text);--border-color: var(--color-button-secondary-disabled-border);--background-color: var(--color-button-secondary-disabled-background)}._root_1cisu_1._secondary_1cisu_74:not(:disabled):hover{--color: var(--color-button-secondary-hover-text);--border-color: var(--color-button-secondary-hover-border);--background-color: var(--color-button-secondary-hover-background)}._root_1cisu_1._secondary_1cisu_74:not(:disabled):active{--color: var(--color-button-secondary-active-text);--border-color: var(--color-button-secondary-active-border);--background-color: var(--color-button-secondary-active-background)}._root_1cisu_1._on-light_1cisu_95{-webkit-backdrop-filter:none;backdrop-filter:none;--color: var(--color-button-onlight-text);--border-color: var(--color-button-onlight-border);--background-color: var(--color-button-onlight-background)}._root_1cisu_1._on-light_1cisu_95:disabled{--color: var(--color-button-onlight-disabled-text);--border-color: var(--color-button-onlight-disabled-border);--background-color: var(--color-button-onlight-disabled-background)}._root_1cisu_1._on-light_1cisu_95:not(:disabled):hover{--color: var(--color-button-onlight-hover-text);--border-color: var(--color-button-onlight-hover-border);--background-color: var(--color-button-onlight-hover-background)}._root_1cisu_1._on-light_1cisu_95:not(:disabled):active{--color: var(--color-button-onlight-active-text);--border-color: var(--color-button-onlight-active-border);--background-color: var(--color-button-onlight-active-background)}._root_1cisu_1._linked_1cisu_116{--height: calc(var(--quant) * 4);font-weight:var(--font-weight-normal);line-height:1.2;letter-spacing:0;font-size:var(--font-size-xsmall);-webkit-backdrop-filter:none;backdrop-filter:none;text-transform:none;min-width:0;padding:0 var(--offset-small);--color: var(--color-button-linked-text);--border-color: var(--color-button-linked-border);--background-color: var(--color-button-linked-background)}._root_1cisu_1._linked_1cisu_116:disabled{--color: var(--color-button-linked-disabled-text);--border-color: var(--color-button-linked-disabled-border);--background-color: var(--color-button-linked-disabled-background)}._root_1cisu_1._linked_1cisu_116:not(:disabled):hover{--color: var(--color-button-linked-hover-text);--border-color: var(--color-button-linked-hover-border);--background-color: var(--color-button-linked-hover-background)}._root_1cisu_1._linked_1cisu_116:not(:disabled):active{--color: var(--color-button-linked-active-text);--border-color: var(--color-button-linked-active-border);--background-color: var(--color-button-linked-active-background)}._root_1cisu_1._quicklink_1cisu_145{-webkit-backdrop-filter:none;backdrop-filter:none;justify-content:space-between;--color: var(--color-button-quicklink-text);--border-color: var(--color-button-quicklink-border);--background-color: var(--color-button-quicklink-background)}._root_1cisu_1._quicklink_1cisu_145 ._icon_1cisu_152{position:relative;right:0}._root_1cisu_1._quicklink_1cisu_145 ._icon_1cisu_152{transition:right .25s ease,outline-offset 0s,outline 0s}._root_1cisu_1._quicklink_1cisu_145:disabled{--color: var(--color-button-quicklink-disabled-text);--border-color: var(--color-button-quicklink-disabled-border);--background-color: var(--color-button-quicklink-disabled-background)}._root_1cisu_1._quicklink_1cisu_145:not(:disabled):hover{--color: var(--color-button-quicklink-hover-text);--border-color: var(--color-button-quicklink-hover-border);--background-color: var(--color-button-quicklink-hover-background)}._root_1cisu_1._quicklink_1cisu_145:not(:disabled):hover ._icon_1cisu_152{right:calc(-1 * calc(var(--quant) * .5))}._root_1cisu_1._quicklink_1cisu_145:not(:disabled):active{--color: var(--color-button-quicklink-active-text);--border-color: var(--color-button-quicklink-active-border);--background-color: var(--color-button-quicklink-active-background)}._root_1cisu_1._icononly_1cisu_177{padding:0;width:var(--height);line-height:0}._root_1cisu_1 ._decorator_1cisu_182{position:absolute;top:2px;left:2px;display:flex;align-items:center;justify-content:center;width:0;height:0}