/*
.NBC
NEXUS BUTTON COMPONENT */


:root {
  color-scheme: light;

  /* Buttons and States */
  --nexus-sys-color-button-primary-default: var(--nexus-ref-primary-20);
  --nexus-sys-color-button-primary-hover: var(--nexus-ref-primary-10);
  --nexus-sys-color-button-primary-focus: var(--nexus-ref-primary-10);
  --nexus-sys-color-button-primary-disabled: var(--nexus-ref-primary-90);
  --nexus-sys-color-button-primary-shadow: var(--nexus-ref-primary-80);
  --nexus-sys-color-button-primary-border-default: unset;
  --nexus-sys-color-button-primary-border-hover: unset;
  --nexus-sys-color-button-primary-border-focus: unset;
  --nexus-sys-color-button-primary-border-disabled: unset;
  --nexus-sys-color-button-primary-text-default: var(--nexus-ref-neutral-100);
  --nexus-sys-color-button-primary-text-hover: var(--nexus-ref-neutral-100);
  --nexus-sys-color-button-primary-text-focus: var(--nexus-ref-neutral-100);
  --nexus-sys-color-button-primary-text-disabled: var(--nexus-ref-neutral-100);

  /* secondory color */
  --nexus-sys-color-button-secondary-default: var(--nexus-ref-primary-90);
  --nexus-sys-color-button-secondary-hover: var(--nexus-ref-primary-80);
  --nexus-sys-color-button-secondary-focus: var(--nexus-ref-primary-90);
  --nexus-sys-color-button-secondary-shadow: var(--nexus-ref-primary-80);
  --nexus-sys-color-button-secondary-border-default: unset;
  --nexus-sys-color-button-secondary-border-hover: unset;
  --nexus-sys-color-button-secondary-border-focus: unset;
  --nexus-sys-color-button-secondary-border-disabled: unset;
  --nexus-sys-color-button-secondary-disabled: var(--nexus-ref-primary-90);
  --nexus-sys-color-button-secondary-text-default: var(--nexus-ref-primary-20);
  --nexus-sys-color-button-secondary-text-hover: var(--nexus-ref-primary-20);
  --nexus-sys-color-button-secondary-text-focus: var(--nexus-ref-primary-20);
  --nexus-sys-color-button-secondary-text-disabled: var(--nexus-ref-primary-50);

  /* secondory gray */
  --nexus-sys-color-button-secondary-gray-default: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-secondary-gray-hover: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-secondary-gray-focus: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-secondary-gray-shadow: var(--nexus-ref-neutral-90);
  --nexus-sys-color-button-secondary-gray-disabled: unset;
  --nexus-sys-color-button-secondary-gray-border-default: var(--nexus-ref-neutral-50);
  --nexus-sys-color-button-secondary-gray-border-hover: var(--nexus-ref-neutral-50);
  --nexus-sys-color-button-secondary-gray-border-focus: var(--nexus-ref-neutral-50);
  --nexus-sys-color-button-secondary-gray-border-disabled: var(--nexus-ref-neutral-100);
  --nexus-sys-color-button-secondary-gray-text-default: var(--nexus-ref-neutral-50);
  --nexus-sys-color-button-secondary-gray-text-hover: var(--nexus-ref-neutral-20);
  --nexus-sys-color-button-secondary-gray-text-focus: var(--nexus-ref-neutral-50);
  --nexus-sys-color-button-secondary-gray-text-disabled: var(--nexus-ref-neutral-90);

  /* tertiary color */
  --nexus-sys-color-button-tertiary-default: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-tertiary-hover: var(--nexus-ref-primary-90);
  --nexus-sys-color-button-tertiary-focus: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-tertiary-disabled: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-tertiary-shadow: unset;
  --nexus-sys-color-button-tertiary-border-default: unset;
  --nexus-sys-color-button-tertiary-border-hover: unset;
  --nexus-sys-color-button-tertiary-border-focus: unset;
  --nexus-sys-color-button-tertiary-border-disabled: unset;
  --nexus-sys-color-button-tertiary-text-default: var(--nexus-ref-primary-20);
  --nexus-sys-color-button-tertiary-text-hover: var(--nexus-ref-primary-20);
  --nexus-sys-color-button-tertiary-text-focus: var(--nexus-ref-primary-10);
  --nexus-sys-color-button-tertiary-text-disabled: var(--nexus-ref-neutral-90);

  /* tertiary gray */
  --nexus-sys-color-button-tertiary-gray-default: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-tertiary-gray-hover: var(--nexus-ref-neutral-100);
  --nexus-sys-color-button-tertiary-gray-focus: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-tertiary-gray-disabled: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-tertiary-gray-shadow: unset;
  --nexus-sys-color-button-tertiary-gray-border-default: unset;
  --nexus-sys-color-button-tertiary-gray-border-hover: unset;
  --nexus-sys-color-button-tertiary-gray-border-focus: unset;
  --nexus-sys-color-button-tertiary-gray-border-disabled: unset;
  --nexus-sys-color-button-tertiary-gray-text: var(--nexus-ref-neutral-80);
  --nexus-sys-color-button-tertiary-gray-text-hover: var(--nexus-ref-neutral-50);
  --nexus-sys-color-button-tertiary-gray-text-focus: var(--nexus-ref-neutral-30);
  --nexus-sys-color-button-tertiary-gray-text-disabled: var(--nexus-ref-neutral-90);

  /* link color */
  --nexus-sys-color-button-link-default: transparent;
  --nexus-sys-color-button-link-hover: unset;
  --nexus-sys-color-button-link-focus: unset;
  --nexus-sys-color-button-link-disabled: unset;
  --nexus-sys-color-button-link-shadow: unset;
  --nexus-sys-color-button-link-border-default: unset;
  --nexus-sys-color-button-link-border-hover: unset;
  --nexus-sys-color-button-link-border-focus: unset;
  --nexus-sys-color-button-link-border-disabled: unset;
  --nexus-sys-color-button-link-text: var(--nexus-ref-primary-20);
  --nexus-sys-color-button-link-text-hover: var(--nexus-ref-primary-10);
  --nexus-sys-color-button-link-text-focus: var(--nexus-ref-primary-20);
  --nexus-sys-color-button-link-text-disabled: var(--nexus-ref-neutral-90);

  /* link gray color */
  --nexus-sys-color-button-link-gray-default: transparent;
  --nexus-sys-color-button-link-gray-hover: unset;
  --nexus-sys-color-button-link-gray-focus: unset;
  --nexus-sys-color-button-link-gray-disabled: unset;
  --nexus-sys-color-button-link-gray-shadow: unset;
  --nexus-sys-color-button-link-gray-border-default: unset;
  --nexus-sys-color-button-link-gray-border-hover: unset;
  --nexus-sys-color-button-link-gray-border-focus: unset;
  --nexus-sys-color-button-link-gray-border-disabled: unset;
  --nexus-sys-color-button-link-gray-text: var(--nexus-ref-neutral-80);
  --nexus-sys-color-button-link-gray-text-hover: var(--nexus-ref-neutral-50);
  --nexus-sys-color-button-link-gray-text-focus: var(--nexus-ref-neutral-80);
  --nexus-sys-color-button-link-gray-text-disabled: var(--nexus-ref-neutral-90);

  /* Focus Ring */
  --nexus-sys-focus-ring-width: 3px;
  --nexus-sys-focus-ring-offset: 0px;

  /* gap between icon and text */
  --nexus-sys-button-gap-default: var(--nexus-ref-spacing-8);
  --nexus-sys-button-gap-sm: var(--nexus-ref-spacing-8);
  --nexus-sys-button-gap-md: var(--nexus-ref-spacing-8);
  --nexus-sys-button-gap-lg: var(--nexus-ref-spacing-8);
  --nexus-sys-button-gap-xl: var(--nexus-ref-spacing-8);
  --nexus-sys-button-gap-xxl: var(--nexus-ref-spacing-12);

  /* Button primitives (reusable spacing/radius vars) */
  --nexus-sys-button-radius: var(--nexus-ref-shape-corner-small);
  --nexus-sys-button-padding-x-sm: var(--nexus-ref-spacing-14);
  --nexus-sys-button-padding-y-sm: var(--nexus-ref-spacing-8);
  --nexus-sys-button-padding-x-md: var(--nexus-ref-spacing-16);
  --nexus-sys-button-padding-y-md: var(--nexus-ref-spacing-10);
  --nexus-sys-button-padding-x-lg: var(--nexus-ref-spacing-18);
  --nexus-sys-button-padding-y-lg: var(--nexus-ref-spacing-10);
  --nexus-sys-button-padding-x-xl: var(--nexus-ref-spacing-20);
  --nexus-sys-button-padding-y-xl: var(--nexus-ref-spacing-12);
  --nexus-sys-button-padding-x-xxl: var(--nexus-ref-spacing-28);
  --nexus-sys-button-padding-y-xxl: var(--nexus-ref-spacing-16);

  /* Icon-only button paddings */
  --nexus-sys-button-icon-only-padding-sm: var(--nexus-ref-spacing-8);
  --nexus-sys-button-icon-only-padding-md: var(--nexus-ref-spacing-10);
  --nexus-sys-button-icon-only-padding-lg: var(--nexus-ref-spacing-12);
  --nexus-sys-button-icon-only-padding-xl: var(--nexus-ref-spacing-14);
  --nexus-sys-button-icon-only-padding-xxl: var(--nexus-ref-spacing-16);

  /* Icon sizes */
  --nexus-sys-button-icon-size-default: 20px;
  --nexus-sys-button-icon-size-sm: 20px;
  --nexus-sys-button-icon-size-md: 20px;
  --nexus-sys-button-icon-size-lg: 20px;
  --nexus-sys-button-icon-size-xl: 20px;
  --nexus-sys-button-icon-size-xxl: 24px;

  /* Dot icon sizes */
  --nexus-sys-button-dot-size-default: 8px;
  --nexus-sys-button-dot-size-sm: 8px;
  --nexus-sys-button-dot-size-md: 10px;
  --nexus-sys-button-dot-size-lg: 12px;
}

