@plexui/ui 0.19.1 → 0.20.0

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

@@ -1,859 +0,0 @@
-@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="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;
-    }
-  }
-} */
-}