@plexui/styles 0.0.0-stage → 0.1.0

package/dist/es/components/Button/Button.module.css

@@ -0,0 +1,863 @@
+@layer components {.Button {
+  position: relative;
+  display: inline-block;
+  gap: var(--button-gap);
+  /* Propagates down to .ButtonInner */
+  flex-shrink: 0;
+  height: var(--button-size);
+  padding: 0 var(--button-gutter);
+  border-radius: var(--button-radius);
+  cursor: pointer;
+  font-size: var(--button-font-size);
+  font-weight: var(--button-font-weight);
+  line-height: 1;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: opacity, color;
+  transition-timing-function: var(--transition-ease-basic);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  white-space: nowrap;
+
+  /* =============================================
+    Disabled
+  ============================================= */
+}
+
+  /* Background / shape of the button */
+  .Button::before {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: inherit;
+    content: "";
+    transition-duration: var(--transition-duration-basic);
+    transition-property: opacity, background-color, transform, box-shadow, border-color;
+    transition-timing-function: var(--transition-ease-basic);
+    /* Composite layer seems required in some cases to avoid visual artifacts. */
+    will-change: transform;
+  }
+
+  /* Focus ring */
+  .Button::after {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: inherit;
+    content: "";
+    pointer-events: none;
+    transition-duration: var(--transition-duration-basic);
+    transition-property: transform;
+    transition-timing-function: var(--transition-ease-basic);
+    /* Composite layer seems required in some cases to avoid visual artifacts. */
+    will-change: transform;
+  }
+
+  .Button:focus {
+    outline: none;
+  }
+    .Button:focus-visible::after {
+      outline: 2px solid var(--button-ring-color, var(--color-ring));
+      outline-offset: var(--button-ring-offset, 2px);
+    }
+
+  .Button svg:where(:not([data-no-autosize])) {
+    display: block;
+    /* Ensure it's not inline (overriding some resets) */
+    width: var(--button-icon-size);
+    height: var(--button-icon-size);
+    flex-shrink: 0;
+  }
+
+    :where(.Button svg:where(:not([data-no-autosize])):first-child:not(:only-child)) {
+      margin-left: var(--button-icon-offset, -1px);
+    }
+
+    :where(.Button svg:where(:not([data-no-autosize])):last-child:not(:only-child)) {
+      margin-right: var(--button-icon-offset, -1px);
+    }
+
+  /* =============================================
+    Optical alignment
+  ============================================= */
+  .Button:where([data-optically-align="start"]) {
+    margin-inline-start: calc(var(--button-gutter) * -1);
+  }
+
+    .Button:where([data-optically-align="start"])[data-pill] {
+      margin-inline-start: calc(var(--button-gutter) * var(--control-gutter-pill-scaling) * -1);
+    }
+
+  .Button:where([data-optically-align="end"]) {
+    margin-inline-end: calc(var(--button-gutter) * -1);
+  }
+
+    .Button:where([data-optically-align="end"])[data-pill] {
+      margin-inline-end: calc(var(--button-gutter) * var(--control-gutter-pill-scaling) * -1);
+    }
+
+  /* Uniform buttons zero-out button-gutter, requiring custom calcs */
+  .Button:where([data-optically-align="start"][data-uniform]) {
+    margin-inline-start: calc(((var(--button-size) - var(--button-icon-size)) / 2) * -1);
+  }
+
+  .Button:where([data-optically-align="end"][data-uniform]) {
+    margin-inline-end: calc(((var(--button-size) - var(--button-icon-size)) / 2) * -1);
+  }
+
+  /* =============================================
+    Sizes
+  ============================================= */
+  .Button:where([data-size="3xs"]) {
+    --button-size: var(--control-size-3xs);
+    --button-gutter: var(--control-gutter-2xs);
+    --button-font-size: var(--control-font-size-sm);
+    --button-icon-size: var(--control-icon-size-xs);
+    --button-gap: var(--button-gap-sm);
+    --button-radius: var(--control-radius-sm);
+    --button-icon-offset: -1px;
+    --indicator-size: 11px;
+    --circular-progress-size: 11px;
+  }
+
+  .Button:where([data-size="2xs"]) {
+    --button-size: var(--control-size-2xs);
+    --button-gutter: var(--control-gutter-xs);
+    --button-font-size: var(--control-font-size-sm);
+    --button-icon-size: var(--control-icon-size-sm);
+    --button-gap: var(--button-gap-md);
+    --button-radius: var(--control-radius-sm);
+    --button-icon-offset: -1px;
+    --indicator-size: 12px;
+    --circular-progress-size: 12px;
+  }
+
+  .Button:where([data-size="xs"]) {
+    --button-size: var(--control-size-xs);
+    --button-gutter: var(--control-gutter-xs);
+    --button-font-size: var(--control-font-size-md);
+    --button-icon-size: var(--control-icon-size-sm);
+    --button-gap: var(--button-gap-md);
+    --button-radius: var(--control-radius-sm);
+    --button-icon-offset: -1px;
+    --indicator-size: 13px;
+    --circular-progress-size: 14px;
+  }
+
+  .Button:where([data-size="sm"]) {
+    --button-size: var(--control-size-sm);
+    --button-gutter: var(--control-gutter-sm);
+    --button-font-size: var(--control-font-size-md);
+    --button-icon-size: var(--control-icon-size-md);
+    --button-gap: var(--button-gap-md);
+    --button-radius: var(--control-radius-sm);
+    --button-icon-offset: -1px;
+    --indicator-size: 15px;
+    --circular-progress-size: 15px;
+  }
+
+  .Button:where([data-size="md"]) {
+    --button-size: var(--control-size-md);
+    --button-gutter: var(--control-gutter-md);
+    --button-font-size: var(--control-font-size-md);
+    --button-icon-size: var(--control-icon-size-md);
+    --button-gap: var(--button-gap-lg);
+    --button-radius: var(--control-radius-md);
+    --button-icon-offset: -1px;
+    --indicator-size: 16px;
+    --circular-progress-size: 16px;
+  }
+
+  .Button:where([data-size="lg"]) {
+    --button-size: var(--control-size-lg);
+    --button-gutter: var(--control-gutter-md);
+    --button-font-size: var(--control-font-size-md);
+    --button-icon-size: var(--control-icon-size-md);
+    --button-gap: var(--button-gap-lg);
+    --button-radius: var(--control-radius-lg);
+    --button-icon-offset: -1px;
+    --indicator-size: 16px;
+    --circular-progress-size: 16px;
+  }
+
+  .Button:where([data-size="xl"]) {
+    --button-size: var(--control-size-xl);
+    --button-gutter: var(--control-gutter-lg);
+    --button-font-size: var(--control-font-size-md);
+    --button-icon-size: var(--control-icon-size-md);
+    --button-gap: var(--button-gap-lg);
+    --button-radius: var(--control-radius-xl);
+    --button-icon-offset: -1px;
+    --indicator-size: 18px;
+    --circular-progress-size: 18px;
+  }
+
+  .Button:where([data-size="2xl"]) {
+    --button-size: var(--control-size-2xl);
+    --button-gutter: var(--control-gutter-lg);
+    --button-font-size: var(--control-font-size-lg);
+    --button-icon-size: var(--control-icon-size-lg);
+    --button-gap: var(--button-gap-lg);
+    --button-radius: var(--control-radius-xl);
+    --button-icon-offset: -2px;
+    --indicator-size: 18px;
+    --circular-progress-size: 18px;
+  }
+
+  .Button:where([data-size="3xl"]) {
+    --button-size: var(--control-size-3xl);
+    --button-gutter: var(--control-gutter-xl);
+    --button-font-size: var(--control-font-size-lg);
+    --button-icon-size: var(--control-icon-size-lg);
+    --button-gap: var(--button-gap-lg);
+    --button-radius: var(--control-radius-xl);
+    --button-icon-offset: -2px;
+    --indicator-size: 20px;
+    --circular-progress-size: 20px;
+  }
+
+  /* =============================================
+    Gutter sizes
+  ============================================= */
+  .Button:where([data-gutter-size="3xs"]) {
+    --button-gutter: 0.25rem; /* 4px, below the smallest control gutter */
+  }
+
+  .Button:where([data-gutter-size="2xs"]) {
+    --button-gutter: var(--control-gutter-2xs);
+  }
+
+  .Button:where([data-gutter-size="xs"]) {
+    --button-gutter: var(--control-gutter-xs);
+  }
+
+  .Button:where([data-gutter-size="sm"]) {
+    --button-gutter: var(--control-gutter-sm);
+  }
+
+  .Button:where([data-gutter-size="md"]) {
+    --button-gutter: var(--control-gutter-md);
+  }
+
+  .Button:where([data-gutter-size="lg"]) {
+    --button-gutter: var(--control-gutter-lg);
+  }
+
+  .Button:where([data-gutter-size="xl"]) {
+    --button-gutter: var(--control-gutter-xl);
+  }
+
+  /* =============================================
+    Icon sizes
+  ============================================= */
+  .Button:where([data-icon-size="sm"]) {
+    --button-icon-size: var(--control-icon-size-sm);
+  }
+
+  .Button:where([data-icon-size="md"]) {
+    --button-icon-size: var(--control-icon-size-md);
+  }
+
+  .Button:where([data-icon-size="lg"]) {
+    --button-icon-size: var(--control-icon-size-lg);
+  }
+
+  .Button:where([data-icon-size="xl"]) {
+    --button-icon-size: var(--control-icon-size-xl);
+  }
+
+  .Button:where([data-icon-size="2xl"]) {
+    --button-icon-size: var(--control-icon-size-2xl);
+  }
+
+  /* =============================================
+    Pill
+  ============================================= */
+  .Button:where([data-pill]) {
+    --button-radius: var(--radius-full);
+
+    padding: 0 calc(var(--button-gutter) * var(--control-gutter-pill-scaling));
+  }
+
+  /* =============================================
+    Block
+  ============================================= */
+  .Button:where([data-block]) {
+    width: 100%;
+  }
+
+  /* =============================================
+    Uniform
+  ============================================= */
+  .Button[data-uniform] {
+    --button-gutter: 0;
+
+    width: var(--button-size);
+  }
+
+  /* =============================================
+    Ghost variant
+  ============================================= */
+  .Button[data-variant="ghost"] {
+    --button-ring-offset: -1px;
+
+    color: var(--button-text-color);
+  }
+
+    .Button[data-variant="ghost"]::before {
+      background-color: var(--button-background-color);
+      opacity: 0;
+      transform: scale(var(--scale));
+    }
+
+    .Button[data-variant="ghost"][aria-expanded="true"],
+    .Button[data-variant="ghost"][data-state="open"] {
+      color: var(--button-text-color-hover);
+    }
+
+      .Button[data-variant="ghost"][aria-expanded="true"]::before, .Button[data-variant="ghost"][data-state="open"]::before {
+        /* Slightly deemphasize */
+        opacity: 0.6;
+        transform: scale(1);
+      }
+
+    .Button[data-variant="ghost"][data-selected] {
+      color: var(--button-text-color-hover);
+    }
+
+      .Button[data-variant="ghost"][data-selected]::before {
+        opacity: 1;
+        transform: scale(1);
+      }
+      @media (hover: hover) and (pointer: fine) {.Button[data-variant="ghost"]:where(:not([data-disabled])):hover {
+        color: var(--button-text-color-hover);
+}
+
+        .Button[data-variant="ghost"]:where(:not([data-disabled])):hover::before {
+          opacity: 1;
+          transform: scale(1);
+        }
+}
+        .Button[data-variant="ghost"]:where(:not([data-disabled])):active::before {
+          background-color: var(--button-background-color-active);
+          opacity: 1;
+          transform: scale(var(--scale));
+        }
+
+        .Button[data-variant="ghost"]:where(:not([data-disabled])):active::after {
+          transform: scale(var(--scale));
+        }
+
+    .Button[data-variant="ghost"]:where([data-color="primary"]) {
+      --button-background-color: var(--color-background-primary-ghost-hover);
+      --button-background-color-active: var(--color-background-primary-ghost-active);
+      --button-text-color: var(--color-text-primary-ghost);
+      --button-text-color-hover: var(--color-text-primary-ghost-hover);
+      --button-ring-color: var(--color-ring-primary-ghost);
+    }
+
+    .Button[data-variant="ghost"]:where([data-color="secondary"]) {
+      --button-background-color: var(--color-background-secondary-ghost-hover);
+      --button-background-color-active: var(--color-background-secondary-ghost-active);
+      --button-text-color: var(--color-text-secondary-ghost);
+      --button-text-color-hover: var(--color-text-secondary-ghost-hover);
+      --button-ring-color: var(--color-ring-secondary-ghost);
+    }
+
+    .Button[data-variant="ghost"]:where([data-color="danger"]) {
+      --button-background-color: var(--color-background-danger-ghost-hover);
+      --button-background-color-active: var(--color-background-danger-ghost-active);
+      --button-text-color: var(--color-text-danger-ghost);
+      --button-text-color-hover: var(--color-text-danger-ghost-hover);
+      --button-ring-color: var(--color-ring-danger-ghost);
+    }
+
+    .Button[data-variant="ghost"]:where([data-color="success"]) {
+      --button-background-color: var(--color-background-success-ghost-hover);
+      --button-background-color-active: var(--color-background-success-ghost-active);
+      --button-text-color: var(--color-text-success-ghost);
+      --button-text-color-hover: var(--color-text-success-ghost-hover);
+      --button-ring-color: var(--color-ring-success-ghost);
+    }
+
+    .Button[data-variant="ghost"]:where([data-color="warning"]) {
+      --button-background-color: var(--color-background-warning-ghost-hover);
+      --button-background-color-active: var(--color-background-warning-ghost-active);
+      --button-text-color: var(--color-text-warning-ghost);
+      --button-text-color-hover: var(--color-text-warning-ghost-hover);
+      --button-ring-color: var(--color-ring-warning-ghost);
+    }
+
+    .Button[data-variant="ghost"]:where([data-color="caution"]) {
+      --button-background-color: var(--color-background-caution-ghost-hover);
+      --button-background-color-active: var(--color-background-caution-ghost-active);
+      --button-text-color: var(--color-text-caution-ghost);
+      --button-text-color-hover: var(--color-text-caution-ghost-hover);
+      --button-ring-color: var(--color-ring-caution-ghost);
+    }
+
+    .Button[data-variant="ghost"]:where([data-color="info"]) {
+      --button-background-color: var(--color-background-info-ghost-hover);
+      --button-background-color-active: var(--color-background-info-ghost-active);
+      --button-text-color: var(--color-text-info-ghost);
+      --button-text-color-hover: var(--color-text-info-ghost-hover);
+      --button-ring-color: var(--color-ring-info-ghost);
+    }
+
+    .Button[data-variant="ghost"]:where([data-color="discovery"]) {
+      --button-background-color: var(--color-background-discovery-ghost-hover);
+      --button-background-color-active: var(--color-background-discovery-ghost-active);
+      --button-text-color: var(--color-text-discovery-ghost);
+      --button-text-color-hover: var(--color-text-discovery-ghost-hover);
+      --button-ring-color: var(--color-ring-discovery-ghost);
+    }
+
+  /* =============================================
+    Solid variant
+  ============================================= */
+  .Button[data-variant="solid"] {
+    color: var(--button-text-color);
+  }
+
+    .Button[data-variant="solid"]::before {
+      background-color: var(--button-background-color);
+    }
+      .Button[data-variant="solid"][aria-expanded="true"]::before, .Button[data-variant="solid"][data-state="open"]::before, .Button[data-variant="solid"][data-selected]::before {
+        background-color: var(--button-background-color-hover);
+      }
+      @media (hover: hover) and (pointer: fine) {
+        .Button[data-variant="solid"]:where(:not([data-disabled])):hover::before {
+          background-color: var(--button-background-color-hover);
+        }
+}
+        .Button[data-variant="solid"]:where(:not([data-disabled])):active::before {
+          background-color: var(--button-background-color-active);
+        }
+
+        .Button[data-variant="solid"]:where(:not([data-disabled])):active::before,
+        .Button[data-variant="solid"]:where(:not([data-disabled])):active::after {
+          transform: scale(var(--scale));
+        }
+
+    .Button[data-variant="solid"]:where([data-color="primary"]) {
+      --button-background-color: var(--color-background-primary-solid);
+      --button-background-color-hover: var(--color-background-primary-solid-hover);
+      --button-background-color-active: var(--color-background-primary-solid-active);
+      --button-text-color: var(--color-text-primary-solid);
+      --button-ring-color: var(--color-ring-primary-solid);
+    }
+
+    .Button[data-variant="solid"]:where([data-color="secondary"]) {
+      --button-background-color: var(--color-background-secondary-solid);
+      --button-background-color-hover: var(--color-background-secondary-solid-hover);
+      --button-background-color-active: var(--color-background-secondary-solid-active);
+      --button-text-color: var(--color-text-secondary-solid);
+      --button-ring-color: var(--color-ring-secondary-solid);
+    }
+
+    .Button[data-variant="solid"]:where([data-color="success"]) {
+      --button-background-color: var(--color-background-success-solid);
+      --button-background-color-hover: var(--color-background-success-solid-hover);
+      --button-background-color-active: var(--color-background-success-solid-active);
+      --button-text-color: var(--color-text-success-solid);
+      --button-ring-color: var(--color-ring-success-solid);
+    }
+
+    .Button[data-variant="solid"]:where([data-color="danger"]) {
+      --button-background-color: var(--color-background-danger-solid);
+      --button-background-color-hover: var(--color-background-danger-solid-hover);
+      --button-background-color-active: var(--color-background-danger-solid-active);
+      --button-text-color: var(--color-text-danger-solid);
+      --button-ring-color: var(--color-ring-danger-solid);
+    }
+
+    .Button[data-variant="solid"]:where([data-color="warning"]) {
+      --button-background-color: var(--color-background-warning-solid);
+      --button-background-color-hover: var(--color-background-warning-solid-hover);
+      --button-background-color-active: var(--color-background-warning-solid-active);
+      --button-text-color: var(--color-text-warning-solid);
+      --button-ring-color: var(--color-ring-warning-solid);
+    }
+
+    .Button[data-variant="solid"]:where([data-color="caution"]) {
+      --button-background-color: var(--color-background-caution-solid);
+      --button-background-color-hover: var(--color-background-caution-solid-hover);
+      --button-background-color-active: var(--color-background-caution-solid-active);
+      --button-text-color: var(--color-text-caution-solid);
+      --button-ring-color: var(--color-ring-caution-solid);
+    }
+
+    .Button[data-variant="solid"]:where([data-color="info"]) {
+      --button-background-color: var(--color-background-info-solid);
+      --button-background-color-hover: var(--color-background-info-solid-hover);
+      --button-background-color-active: var(--color-background-info-solid-active);
+      --button-text-color: var(--color-text-info-solid);
+      --button-ring-color: var(--color-ring-info-solid);
+    }
+
+    .Button[data-variant="solid"]:where([data-color="discovery"]) {
+      --button-background-color: var(--color-background-discovery-solid);
+      --button-background-color-hover: var(--color-background-discovery-solid-hover);
+      --button-background-color-active: var(--color-background-discovery-solid-active);
+      --button-text-color: var(--color-text-discovery-solid);
+      --button-ring-color: var(--color-ring-discovery-solid);
+    }
+
+  /* =============================================
+    Soft variant
+  ============================================= */
+  .Button[data-variant="soft"] {
+    color: var(--button-text-color);
+  }
+
+    .Button[data-variant="soft"]::before {
+      background-color: var(--button-background-color);
+    }
+      .Button[data-variant="soft"][aria-expanded="true"]::before, .Button[data-variant="soft"][data-state="open"]::before, .Button[data-variant="soft"][data-selected]::before {
+        background-color: var(--button-background-color-hover);
+      }
+      @media (hover: hover) and (pointer: fine) {
+        .Button[data-variant="soft"]:where(:not([data-disabled])):hover::before {
+          background-color: var(--button-background-color-hover);
+        }
+}
+        .Button[data-variant="soft"]:where(:not([data-disabled])):active::before {
+          background-color: var(--button-background-color-active);
+        }
+
+        .Button[data-variant="soft"]:where(:not([data-disabled])):active::before,
+        .Button[data-variant="soft"]:where(:not([data-disabled])):active::after {
+          transform: scale(var(--scale));
+        }
+
+    .Button[data-variant="soft"]:where([data-color="primary"]) {
+      --button-background-color: var(--color-background-primary-soft-alpha);
+      --button-background-color-hover: var(--color-background-primary-soft-alpha-hover);
+      --button-background-color-active: var(--color-background-primary-soft-alpha-active);
+      --button-text-color: var(--color-text-primary-soft);
+      --button-ring-color: var(--color-ring-primary-soft);
+    }
+
+    .Button[data-variant="soft"]:where([data-color="secondary"]) {
+      --button-background-color: var(--color-background-secondary-soft-alpha);
+      --button-background-color-hover: var(--color-background-secondary-soft-alpha-hover);
+      --button-background-color-active: var(--color-background-secondary-soft-alpha-active);
+      --button-text-color: var(--color-text-secondary-soft);
+      --button-ring-color: var(--color-ring-secondary-soft);
+    }
+
+    .Button[data-variant="soft"]:where([data-color="success"]) {
+      --button-background-color: var(--color-background-success-soft-alpha);
+      --button-background-color-hover: var(--color-background-success-soft-alpha-hover);
+      --button-background-color-active: var(--color-background-success-soft-alpha-active);
+      --button-text-color: var(--color-text-success-soft);
+      --button-ring-color: var(--color-ring-success-soft);
+    }
+
+    .Button[data-variant="soft"]:where([data-color="danger"]) {
+      --button-background-color: var(--color-background-danger-soft-alpha);
+      --button-background-color-hover: var(--color-background-danger-soft-alpha-hover);
+      --button-background-color-active: var(--color-background-danger-soft-alpha-active);
+      --button-text-color: var(--color-text-danger-soft);
+      --button-ring-color: var(--color-ring-danger-soft);
+    }
+
+    .Button[data-variant="soft"]:where([data-color="warning"]) {
+      --button-background-color: var(--color-background-warning-soft-alpha);
+      --button-background-color-hover: var(--color-background-warning-soft-alpha-hover);
+      --button-background-color-active: var(--color-background-warning-soft-alpha-active);
+      --button-text-color: var(--color-text-warning-soft);
+      --button-ring-color: var(--color-ring-warning-soft);
+    }
+
+    .Button[data-variant="soft"]:where([data-color="caution"]) {
+      --button-background-color: var(--color-background-caution-soft-alpha);
+      --button-background-color-hover: var(--color-background-caution-soft-alpha-hover);
+      --button-background-color-active: var(--color-background-caution-soft-alpha-active);
+      --button-text-color: var(--color-text-caution-soft);
+      --button-ring-color: var(--color-ring-caution-soft);
+    }
+
+    .Button[data-variant="soft"]:where([data-color="info"]) {
+      --button-background-color: var(--color-background-info-soft-alpha);
+      --button-background-color-hover: var(--color-background-info-soft-alpha-hover);
+      --button-background-color-active: var(--color-background-info-soft-alpha-active);
+      --button-text-color: var(--color-text-info-soft);
+      --button-ring-color: var(--color-ring-info-soft);
+    }
+
+    .Button[data-variant="soft"]:where([data-color="discovery"]) {
+      --button-background-color: var(--color-background-discovery-soft-alpha);
+      --button-background-color-hover: var(--color-background-discovery-soft-alpha-hover);
+      --button-background-color-active: var(--color-background-discovery-soft-alpha-active);
+      --button-text-color: var(--color-text-discovery-soft);
+      --button-ring-color: var(--color-ring-discovery-soft);
+    }
+
+  /* =============================================
+    Outline variant
+  ============================================= */
+  .Button[data-variant="outline"] {
+    --button-ring-offset: -1px;
+
+    color: var(--button-text-color);
+  }
+
+    .Button[data-variant="outline"]::before {
+      background-color: transparent;
+      box-shadow:
+        0 0 0 1px var(--button-border-color) inset,
+        var(--button-shadow-custom, 0 0 #00000000);
+    }
+
+    .Button[data-variant="outline"][aria-expanded="true"],
+    .Button[data-variant="outline"][data-state="open"],
+    .Button[data-variant="outline"][data-selected] {
+      color: var(--button-text-color-hover);
+    }
+
+      .Button[data-variant="outline"][aria-expanded="true"]::before, .Button[data-variant="outline"][data-state="open"]::before, .Button[data-variant="outline"][data-selected]::before {
+        background-color: var(--button-background-color-hover);
+        box-shadow:
+          0 0 0 1px var(--button-border-color-hover) inset,
+          var(--button-shadow-custom, 0 0 #00000000);
+      }
+      @media (hover: hover) and (pointer: fine) {.Button[data-variant="outline"]:where(:not([data-disabled])):hover {
+        color: var(--button-text-color-hover);
+}
+
+        .Button[data-variant="outline"]:where(:not([data-disabled])):hover::before {
+          background-color: var(--button-background-color-hover);
+          box-shadow:
+            0 0 0 1px var(--button-border-color-hover) inset,
+            var(--button-shadow-custom, 0 0 #00000000);
+        }
+}
+        .Button[data-variant="outline"]:where(:not([data-disabled])):active::before {
+          background-color: var(--button-background-color-active);
+          transform: scale(var(--scale));
+        }
+
+        .Button[data-variant="outline"]:where(:not([data-disabled])):active::after {
+          transform: scale(var(--scale));
+        }
+
+    .Button[data-variant="outline"]:where([data-color="primary"]) {
+      --button-background-color-hover: var(--color-background-primary-outline-hover);
+      --button-background-color-active: var(--color-background-primary-outline-active);
+      --button-border-color: var(--color-border-primary-outline);
+      --button-border-color-hover: var(--color-border-primary-outline-hover);
+      --button-text-color: var(--color-text-primary-outline);
+      --button-text-color-hover: var(--color-text-primary-outline-hover);
+      --button-ring-color: var(--color-ring-primary-outline);
+    }
+
+    .Button[data-variant="outline"]:where([data-color="secondary"]) {
+      --button-background-color-hover: var(--color-background-secondary-outline-hover);
+      --button-background-color-active: var(--color-background-secondary-outline-active);
+      --button-border-color: var(--color-border-secondary-outline);
+      --button-border-color-hover: var(--color-border-secondary-outline-hover);
+      --button-text-color: var(--color-text-secondary-outline);
+      --button-text-color-hover: var(--color-text-secondary-outline-hover);
+      --button-ring-color: var(--color-ring-secondary-outline);
+    }
+
+    .Button[data-variant="outline"]:where([data-color="danger"]) {
+      --button-background-color-hover: var(--color-background-danger-outline-hover);
+      --button-background-color-active: var(--color-background-danger-outline-active);
+      --button-border-color: var(--color-border-danger-outline);
+      --button-border-color-hover: var(--color-border-danger-outline-hover);
+      --button-text-color: var(--color-text-danger-outline);
+      --button-text-color-hover: var(--color-text-danger-outline-hover);
+      --button-ring-color: var(--color-ring-danger-outline);
+    }
+
+    .Button[data-variant="outline"]:where([data-color="success"]) {
+      --button-background-color-hover: var(--color-background-success-outline-hover);
+      --button-background-color-active: var(--color-background-success-outline-active);
+      --button-border-color: var(--color-border-success-outline);
+      --button-border-color-hover: var(--color-border-success-outline-hover);
+      --button-text-color: var(--color-text-success-outline);
+      --button-text-color-hover: var(--color-text-success-outline-hover);
+      --button-ring-color: var(--color-ring-success-outline);
+    }
+
+    .Button[data-variant="outline"]:where([data-color="warning"]) {
+      --button-background-color-hover: var(--color-background-warning-outline-hover);
+      --button-background-color-active: var(--color-background-warning-outline-active);
+      --button-border-color: var(--color-border-warning-outline);
+      --button-border-color-hover: var(--color-border-warning-outline-hover);
+      --button-text-color: var(--color-text-warning-outline);
+      --button-text-color-hover: var(--color-text-warning-outline-hover);
+      --button-ring-color: var(--color-ring-warning-outline);
+    }
+
+    .Button[data-variant="outline"]:where([data-color="caution"]) {
+      --button-background-color-hover: var(--color-background-caution-outline-hover);
+      --button-background-color-active: var(--color-background-caution-outline-active);
+      --button-border-color: var(--color-border-caution-outline);
+      --button-border-color-hover: var(--color-border-caution-outline-hover);
+      --button-text-color: var(--color-text-caution-outline);
+      --button-text-color-hover: var(--color-text-caution-outline-hover);
+      --button-ring-color: var(--color-ring-caution-outline);
+    }
+
+    .Button[data-variant="outline"]:where([data-color="info"]) {
+      --button-background-color-hover: var(--color-background-info-outline-hover);
+      --button-background-color-active: var(--color-background-info-outline-active);
+      --button-border-color: var(--color-border-info-outline);
+      --button-border-color-hover: var(--color-border-info-outline-hover);
+      --button-text-color: var(--color-text-info-outline);
+      --button-text-color-hover: var(--color-text-info-outline-hover);
+      --button-ring-color: var(--color-ring-info-outline);
+    }
+
+    .Button[data-variant="outline"]:where([data-color="discovery"]) {
+      --button-background-color-hover: var(--color-background-discovery-outline-hover);
+      --button-background-color-active: var(--color-background-discovery-outline-active);
+      --button-border-color: var(--color-border-discovery-outline);
+      --button-border-color-hover: var(--color-border-discovery-outline-hover);
+      --button-text-color: var(--color-text-discovery-outline);
+      --button-text-color-hover: var(--color-text-discovery-outline-hover);
+      --button-ring-color: var(--color-ring-discovery-outline);
+    }
+  /* Non-visual disablement, akin to `inert` */
+  .Button[disabled] {
+    pointer-events: none;
+  }
+
+  /* Visual disablement */
+  .Button[data-disabled][data-variant] {
+    --button-background-color: var(--color-background-disabled);
+    --button-border-color: var(--color-border-disabled);
+    --button-text-color: var(--color-text-disabled);
+
+    cursor: not-allowed;
+    pointer-events: auto;
+  }
+
+    /* Don't press while disabled */
+    .Button[data-disabled][data-variant]:active::before {
+      transform: scale(1);
+    }
+
+    /* Relaxed disabled tone: keep disabled visuals, soften cursor */
+    .Button[data-disabled][data-variant][data-disabled-tone="relaxed"] {
+      cursor: default;
+    }.ButtonInner {
+  position: relative;
+  display: flex;
+  /* Allows overrides through className on .Button */
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  /* Allows overrides through className on .Button */
+  gap: inherit;
+  width: 100%;
+  /* Prevent padding-bottom from creating excess height (flexbox) */
+  height: 100%;
+  transition: opacity 0.15s ease 0.1s;
+}
+
+  [data-loading] .ButtonInner {
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  /* MDX sometimes wraps children in a <p> tag; we bypass it to keep flex layout */
+  .ButtonInner> :global(p) {
+    display: contents;
+  }/* `.Button > .ButtonLoader` (specificity 0,2,0) beats `.TransitionGroupChild`
+ * (0,1,0). TransitionGroup applies both classes to the same <span>, and
+ * TransitionGroup.module.css loads after Button.module.css — without the
+ * specificity bump, `display: block` wins and the spinner pins to top-left
+ * instead of centring. */.Button > .ButtonLoader {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+  .Button > .ButtonLoader[data-entering] {
+    opacity: 0;
+  }
+
+  .Button > .ButtonLoader[data-exiting] {
+    opacity: 1;
+  }
+
+  .Button > .ButtonLoader[data-entering-active],
+  .Button > .ButtonLoader[data-entering][data-interrupted] {
+    opacity: 1;
+    transition: opacity 0.15s ease 0.1s;
+  }
+
+  .Button > .ButtonLoader[data-exiting-active],
+  .Button > .ButtonLoader[data-exiting][data-interrupted] {
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }/* .Kbd {
+  display: none;
+
+  @mixin breakpoint md {
+    display: block;
+    padding: 1px 3px;
+    border: 1px solid var(--kbd-border-color, transparent);
+    border-radius: 4px;
+    margin: 0 -2px 0 4px;
+    background: var(--kbd-bg, var(--alpha-10));
+    color: var(--kbd-color, inherit);
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      "Open Sans",
+      "Helvetica Neue",
+      sans-serif;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 600;
+    letter-spacing: var(--tracking-wide);
+    transition:
+      border-color 0.15s ease,
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    [data-size="2xs"] & {
+      margin-right: 0;
+      margin-left: 3px;
+      font-size: 12px;
+    }
+
+    [data-size="xs"] & {
+      font-size: 12px;
+    }
+
+    [data-size="sm"] & {
+      margin-right: -1px;
+    }
+
+    [data-size="xl"] & {
+      padding: 2px 3px;
+      font-size: 14px;
+    }
+
+    [data-pill] & {
+      border-radius: 8px;
+      margin-right: -5px;
+    }
+
+    [data-size="2xs"][data-pill] & {
+      margin-right: -4px;
+    }
+  }
+} */
+}