/* primary button destructive */
[data-destructive="true"] {
  /* primary button destructive */

  --nexus-sys-color-button-primary-default: var(--nexus-ref-error-80);
  --nexus-sys-color-button-primary-hover: var(--nexus-ref-error-50);
  --nexus-sys-color-button-primary-focus: var(--nexus-ref-error-80);
  --nexus-sys-color-button-primary-disabled: var(--nexus-ref-error-95);
  --nexus-sys-color-button-primary-shadow: var(--nexus-ref-error-95);
  --nexus-sys-color-button-primary-border-default: unset;
  --nexus-sys-color-button-primary-border-hover: unset;
  --nexus-sys-color-button-primary-border-focus: unset;
  --nexus-sys-color-button-primary-border-disabled: unset;
  --nexus-sys-color-button-primary-text-default: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-primary-text-hover: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-primary-text-focus: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-primary-text-disabled: var(--nexus-ref-primary-100);

  /* secondary button destructive */

  --nexus-sys-color-button-secondary-default: var(--nexus-ref-error-95);
  --nexus-sys-color-button-secondary-hover: var(--nexus-ref-error-90);
  --nexus-sys-color-button-secondary-focus: var(--nexus-ref-error-95);
  --nexus-sys-color-button-secondary-disabled: var(--nexus-ref-error-100);
  --nexus-sys-color-button-secondary-shadow: var(--nexus-ref-error-100);
  --nexus-sys-color-button-secondary-border-default: unset;
  --nexus-sys-color-button-secondary-border-hover: unset;
  --nexus-sys-color-button-secondary-border-focus: unset;
  --nexus-sys-color-button-secondary-border-disabled: unset;
  --nexus-sys-color-button-secondary-text-default: var(--nexus-ref-error-50);
  --nexus-sys-color-button-secondary-text-hover: var(--nexus-ref-error-30);
  --nexus-sys-color-button-secondary-text-focus: var(--nexus-ref-error-50);
  --nexus-sys-color-button-secondary-text-disabled: var(--nexus-ref-error-95);

  /* secondory gray destructive */
  --nexus-sys-color-button-secondary-gray-default: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-secondary-gray-hover: var(--nexus-ref-error-100);
  --nexus-sys-color-button-secondary-gray-focus: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-secondary-gray-disabled: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-secondary-gray-shadow: var(--nexus-ref-error-100);
  --nexus-sys-color-button-secondary-gray-border-default: var(--nexus-ref-error-95);
  --nexus-sys-color-button-secondary-gray-border-hover: transparent;
  --nexus-sys-color-button-secondary-gray-border-focus: var(--nexus-ref-error-95);
  --nexus-sys-color-button-secondary-gray-border-disabled: var(--nexus-ref-error-95);
  --nexus-sys-color-button-secondary-gray-text-default: var(--nexus-ref-error-50);
  --nexus-sys-color-button-secondary-gray-text-hover: var(--nexus-ref-error-20);
  --nexus-sys-color-button-secondary-gray-text-focus: var(--nexus-ref-error-50);
  --nexus-sys-color-button-secondary-gray-text-disabled: var(--nexus-ref-error-95);

  /* tertiary color */
  --nexus-sys-color-button-tertiary-default: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-tertiary-hover: var(--nexus-ref-error-100);
  --nexus-sys-color-button-tertiary-focus: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-tertiary-disabled: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-tertiary-shadow: unset;
  --nexus-sys-color-button-tertiary-border-default: unset;
  --nexus-sys-color-button-tertiary-border-hover: unset;
  --nexus-sys-color-button-tertiary-border-focus: unset;
  --nexus-sys-color-button-tertiary-border-disabled: unset;
  --nexus-sys-color-button-tertiary-text-default: var(--nexus-ref-error-50);
  --nexus-sys-color-button-tertiary-text-hover: var(--nexus-ref-error-50);
  --nexus-sys-color-button-tertiary-text-focus: var(--nexus-ref-error-50);
  --nexus-sys-color-button-tertiary-text-disabled: var(--nexus-ref-error-95);

  /* tertiary gray */
  --nexus-sys-color-button-tertiary-gray-default: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-tertiary-gray-hover: var(--nexus-ref-error-95);
  --nexus-sys-color-button-tertiary-gray-focus: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-tertiary-gray-disabled: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-tertiary-gray-shadow: unset;
  --nexus-sys-color-button-tertiary-gray-border-default: unset;
  --nexus-sys-color-button-tertiary-gray-border-hover: unset;
  --nexus-sys-color-button-tertiary-gray-border-focus: unset;
  --nexus-sys-color-button-tertiary-gray-border-disabled: unset;
  --nexus-sys-color-button-tertiary-gray-text: var(--nexus-ref-error-50);
  --nexus-sys-color-button-tertiary-gray-text-hover: var(--nexus-ref-error-30);
  --nexus-sys-color-button-tertiary-gray-text-focus: var(--nexus-ref-error-50);
  --nexus-sys-color-button-tertiary-gray-text-disabled: var(--nexus-ref-error-95);

  /* link color */
  --nexus-sys-color-button-link-default: transparent;
  --nexus-sys-color-button-link-hover: unset;
  --nexus-sys-color-button-link-focus: unset;
  --nexus-sys-color-button-link-disabled: unset;
  --nexus-sys-color-button-link-shadow: unset;
  --nexus-sys-color-button-link-border-default: unset;
  --nexus-sys-color-button-link-border-hover: unset;
  --nexus-sys-color-button-link-border-focus: unset;
  --nexus-sys-color-button-link-border-disabled: unset;
  --nexus-sys-color-button-link-text: var(--nexus-ref-error-50);
  --nexus-sys-color-button-link-text-hover: var(--nexus-ref-error-20);
  --nexus-sys-color-button-link-text-focus: var(--nexus-ref-error-50);
  --nexus-sys-color-button-link-text-disabled: var(--nexus-ref-error-95);

  /* link gray color */
  --nexus-sys-color-button-link-gray-default: transparent;
  --nexus-sys-color-button-link-gray-hover: unset;
  --nexus-sys-color-button-link-gray-focus: unset;
  --nexus-sys-color-button-link-gray-disabled: unset;
  --nexus-sys-color-button-link-gray-shadow: unset;
  --nexus-sys-color-button-link-gray-border-default: unset;
  --nexus-sys-color-button-link-gray-border-hover: unset;
  --nexus-sys-color-button-link-gray-border-focus: unset;
  --nexus-sys-color-button-link-gray-border-disabled: unset;
  --nexus-sys-color-button-link-gray-text: var(--nexus-ref-error-50);
  --nexus-sys-color-button-link-gray-text-hover: var(--nexus-ref-error-20);
  --nexus-sys-color-button-link-gray-text-focus: var(--nexus-ref-error-50);
  --nexus-sys-color-button-link-gray-text-disabled: var(--nexus-ref-error-95);
}



