@aortl/admin-css 0.16.0 → 0.16.2

package/src/components/menu.css

@@ -1,12 +1,10 @@
 @layer components {
-  /* Native <details> drives open state — no JS needed. The popup is a
-     position: absolute child of the relative .menu root. */
+  /* Native <details> drives open state — no JS. */
   .menu {
     @apply relative inline-block;
   }
 
-  /* Behaviour — applied always so the trigger works regardless of
-     additional visual classes (e.g. `btn btn-primary` for a split button). */
+  /* Behaviour only — visual classes (e.g. `btn btn-primary`) may stack on top. */
   .menu-trigger {
     @apply inline-flex items-center gap-1.5
            cursor-pointer select-none
@@ -19,17 +17,14 @@
     display: none;
   }
 
-  /* Default appearance — bows out when `.btn` is also on the trigger so
-     button classes (bg, hover, padding, text colour) take over cleanly. */
+  /* Default appearance — bows out when `.btn` supplies its own. */
   .menu-trigger:not(.btn) {
     @apply px-2.5 py-1.5 rounded-md text-sm leading-none
            text-text bg-transparent
            hover:bg-surface-strong;
   }
 
-  /* Chevron uses currentColor so it tracks the trigger's text colour —
-     muted text on the default trigger, content colour on a btn-primary
-     split button, etc. Sized in em so it scales with btn-sm / btn-lg. */
+  /* em-sized so the chevron scales with btn-sm / btn-lg. */
   .menu-trigger::after {
     content: "";
     width: 0.5em;
@@ -41,8 +36,7 @@
     flex-shrink: 0;
   }
 
-  /* Icon-only triggers (e.g. the dropdown half of a split button) center
-     their chevron instead of letting it sit at the start. */
+  /* A text-less trigger (split-button dropdown half) centers its chevron. */
   .menu-trigger:empty {
     @apply justify-center;
   }
@@ -59,15 +53,9 @@
            border border-border rounded-lg shadow-md;
   }
 