h1,
h2 {
  margin: 16px 0 8px;
}

.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  align-items: start;
  
}

.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 16px;
}

.swatch {
  display: inline-block;
  padding: 4px 8px;
  background: #f1f5f9;
  border-radius: 8px;
  font-size: 12px;
  color: #475569;
  width: 100%;
}

.muted {
  color: #64748b;
  font-size: 14px;
}

/* MD3 tokens provided by globals.css */

/* Button primitives provided by globals.css */

.NBC {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nexus-sys-button-gap-default);

  /* Typography */
  font-weight: var(--nexus-sys-typescale-font-weight-semibold);
  font-size: var(--nexus-sys-typescale-text-sm-font-size);

  /* Spacing */
  padding: var(--nexus-sys-button-padding-y-md) var(--nexus-sys-button-padding-x-md);
  border-radius: var(--nexus-sys-button-radius);

  /* Visual via variables (set by role/variant) */
  background: var(--nexus-com-button-background-color, transparent);
  color: var(--nexus-com-button-text-color, currentColor);
  border: 1px solid var(--nexus-com-button-border-color, transparent);
  box-shadow: var(--nexus-com-button-shadow);
  /* Interactions */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;

  /* Layering for state overlays */
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;

  /* Transitions */
  transition:
    color .15s ease,
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    filter .15s ease;

  /* Box Model */
  box-sizing: border-box;
}

/* ========================================
         STATES & ACCESSIBILITY
         ======================================== */
.NBC:disabled {
  cursor: not-allowed;
}

/* ========================================
         SIZES
 ======================================== */
.NBC[data-size="sm"] {
  padding: var(--nexus-sys-button-padding-y-sm) var(--nexus-sys-button-padding-x-sm);
  font-size: var(--nexus-sys-typescale-text-sm-font-size);
  line-height: var(--nexus-sys-typescale-text-sm-line-height);
  font-weight: var(--nexus-sys-typescale-font-weight-semibold);
  gap: var(--nexus-sys-button-gap-sm);

}

.NBC[data-size="md"] {
  padding: var(--nexus-sys-button-padding-y-md) var(--nexus-sys-button-padding-x-md);
  font-size: var(--nexus-sys-typescale-text-sm-font-size);
  line-height: var(--nexus-sys-typescale-text-sm-line-height);
  font-weight: var(--nexus-sys-typescale-font-weight-semibold);
  gap: var(--nexus-sys-button-gap-md);


}

.NBC[data-size="lg"] {
  padding: var(--nexus-sys-button-padding-y-lg) var(--nexus-sys-button-padding-x-lg);
  font-size: var(--nexus-sys-typescale-text-md-font-size);
  line-height: var(--nexus-sys-typescale-text-md-line-height);
  font-weight: var(--nexus-sys-typescale-font-weight-semibold);
  gap: var(--nexus-sys-button-gap-lg);

}