-  /* CSS anchor positioning makes the popup `position: fixed` so it escapes
-     ancestor `overflow: hidden`/`overflow: auto` clipping — necessary when
-     the menu lives inside a `<dialog>` (top-layer + overflow: hidden) or a
-     scroll-clipped surface like a card body. `anchor-scope` keeps each
-     menu's anchor lookups isolated so multiple menus on the page don't
-     cross-target, and `position-try-fallbacks` flips the popup above the
-     trigger when there isn't room below. Browsers without anchor
-     positioning (Firefox, as of early 2026) fall back to the absolute
-     rules above and clip as before. */
+  /* Anchor positioning makes the popup fixed so it escapes ancestor overflow
+     clipping (e.g. inside a <dialog>); browsers without it (Firefox, early
+     2026) fall back to the absolute rules above and clip as before. */
   @supports (anchor-name: --x) {
     .menu {
       anchor-scope: --menu-trigger;
@@ -100,13 +88,15 @@
            hover:bg-surface-muted
            focus-visible:bg-surface-muted focus-visible:outline-none
            disabled:opacity-50 disabled:cursor-not-allowed;
+    /* The popup has no max-width — break long labels instead of growing it. */
+    overflow-wrap: break-word;
+    min-width: 0;
   }
 
   .menu-item[aria-disabled="true"] {
     @apply opacity-50 cursor-not-allowed;
   }
 
-  /* Don't let a constrained menu width squish a leading/trailing icon. */
   .menu-trigger > :is(i, svg),
   .menu-item > :is(i, svg) {
     flex-shrink: 0;

package/src/components/navbar.css

@@ -1,7 +1,6 @@
 @layer components {
-  /* 2px bottom stripe is always rendered — defaults to a neutral gray via
-     `--color-system-accent` and brand-shifts when the consuming app overrides
-     that variable at :root (see also `.footer` and `.brand-tile`). */
+  /* The bottom stripe brand-shifts when the consuming app overrides
+     `--color-system-accent` at :root (see also `.footer` and `.brand-tile`). */
   .navbar {
     @apply flex items-center gap-3 px-4 h-12
            bg-surface-muted text-text
@@ -31,19 +30,16 @@
     @apply bg-primary-muted text-primary;
   }
 
-  /* Keep brand/item icons at their intrinsic size in a crowded bar. */
   .navbar-brand > :is(i, svg),
   .navbar-item > :is(i, svg) {
     flex-shrink: 0;
   }
 
-  /* Right-aligned slot for actions: shop selector, user menu, etc. */
   .navbar-actions {
     @apply flex items-center gap-2 ml-auto;
   }
 
-  /* Hamburger; hidden above the md breakpoint. The three lines are drawn
-     with one element + two box-shadow strokes — no SVG needed. */
+  /* Hamburger — three lines from one element + two box-shadow strokes. */
   .navbar-mobile-toggle {
     @apply inline-flex items-center justify-center size-9 -ml-2
            rounded-md text-text bg-transparent

package/src/components/pagination.css

@@ -8,7 +8,6 @@
     @apply inline-flex;
   }
 
-  /* Square button shared by number, prev/next, and ellipsis containers. */
   .page-link {
     @apply inline-flex items-center justify-center
            min-w-8 h-8 px-2
@@ -23,8 +22,7 @@
            disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none;
   }
 
-  /* Current page — same surface as a sidebar's active item so the visual
-     metaphor is consistent. */
+  /* Same surface as a sidebar's active item. */
   .page-link.active,
   .page-link[aria-current="page"] {
     @apply bg-primary-muted text-primary border-primary-muted;
@@ -34,7 +32,6 @@
     @apply opacity-50 cursor-not-allowed pointer-events-none;
   }
 
-  /* Ellipsis — non-interactive placeholder between groups of pages. */
   .page-ellipsis {
     @apply inline-flex items-center justify-center
            min-w-8 h-8 px-2

package/src/components/progress.css

@@ -1,7 +1,5 @@
 @layer components {
-  /* Native <progress> styled across engines. `appearance: none` strips the
-     platform default; the track is the element itself, the fill comes from
-     ::-webkit-progress-value / ::-moz-progress-bar. */
+  /* The track is the element itself; the fill is the engine-specific value pseudo. */
   .progress {
     appearance: none;
     -webkit-appearance: none;
@@ -32,7 +30,6 @@
     transition: inline-size 200ms ease;
   }
 
-  /* Sizes */
   .progress-sm {
     height: 0.25rem;
   }
@@ -54,9 +51,8 @@
     color: var(--color-danger);
   }
 
-  /* Indeterminate — no value attribute. WebKit hides the value pseudo, Firefox
-     draws it full-width; in both cases we paint an animated gradient on the
-     bar itself. */
+  /* When indeterminate, WebKit hides the value pseudo and Firefox draws it
+     full-width — blank both and animate a gradient on the bar itself. */
   .progress:indeterminate {
     background-image: linear-gradient(
       90deg,

package/src/components/property-list.css

@@ -1,6 +1,4 @@
 @layer components {
-  /* Outer section — owns striped, hide-if-empty modifiers. Title
-     (optional) and the items grid stack vertically. */
   .property-list {
     @apply flex flex-col text-sm text-text;
   }
@@ -9,8 +7,7 @@
     @apply text-sm font-bold text-text mb-2;
   }
 
-  /* The <dl> itself is the two-track grid; <dt> auto-flows into column 1
-     and <dd> into column 2. */
+  /* The <dl> is the grid; <dt>/<dd> auto-flow into the two tracks. */
   .property-list-items {
     display: grid;
     grid-template-columns: max-content 1fr;
@@ -25,15 +22,12 @@
     @apply text-text-muted;
   }
 
-  /* `min-w-0` lets the value's grid track shrink below its content; pair it
-     with `break-words` so long unbreakable values (IDs, hashes, emails, URLs,
-     file paths) break instead of overflowing the column. */
+  /* `min-w-0` lets the track shrink below its content so long unbreakable
+     values break instead of overflowing the column. */
   .property-list-value {
     @apply gap-2 min-w-0 break-words;
   }
 
-  /* Compact density — tighter rows for sidebar info blocks or very many
-     short attributes. */
   .property-list-compact .property-list-title {
     @apply mb-1;
   }
@@ -43,7 +37,6 @@
     @apply px-2 py-0.5 min-h-6;
   }
 
-  /* Numeric — right-align + tabular-nums on the value. */
   .property-list-value-numeric {
     justify-content: flex-end;
     @apply tabular-nums;
@@ -60,8 +53,7 @@
     display: none;
   }
 
-  /* Copy button — always emitted by the Value but kept out of layout entirely
-     unless this specific value opts in. */
+  /* Always emitted by the Value; kept out of layout unless the value opts in. */
   .property-list-copy {
     @apply inline-flex items-center justify-center
            ml-auto rounded
@@ -82,8 +74,7 @@
     pointer-events: none;
   }
 
-  /* Reveal on hover of either the label or the value of a copyable row, on
-     button focus, or while feedback is active. */
+  /* Reveal on hover of the row's label or value, on focus, or during feedback. */
   .property-list-label:has(+ .property-list-value-copyable):hover
     + .property-list-value
     .property-list-copy,

package/src/components/prose.css

@@ -1,19 +1,13 @@
 @layer components {
-  /*
-   * Long-form rendered HTML — markdown output, CMS bodies, anything you can't
-   * annotate with the system's semantic class names. The global reset strips
-   * margins, list markers, and link styling from bare elements (so admin chrome
-   * stays neutral); `.prose` re-establishes them for its descendants only, using
-   * the semantic tokens so it follows dark mode and `--color-*` overrides.
-   *
-   * Descendant rules use `:where()` to stay at specificity 0 — a consumer's own
-   * `.prose a { … }` wins without `!important`.
-   */
+  /* Styles rendered HTML (markdown, CMS bodies) that can't carry the system's
+     class names — re-establishes what the global reset strips. Descendant rules
+     use `:where()` so a consumer's own `.prose a { … }` wins without `!important`. */
   .prose {
     @apply text-sm leading-normal text-text;
+    /* Break long URLs/tokens; the scrolling `<pre>` keeps its own `white-space: pre`. */
+    overflow-wrap: break-word;
   }
 
-  /* Vertical rhythm — space between flow blocks, none at the container edges. */
   .prose :where(p, ul, ol, blockquote, pre, table, figure) {
     @apply my-3;
   }
@@ -24,8 +18,7 @@
     margin-bottom: 0;
   }
 
-  /* Headings — base.css already sizes h1–h3; here we add h4–h6 and the
-     sectioning rhythm. The edge reset above zeroes a leading heading's margin. */
+  /* base.css already sizes h1–h3; add h4–h6 and the sectioning rhythm. */
   .prose :where(h1, h2, h3, h4, h5, h6) {
     @apply mt-6 mb-2 font-semibold leading-tight;
   }
@@ -36,7 +29,6 @@
     @apply text-xs uppercase tracking-wide text-text-muted;
   }
 
-  /* Lists — restore the markers the reset removes. */
   .prose :where(ul) {
     @apply list-disc ps-5;
   }
@@ -50,7 +42,6 @@
   .prose :where(li) :where(p) {
     @apply my-1;
   }
-  /* Nested lists hug their parent item rather than taking full block spacing. */
   .prose :where(li > ul, li > ol) {
     @apply my-1;
   }
@@ -62,15 +53,13 @@
            focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus;
   }
 
-  /* Inline code — a tinted chip. */
   .prose :where(code) {
     @apply rounded border border-border bg-code-surface px-1 py-0.5
            font-mono text-code-text;
     font-size: 0.85em;
   }
 
-  /* Code blocks — the .code-block surface; strip the inline chip off nested
-     <code> so a highlighter's own tokens show through. */
+  /* Mirrors .code-block; nested <code> sheds the chip so highlighter tokens show. */
   .prose :where(pre) {
     @apply rounded-lg bg-code-surface p-3 font-mono text-sm text-code-text;
     white-space: pre;
@@ -81,12 +70,10 @@
     font-size: inherit;
   }
 
-  /* Blockquote — a quiet inline-start rule. */
   .prose :where(blockquote) {
     @apply border-s-2 border-border-strong ps-3 text-text-muted;
   }
 
-  /* Thematic break. */
   .prose :where(hr) {
     @apply my-6 border-0 border-t border-border;
   }
@@ -102,7 +89,6 @@
     @apply font-semibold text-text-muted;
   }
 
-  /* Media + emphasis. */
   .prose :where(img) {
     @apply h-auto max-w-full rounded-md;
   }

package/src/components/radio.css

@@ -24,9 +24,8 @@
     @apply inline-flex size-1.5 rounded-full bg-primary-content;
   }
 
-  /* Native input variant: state is driven by :checked, the dot is ::after.
-     Mirrors the Base UI span variant above so a vanilla <input class="radio">
-     renders identically (the dot matches .radio-indicator's size + colour). */
+  /* Mirrors the Base UI span variant above — the ::after dot must match
+     .radio-indicator's size and colour. */
   input.radio {
     @apply appearance-none border-border-strong hover:border-text-muted;
   }
@@ -49,10 +48,11 @@
     @apply flex-col gap-2 items-start;
   }
 