.NBC[data-size="xl"] {
  padding: var(--nexus-sys-button-padding-y-xl) var(--nexus-sys-button-padding-x-xl);
  font-size: var(--nexus-sys-typescale-text-md-font-size);
  line-height: var(--nexus-sys-typescale-text-md-line-height);
  font-weight: var(--nexus-sys-typescale-font-weight-semibold);
  gap: var(--nexus-sys-button-gap-xl);

}

.NBC[data-size="xxl"] {
  padding: var(--nexus-sys-button-padding-y-xxl) var(--nexus-sys-button-padding-x-xxl);
  font-size: var(--nexus-sys-typescale-text-lg-font-size);
  line-height: var(--nexus-sys-typescale-text-lg-line-height);
  font-weight: var(--nexus-sys-typescale-font-weight-semibold);
  gap: var(--nexus-sys-button-gap-xxl);

}


/* Icon-only sizing overrides */
.NBC[data-icon-only="true"] {
  padding: var(--nexus-sys-button-icon-only-padding-md);
}

.NBC[data-icon-only="true"][data-size="sm"] {
  padding: var(--nexus-sys-button-icon-only-padding-sm);
}

.NBC[data-icon-only="true"][data-size="md"] {
  padding: var(--nexus-sys-button-icon-only-padding-md);
}

.NBC[data-icon-only="true"][data-size="lg"] {
  padding: var(--nexus-sys-button-icon-only-padding-lg);
}

.NBC[data-icon-only="true"][data-size="xl"] {
  padding: var(--nexus-sys-button-icon-only-padding-xl);
}

.NBC[data-icon-only="true"][data-size="xxl"] {
  padding: var(--nexus-sys-button-icon-only-padding-xxl);
}


/* ========================================
         ROLE → INTENT VARIABLES
         ======================================== */
.NBC[data-role="primary"] {
  --nexus-com-button-background-color: var(--nexus-sys-color-button-primary-default);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-primary-text-default);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-primary-border-default);
}


.NBC[data-role="secondary"] {
  --nexus-com-button-background-color: var(--nexus-sys-color-button-secondary-default);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-secondary-text-default);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-secondary-border-default);

}

.NBC[data-role="secondary"][data-tone="gray"] {
  --nexus-com-button-background-color: var(--nexus-sys-color-button-secondary-gray-default);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-secondary-gray-text-default);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-secondary-gray-border-default)
}

/* Primary + data-tone (e.g. general modal primaryAction.role / primaryAction.tone) */
.NBC[data-role="primary"][data-tone="alert"] {
  --nexus-sys-color-button-primary-default: var(--nexus-ref-warning-30);
  --nexus-sys-color-button-primary-hover: var(--nexus-ref-warning-20);
  --nexus-sys-color-button-primary-focus: var(--nexus-ref-warning-20);
  --nexus-sys-color-button-primary-disabled: var(--nexus-ref-warning-90);
  --nexus-sys-color-button-primary-shadow: var(--nexus-ref-warning-80);
  --nexus-sys-color-button-primary-text-default: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-primary-text-hover: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-primary-text-focus: var(--nexus-ref-primary-100);
  --nexus-sys-color-button-primary-text-disabled: var(--nexus-ref-neutral-60);
  --nexus-sys-color-button-primary-border-default: transparent;
  --nexus-sys-color-button-primary-border-hover: transparent;
  --nexus-sys-color-button-primary-border-focus: transparent;
  --nexus-sys-color-button-primary-border-disabled: transparent;
}

.NBC[data-role="tertiary"] {
  --nexus-com-button-background-color: var(--nexus-sys-color-button-tertiary-default);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-tertiary-text-default);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-tertiary-border-default);

}

.NBC[data-role="tertiary"][data-tone="gray"] {
  --nexus-com-button-background-color: var(--nexus-sys-color-button-tertiary-gray-default);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-tertiary-gray-text);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-tertiary-gray-border-default);

}


.NBC[data-role="link"] {
  --nexus-com-button-background-color: var(--nexus-sys-color-button-link-default);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-link-text);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-link-border-default);
  padding: 0;
}

.NBC[data-role="link"][data-tone="gray"] {
  --nexus-com-button-background-color: var(--nexus-sys-color-button-link-gray-default);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-link-gray-text);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-link-gray-border-default);
  padding: 0;
}

/* Fix icon positioning for buttons with external SVG icons in dropdown */
/* The button component uses ::before for CSS icons, but external SVG icons need order on the SVG element */
.NBC[data-icon-position="after"] svg {
  order: 2;
}

.NBC[data-icon-position="before"] svg,
.NBC:not([data-icon-position]) svg {
  order: 0;
}



/* ========================================
         HOVER / ACTIVE / DISABLED TREATMENT (SUBTLE)
         ======================================== */

/* primary  filled*/
.NBC[data-role="primary"]:hover:not(:disabled) {
  --nexus-com-button-background-color: var(--nexus-sys-color-button-primary-hover);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-primary-text-hover);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-primary-border-hover)
}

.NBC[data-role="primary"]:active:not(:disabled) {
  --nexus-com-button-shadow:
    0 0 0 var(--nexus-sys-focus-ring-offset),
    0 0 0 var(--nexus-sys-focus-ring-width) var(--nexus-sys-color-button-primary-shadow);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-primary-text-focus);
  --nexus-com-button-background-color: var(--nexus-sys-color-button-primary-focus);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-primary-border-focus)
}

.NBC[data-role="primary"]:disabled {
  --nexus-com-button-background-color: var(--nexus-sys-color-button-primary-disabled);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-primary-text-disabled);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-primary-border-disabled)
}




/* secondary  filled*/
.NBC[data-role="secondary"]:hover:not(:disabled) {
  --nexus-com-button-background-color: var(--nexus-sys-color-button-secondary-hover);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-secondary-text-hover);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-secondary-border-hover);

}

.NBC[data-role="secondary"]:active:not(:disabled) {
  --nexus-com-button-shadow:
    0 0 0 var(--nexus-sys-focus-ring-offset, #fff),
    0 0 0 var(--nexus-sys-focus-ring-width) var(--nexus-sys-color-button-secondary-shadow);
  --nexus-com-button-background-color: var(--nexus-sys-color-button-secondary-focus);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-secondary-text-focus);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-secondary-border-focus);

}

.NBC[data-role="secondary"]:disabled {
  --nexus-com-button-background-color: var(--nexus-sys-color-button-secondary-disabled);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-secondary-text-disabled);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-secondary-border-disabled);
}

/* secondary Gray outlined*/


.NBC[data-role="secondary"][data-tone="gray"]:hover:not(:disabled) {
  --nexus-com-button-background-color: var(--nexus-sys-color-button-secondary-gray-hover);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-secondary-gray-text-hover);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-secondary-gray-border-hover)
}