-  /* A <label> wrapping a radio + text lays out inline with a small gap.
-     Covers both the vanilla input.radio and Base UI's span.radio. */
   label:has(> .radio) {
     @apply inline-flex items-center gap-2 cursor-pointer;
+    /* Long labels break beside the `shrink-0` control instead of overflowing. */
+    overflow-wrap: break-word;
+    min-width: 0;
   }
 
   label:has(> .radio:disabled),

package/src/components/select.css

@@ -26,7 +26,6 @@
     @apply border-danger hover:border-danger focus-visible:outline-danger;
   }
 
-  /* Sizes */
   .select-sm {
     @apply text-xs px-2.5 py-1.5;
   }
@@ -35,14 +34,9 @@
     @apply text-base px-4 py-2.5;
   }
 
-  /* Native <select> usage: same class, but suppress the native chevron and
-     supply our own via background-image so the look matches the Base UI
-     trigger. A bare native <select> is a replaced element and can't host a
-     tinted `::after` (the React trigger uses a real `.select-icon` SVG), and
-     data URIs can't read CSS variables — so the chevron can't ride the
-     `--color-text-muted` token directly. The stroke is Flexoki `base-500`
-     (#848484), the same mid-gray as the token's dark-mode value, which reads
-     as a neutral chevron in both light and dark mode. */
+  /* A replaced <select> can't host a tinted ::after and data URIs can't read
+     CSS variables, so the chevron is a background-image with a hard-coded
+     stroke: Flexoki base-500 (#848484), which reads neutral in both modes. */
   select.select {
     appearance: none;
     padding-right: 2rem;
@@ -90,6 +84,9 @@
   .select-item {
     @apply flex items-center gap-2 px-3 py-1.5 text-sm
            cursor-pointer select-none outline-none;
+    /* Break long option labels rather than grow the popup horizontally. */
+    overflow-wrap: break-word;
+    min-width: 0;
   }
 
   .select-item[data-highlighted] {

package/src/components/sidebar.css

@@ -7,8 +7,7 @@
     transition: width 150ms ease;
   }
 
-  /* Hidden checkbox that drives the collapsed state via :has(). Lives inside
-     <Sidebar.CollapseToggle>, but :has() finds it from anywhere in .sidebar. */
+  /* Hidden checkbox; :has() reads the collapsed state from anywhere in .sidebar. */
   .sidebar-toggle {
     position: absolute;
     width: 1px;
@@ -24,7 +23,6 @@
     width: var(--app-shell-sidebar-w-collapsed, 56px);
   }
 
-  /* Hide labels, group headings, badges, and tree panels in collapsed mode. */
   .sidebar:has(.sidebar-toggle:checked) .sidebar-label,
   .sidebar:has(.sidebar-toggle:checked) .sidebar-group-label,
   .sidebar:has(.sidebar-toggle:checked) .sidebar-badge,
@@ -33,7 +31,6 @@
     display: none;
   }
 
-  /* Center the icon in collapsed mode. */
   .sidebar:has(.sidebar-toggle:checked) .sidebar-item,
   .sidebar:has(.sidebar-toggle:checked) .sidebar-subitem,
   .sidebar:has(.sidebar-toggle:checked) .sidebar-collapsible-trigger {
@@ -93,7 +90,6 @@
            bg-surface-strong text-text-muted;
   }
 
-  /* Native <details> for tree groups. */
   .sidebar-collapsible {
     @apply flex flex-col;
     interpolate-size: allow-keywords;
@@ -136,8 +132,7 @@
     overflow: hidden;
   }
 
-  /* Smooth panel expansion via ::details-content (modern browsers).
-     Older browsers degrade to the native instant toggle. */
+  /* Browsers without ::details-content degrade to the instant native toggle. */
   .sidebar-collapsible::details-content {
     opacity: 0;
     height: 0;

package/src/components/spinner.css

@@ -1,7 +1,5 @@
 @layer components {
-  /* Border-driven spinner — the top edge takes the host's `currentColor` while
-     the rest stays muted, producing a visible rotating arc. Inline-block so it
-     drops into `.btn`, `.field-label`, etc., without disturbing flow layout. */
+  /* The currentColor top edge over a muted ring reads as a rotating arc. */
   .spinner {
     display: inline-block;
     width: 1rem;
@@ -25,7 +23,6 @@
     border-width: 3px;
   }
 
-  /* Honour reduced-motion — pause rather than spin frantically. */
   @media (prefers-reduced-motion: reduce) {
     .spinner {
       animation-duration: 2s;

package/src/components/stat-card.css

@@ -1,11 +1,6 @@
 @layer components {
-  /* A KPI tile is a `.card` shell with no inner `.card-body` — label / value /
-     detail stack directly on the card. Pair `.stat-card` with `.card` in the
-     markup so it inherits the surface, border, radius, and shadow, plus every
-     card modifier: `.card-bordered`, `.card-compact`, and the color variants
-     (`.card-primary`, `.card-muted`, …). `.stat-card` only adds the flat inner
-     padding/gap and the inverted hierarchy (the value dominates, the label is a
-     small annotation). */
+  /* Pairs with `.card` in the markup (no inner `.card-body`) — inherits its
+     surface and modifiers; this class only adds the flat padding/gap. */
   .stat-card {
     @apply gap-1 p-4;
   }
@@ -14,7 +9,6 @@
     @apply flex items-center gap-2 text-sm text-text-muted font-medium;
   }
 
-  /* Keep the label's leading icon at its intrinsic size. */
   .stat-card-label > :is(i, svg) {
     flex-shrink: 0;
   }
@@ -27,18 +21,13 @@
     @apply text-sm text-text-muted;
   }
 
-  /* `.card-compact` tightens `.card-body`, but a stat card has no body — apply
-     the same padding step to the stat-card root, with a tighter gap to match. */
+  /* `.card-compact` targets `.card-body`; with no body, step the root instead. */
   .card-compact.stat-card {
     @apply p-3 gap-0.5;
   }
 
-  /* Color variants (`.card-primary`, `.card-success`, …) supply the tinted
-     surface + border via `.card`. Here we tint the value to the matching accent
-     — the headline metric is a stat card's analog of `.card-title`, so a status
-     KPI reads its colour at a glance. `warning` is skipped for the same reason
-     `.card-warning` skips its title: yellow-400 fails AA on the muted yellow
-     surface. The tinted surface still carries the warning signal. */
+  /* Tint the value to the card variant's accent. `warning` is skipped like
+     `.card-warning`'s title: yellow-400 fails AA on the muted yellow surface. */
   .card-primary .stat-card-value {
     @apply text-primary;
   }

package/src/components/switch.css

@@ -30,7 +30,7 @@
     @apply translate-x-4;
   }
 
-  /* Native input variant: state is driven by :checked, thumb is ::before. */
+  /* Native input variant. */
   input.switch {
     @apply appearance-none bg-border-strong m-0;
   }
@@ -49,10 +49,12 @@
     @apply translate-x-4;
   }
 
-  /* A <label> wrapping a switch + text lays out inline.
-     Switches are wider than checkboxes/radios so the gap is a touch larger. */
+  /* Switches are wider than checkboxes/radios, so the label gap is larger. */
   label:has(> .switch) {
     @apply inline-flex items-center gap-3 cursor-pointer;
+    /* Let a long label break and shrink beside the shrink-0 track instead of overflowing. */
+    overflow-wrap: break-word;
+    min-width: 0;
   }
 
   label:has(> .switch:disabled),

package/src/components/table.css

@@ -3,12 +3,8 @@
     @apply w-full text-sm text-text border-collapse;
   }
 