.NBC[data-role="secondary"][data-tone="gray"]:active:not(:disabled) {
  --nexus-com-button-shadow:
    0 0 0 var(--nexus-sys-focus-ring-offset, #fff),
    0 0 0 var(--nexus-sys-focus-ring-width) var(--nexus-sys-color-button-secondary-gray-shadow);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-secondary-gray-text-focus);
  --nexus-com-button-background-color: var(--nexus-sys-color-button-secondary-gray-focus);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-secondary-gray-border-focus)
}

.NBC[data-role="secondary"][data-tone="gray"]:disabled {
  --nexus-com-button-background-color: var(--nexus-sys-color-button-secondary-gray-disabled);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-secondary-gray-text-disabled);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-secondary-gray-border-disabled)
}

/* tertiary base */


.NBC[data-role="tertiary"]:hover:not(:disabled) {
  --nexus-com-button-background-color: var(--nexus-sys-color-button-tertiary-hover);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-tertiary-border-hover);

}

.NBC[data-role="tertiary"]:active:not(:disabled) {
  --nexus-com-button-text-color: var(--nexus-sys-color-button-tertiary-text-focus);
  --nexus-com-button-background-color: var(--nexus-sys-color-button-tertiary-focus);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-tertiary-border-focus);

}

.NBC[data-role="tertiary"]:disabled {
  --nexus-com-button-text-color: var(--nexus-sys-color-button-tertiary-text-disabled);
  --nexus-com-button-background-color: transparent;
  --nexus-com-button-border-color: var(--nexus-sys-color-button-tertiary-border-disabled);
}

/* tertiary  gray */


.NBC[data-role="tertiary"][data-tone="gray"]:hover:not(:disabled) {
  --nexus-com-button-background-color: var(--nexus-sys-color-button-tertiary-gray-hover);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-tertiary-gray-text-hover);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-tertiary-gray-border-hover);

}

.NBC[data-role="tertiary"][data-tone="gray"]:active:not(:disabled) {
  --nexus-com-button-text-color: var(--nexus-sys-color-button-tertiary-gray-text-focus);
  --nexus-com-button-background-color: var(--nexus-sys-color-button-tertiary-gray-focus);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-tertiary-gray-border-focus);
}

.NBC[data-role="tertiary"][data-tone="gray"]:disabled {
  --nexus-com-button-text-color: var(--nexus-sys-color-button-tertiary-gray-text-disabled);
  --nexus-com-button-background-color: var(--nexus-sys-color-button-tertiary-gray-disabled);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-tertiary-gray-border-disabled);
}

/* link base */

.NBC[data-role="link"]:hover:not(:disabled) {
  --nexus-com-button-background-color: var(--nexus-sys-color-button-link-hover);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-link-text-hover);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-link-border-hover);

}

.NBC[data-role="link"]:active:not(:disabled) {
  --nexus-com-button-text-color: var(--nexus-sys-color-button-link-text-focus);
  --nexus-com-button-background-color: var(--nexus-sys-color-button-link-focus);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-link-border-focus);
}

.NBC[data-role="link"]:disabled {
  --nexus-com-button-text-color: var(--nexus-sys-color-button-link-text-disabled);
  --nexus-com-button-background-color: var(--nexus-sys-color-button-link-disabled);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-link-border-disabled);
}

/* link Gray */


.NBC[data-role="link"][data-tone="gray"]:hover:not(:disabled) {
  --nexus-com-button-background-color: var(--nexus-sys-color-button-link-gray-hover);
  --nexus-com-button-text-color: var(--nexus-sys-color-button-link-gray-text-hover);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-link-gray-border-hover);

}

.NBC[data-role="link"][data-tone="gray"]:active:not(:disabled) {
  --nexus-com-button-text-color: var(--nexus-sys-color-button-link-gray-text-focus);
  --nexus-com-button-background-color: var(--nexus-sys-color-button-link-gray-focus);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-link-gray-border-focus);

}

.NBC[data-role="link"][data-tone="gray"]:disabled {
  --nexus-com-button-text-color: var(--nexus-sys-color-button-link-gray-text-disabled);
  --nexus-com-button-background-color: var(--nexus-sys-color-button-link-gray-disabled);
  --nexus-com-button-border-color: var(--nexus-sys-color-button-link-gray-border-disabled);

}




/* ========================================
         BUSY / LOADING (no extra markup)
         ======================================== */
.NBC[aria-busy="true"] {
  pointer-events: none;

}