-  /* Default cell padding/alignment/divider — applied via descendant selectors
-     for hand-written markup AND via explicit classes for cases where the
-     consumer renders a non-<td>/<th> element. :where() keeps specificity at 0
-     so authored utilities and modifiers can win without !important. Covers
-     thead/tbody/tfoot uniformly so a hand-written `<tfoot> <td>` lands on
-     the same padding as the React `.table-cell`. */
+  /* Descendant selectors cover hand-written markup; explicit classes cover
+     non-<td>/<th> renders. :where() keeps specificity 0 so authored utilities win. */
   .table :where(th, td),
   .table-cell,
   .table-header-cell {
@@ -20,18 +16,21 @@
     @apply font-medium text-text-muted bg-surface-muted border-b-border-strong whitespace-nowrap;
   }
 
-  /* Drop the divider on the very last row, whether it lives in tbody (no
-     tfoot present) or in tfoot — so the table doesn't double-border against
-     a surrounding container. `.table > :last-child` resolves to the final
-     section element (browsers wrap a loose `<tr>` in an implicit <tbody>). */
+  /* Body cells only — break long unbreakable values (IDs, hashes, URLs) instead
+     of forcing the table into horizontal overflow. */
+  .table :where(td),
+  .table-cell {
+    overflow-wrap: break-word;
+  }
+
+  /* No divider on the final row — `> :last-child` is the last section, tbody or
+     tfoot (browsers wrap a loose <tr> in an implicit tbody). */
   .table > :last-child > tr:last-child :where(td),
   .table > :last-child > tr:last-child .table-cell {
     @apply border-b-0;
   }
 
-  /* Alignment — `data-align` works equally for hand-written
-     `<td data-align="right">` and for React's `<Table.Cell align="right">`,
-     so consumers never need a Tailwind utility in their markup. */
+  /* `data-align` serves both hand-written markup and React's `align` prop. */
   .table :where(th, td)[data-align="right"] {
     @apply text-right;
   }
@@ -39,15 +38,12 @@
     @apply text-center;
   }
 
-  /* Right-aligned with tabular-nums so currency/totals columns don't shimmy. */
   .table-cell-numeric {
     @apply text-right tabular-nums;
   }
 
-  /* Narrow first-column gutter for row-level status icons. The inline icon
-     rule normalizes Tabler webfont (`<i class="ti …">`) against React's
-     `<IconCircleCheck size={16}>` SVG so both deliveries land at the same
-     16px box and the same vertical baseline. */
+  /* Status-icon gutter; the child rule normalizes Tabler webfont <i> and React
+     SVG icons to the same 16px box and baseline. */
   .table-cell-gutter {
     @apply w-6 px-0 text-center text-text-muted;
   }
@@ -73,10 +69,8 @@
     @apply px-4 py-3;
   }
 
-  /* Sticky header — requires a scrolling ancestor (e.g.
-     `<div class="overflow-auto" style="max-height: …">`). The wrapper isn't
-     added by the component; it would have no vanilla equivalent and would
-     break compositions like `<details><table>…`. */
+  /* Sticky header — requires a scrolling ancestor. The component adds no wrapper:
+     it'd have no vanilla equivalent and breaks compositions like <details><table>. */
   .table-sticky thead :where(th) {
     @apply sticky top-0 z-10 bg-surface-muted;
   }
@@ -89,9 +83,7 @@
     @apply bg-surface-muted;
   }
 
-  /* Selection — pure CSS via :has(). Fires for native checkboxes,
-     Base UI's checkbox via [data-checked], and the explicit
-     [data-selected] hook for programmatic selection without a checkbox. */
+  /* [data-selected] is the hook for programmatic selection without a checkbox. */
   .table tbody tr:has(input[type="checkbox"]:checked),
   .table tbody tr:has(.checkbox[data-checked]),
   .table tbody tr[data-selected] {
@@ -103,11 +95,9 @@
     @apply bg-primary-muted;
   }
 
-  /* Whole-row link — the first <a> in the row gets its hit-area expanded to
-     fill the row via ::after. Consumer still writes the actual anchor
-     (preserves <Link>, plain <a href>, etc.). Other in-row anchors/buttons
-     should sit above the spanning pseudo-element with `relative` + non-auto
-     z-index; `.btn` already qualifies. */
+  /* The row's first <a> gets its hit-area expanded over the row via ::after;
+     other in-row anchors/buttons need `relative` + non-auto z-index to stay
+     clickable (`.btn` already qualifies). */
   .table-row-link {
     @apply relative cursor-pointer;
   }