.NBC[aria-busy="true"]::before {
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  inset: 0;
  margin: auto;
  animation: btn-spin .7s linear infinite;
  opacity: 1;
  z-index: 4;
  background: none;
  /* override state layer bg when busy */
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
         ICON POSITIONING & STYLING
         ======================================== */


/* Default icon positioning (before text) */
.NBC[data-icon="circle"]::before {
  content: "";
  display: inline-block;
  width: var(--nexus-sys-button-icon-size-default);
  height: var(--nexus-sys-button-icon-size-default);
  border-radius: 50%;
  background-color: transparent;
  box-sizing: border-box;
  box-shadow: 0 0 0 1.67px currentColor inset;
  /* acts like stroke-width */
  vertical-align: middle;
}

/* ========================================
        ICON SIZING FOR INLINE/EXTERNAL SVG
        ======================================== */
/* Default size for non-dot SVG icons (when an SVG is present) */
.NBC[data-icon]:not([data-icon="dot"]) svg {
  width: var(--nexus-sys-button-icon-size-default);
  height: var(--nexus-sys-button-icon-size-default);
  vertical-align: middle;
  flex-shrink: 0;
}

/* Shared sizes for sm|md|lg|xl */
.NBC[data-icon="circle"][data-icon-size="sm"]::before,
.NBC[data-icon="circle"][data-icon-size="md"]::before,
.NBC[data-icon="circle"][data-icon-size="lg"]::before,
.NBC[data-icon="circle"][data-icon-size="xl"]::before,
.NBC[data-icon-size="sm"]:not([data-icon="dot"]) svg,
.NBC[data-icon-size="md"]:not([data-icon="dot"]) svg,
.NBC[data-icon-size="lg"]:not([data-icon="dot"]) svg,
.NBC[data-icon-size="xl"]:not([data-icon="dot"]) svg {
  width: var(--nexus-sys-button-icon-size-default);
  height: var(--nexus-sys-button-icon-size-default);
}

/* Special case for xxl */
.NBC[data-icon="circle"][data-icon-size="xxl"]::before,
.NBC[data-icon-size="xxl"]:not([data-icon="dot"]) svg {
  width: var(--nexus-sys-button-icon-size-xxl);
  height: var(--nexus-sys-button-icon-size-xxl);
}


/* Icon positioned after text */
.NBC[data-icon-position="after"]::before {
  margin-right: 0;
  order: 2;
  /* Move icon to end */
}

/* Icon positioned before text (default) */
.NBC[data-icon-position="before"]::before {
  margin-left: 0;
  order: 1;
  /* Keep icon at start */
}


/* Color overrides based on data-icon-color */
.NBC[data-icon][data-icon-color]::before {
  /* attr() color is not widely supported; use fallbacks via explicit variants or CSS vars */
  border-color: var(--nexus-com-button-text-color);
}


.NBC[data-icon="dot"]::before {
  content: "";
  display: inline-block;
  width: var(--nexus-sys-button-dot-size-default);
  height: var(--nexus-sys-button-dot-size-default);
  border-radius: 50%;
  background-color: currentColor;
  /* Default uses text color */
}

/* Size overrides for dot icon */
.NBC[data-icon="dot"][data-icon-size="sm"]::before {
  width: var(--nexus-sys-button-dot-size-sm);
  height: var(--nexus-sys-button-dot-size-sm);
}

.NBC[data-icon="dot"][data-icon-size="md"]::before {
  width: var(--nexus-sys-button-dot-size-md);
  height: var(--nexus-sys-button-dot-size-md);
}

.NBC[data-icon="dot"][data-icon-size="lg"]::before {
  width: var(--nexus-sys-button-dot-size-lg);
  height: var(--nexus-sys-button-dot-size-lg);
}


/* Color overrides based on data-icon-color */
.NBC[data-icon="dot"][data-icon-color="success"]::before {
  background-color: var(--nexus-ref-success-50);
  border-color: var(--nexus-ref-success-50);
}

.NBC[data-icon="dot"][data-icon-color="warning"]::before {
  background-color: var(--nexus-ref-error-50);
  border-color: var(--nexus-ref-error-50);
}

.NBC[data-icon="dot"][data-icon-color="default"]::before {
  background-color: var(--nexus-ref-primary-100);
  border-color: var(--nexus-ref-primary-100);

}

.NBC[data-icon="dot"]:disabled:before {
  background-color: currentColor;
}


/* ========================================
         REDUCED MOTION
         ======================================== */
@media (prefers-reduced-motion: reduce) {
  .NBC {
    transition: none;
  }

  .NBC[aria-busy="true"]::after {
    animation: none;
  }
}