@layer reset, tokens, base, components, utilities;

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  /* * {
    margin: 0;
  } */

  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  input, button, textarea, select {
    font: inherit;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer tokens {
  :root {
    --sx-color-neutral-50: #fafafa;
    --sx-color-neutral-100: #f5f5f5;
    --sx-color-neutral-200: #e5e5e5;
    --sx-color-neutral-300: #d4d4d4;
    --sx-color-neutral-400: #a3a3a3;
    --sx-color-neutral-500: #737373;
    --sx-color-neutral-600: #525252;
    --sx-color-neutral-700: #404040;
    --sx-color-neutral-800: #262626;
    --sx-color-neutral-900: #171717;
    --sx-color-neutral-950: #0a0a0a;
    --sx-color-brand-50: #eef2ff;
    --sx-color-brand-100: #e0e7ff;
    --sx-color-brand-200: #c7d2fe;
    --sx-color-brand-300: #a5b4fc;
    --sx-color-brand-400: #818cf8;
    --sx-color-brand-500: #6366f1;
    --sx-color-brand-600: #4f46e5;
    --sx-color-brand-700: #4338ca;
    --sx-color-brand-800: #3730a3;
    --sx-color-brand-900: #312e81;
    --sx-color-brand-950: #1e1b4b;
    --sx-color-success-50: #f0fdf4;
    --sx-color-success-100: #dcfce7;
    --sx-color-success-200: #bbf7d0;
    --sx-color-success-300: #86efac;
    --sx-color-success-400: #4ade80;
    --sx-color-success-500: #22c55e;
    --sx-color-success-600: #16a34a;
    --sx-color-success-700: #15803d;
    --sx-color-success-800: #166534;
    --sx-color-success-900: #14532d;
    --sx-color-success-950: #052e16;
    --sx-color-warning-50: #fffbeb;
    --sx-color-warning-100: #fef3c7;
    --sx-color-warning-200: #fde68a;
    --sx-color-warning-300: #fcd34d;
    --sx-color-warning-400: #fbbf24;
    --sx-color-warning-500: #f59e0b;
    --sx-color-warning-600: #d97706;
    --sx-color-warning-700: #b45309;
    --sx-color-warning-800: #92400e;
    --sx-color-warning-900: #78350f;
    --sx-color-warning-950: #451a03;
    --sx-color-danger-50: #fef2f2;
    --sx-color-danger-100: #fee2e2;
    --sx-color-danger-200: #fecaca;
    --sx-color-danger-300: #fca5a5;
    --sx-color-danger-400: #f87171;
    --sx-color-danger-500: #ef4444;
    --sx-color-danger-600: #dc2626;
    --sx-color-danger-700: #b91c1c;
    --sx-color-danger-800: #991b1b;
    --sx-color-danger-900: #7f1d1d;
    --sx-color-danger-950: #450a0a;
    --sx-space-2xs: 0.125rem;
    --sx-space-xs: 0.25rem;
    --sx-space-sm: 0.5rem;
    --sx-space-md: 1rem;
    --sx-space-lg: 1.5rem;
    --sx-space-xl: 2rem;
    --sx-space-2xl: 3rem;
    --sx-space-3xl: 4rem;
    --sx-radius-none: 0;
    --sx-radius-sm: 0.25rem;
    --sx-radius-md: 0.5rem;
    --sx-radius-lg: 0.75rem;
    --sx-radius-pill: 9999px;
    --sx-radius-full: 9999px;
    --sx-shadow-none: none;
    --sx-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --sx-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --sx-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --sx-text-xs-size: 0.75rem;
    --sx-text-xs-line: 1rem;
    --sx-text-sm-size: 0.875rem;
    --sx-text-sm-line: 1.25rem;
    --sx-text-md-size: 1rem;
    --sx-text-md-line: 1.5rem;
    --sx-text-lg-size: 1.125rem;
    --sx-text-lg-line: 1.75rem;
    --sx-text-xl-size: 1.25rem;
    --sx-text-xl-line: 1.75rem;
    --sx-weight-regular: 400;
    --sx-weight-medium: 500;
    --sx-weight-semibold: 600;
    --sx-weight-bold: 700;
    --sx-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --sx-font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
    --sx-surface-bg: #ffffff;
    --sx-surface-fg: #0a0a0a;
    --sx-surface-muted: #f5f5f5;
    --sx-surface-muted-fg: #737373;
    --sx-surface-border: #e5e5e5;
    --sx-surface-ring: #6366f1;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --sx-surface-bg: #0a0a0a;
      --sx-surface-fg: #fafafa;
      --sx-surface-muted: #262626;
      --sx-surface-muted-fg: #a3a3a3;
      --sx-surface-border: #262626;
      --sx-surface-ring: #818cf8;
    }
  }

  [data-theme="dark"] {
    --sx-surface-bg: #0a0a0a;
    --sx-surface-fg: #fafafa;
    --sx-surface-muted: #262626;
    --sx-surface-muted-fg: #a3a3a3;
    --sx-surface-border: #262626;
    --sx-surface-ring: #818cf8;
  }

  [data-theme="light"] {
    --sx-surface-bg: #ffffff;
    --sx-surface-fg: #0a0a0a;
    --sx-surface-muted: #f5f5f5;
    --sx-surface-muted-fg: #737373;
    --sx-surface-border: #e5e5e5;
    --sx-surface-ring: #6366f1;
  }
}

@layer base {
  body {
    font-family: var(--sx-font-sans);
    color: var(--sx-surface-fg);
    background-color: var(--sx-surface-bg);
    line-height: 1.5;
  }
}

@layer components {
  [ui="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sx-font-sans);
    font-weight: var(--sx-weight-medium);
    border-radius: var(--sx-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;
    text-decoration: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-size: var(--sx-text-sm-size);
    padding-inline: var(--sx-space-md);
    padding-block: var(--sx-space-sm);
    min-height: 2.5rem;
  }

  [ui="button"][size="xs"],
  [ui="button"][data-size="xs"] {
    font-size: var(--sx-text-xs-size);
    padding-inline: var(--sx-space-sm);
    padding-block: var(--sx-space-2xs);
    min-height: 1.75rem;
  }

  [ui="button"][size="sm"],
  [ui="button"][data-size="sm"] {
    font-size: var(--sx-text-sm-size);
    padding-inline: var(--sx-space-sm);
    padding-block: var(--sx-space-xs);
    min-height: 2rem;
  }

  [ui="button"][size="md"],
  [ui="button"][data-size="md"] {
    font-size: var(--sx-text-sm-size);
    padding-inline: var(--sx-space-md);
    padding-block: var(--sx-space-sm);
    min-height: 2.5rem;
  }

  [ui="button"][size="lg"],
  [ui="button"][data-size="lg"] {
    font-size: var(--sx-text-md-size);
    padding-inline: var(--sx-space-lg);
    padding-block: var(--sx-space-sm);
    min-height: 2.75rem;
  }

  [ui="button"][size="xl"],
  [ui="button"][data-size="xl"] {
    font-size: var(--sx-text-lg-size);
    padding-inline: var(--sx-space-xl);
    padding-block: var(--sx-space-md);
    min-height: 3.25rem;
  }

  [ui="button"][radius="none"] {
    border-radius: 0;
  }

  [ui="button"][radius="sm"] {
    border-radius: var(--sx-radius-sm);
  }

  [ui="button"][radius="md"] {
    border-radius: var(--sx-radius-md);
  }

  [ui="button"][radius="lg"] {
    border-radius: var(--sx-radius-lg);
  }

  [ui="button"][radius="pill"] {
    border-radius: var(--sx-radius-pill);
  }

  [ui="button"]:focus-visible {
    outline: 2px solid var(--sx-surface-ring);
    outline-offset: 2px;
  }

  [ui="button"]:disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }

  [ui="card"] {
    display: block;
    border-radius: var(--sx-radius-lg);
    border: 1px solid var(--sx-surface-border);
    background-color: var(--sx-surface-bg);
    overflow: hidden;
  }

  [ui="card"][surface="flat"] {
    background-color: var(--sx-surface-bg);
    box-shadow: none;
  }

  [ui="card"][surface="subtle"] {
    background-color: var(--sx-surface-muted);
    box-shadow: none;
  }

  [ui="card"][surface="elevated"] {
    background-color: var(--sx-surface-bg);
    box-shadow: var(--sx-shadow-md);
  }

  [ui="card"][radius="none"] {
    border-radius: 0;
  }

  [ui="card"][radius="sm"] {
    border-radius: var(--sx-radius-sm);
  }

  [ui="card"][radius="md"] {
    border-radius: var(--sx-radius-md);
  }

  [ui="card"][radius="lg"] {
    border-radius: var(--sx-radius-lg);
  }

  [ui="card"][radius="pill"] {
    border-radius: var(--sx-radius-pill);
  }

  [ui="card"][shadow="none"] {
    box-shadow: none;
  }

  [ui="card"][shadow="sm"] {
    box-shadow: var(--sx-shadow-sm);
  }

  [ui="card"][shadow="md"] {
    box-shadow: var(--sx-shadow-md);
  }

  [ui="card"][shadow="lg"] {
    box-shadow: var(--sx-shadow-lg);
  }

  [ui="card"][padding="xs"] {
    padding: var(--sx-space-xs);
  }

  [ui="card"][padding="sm"] {
    padding: var(--sx-space-sm);
  }

  [ui="card"][padding="md"] {
    padding: var(--sx-space-md);
  }

  [ui="card"][padding="lg"] {
    padding: var(--sx-space-lg);
  }

  [ui="card"][padding="xl"] {
    padding: var(--sx-space-xl);
  }

  [ui="stack"] {
    display: flex;
    flex-direction: column;
  }

  [ui="stack"][direction="vertical"] {
    flex-direction: column;
  }

  [ui="stack"][direction="horizontal"] {
    flex-direction: row;
  }

  [ui="stack"][gap="xs"] {
    gap: var(--sx-space-xs);
  }

  [ui="stack"][gap="sm"] {
    gap: var(--sx-space-sm);
  }

  [ui="stack"][gap="md"] {
    gap: var(--sx-space-md);
  }

  [ui="stack"][gap="lg"] {
    gap: var(--sx-space-lg);
  }

  [ui="stack"][gap="xl"] {
    gap: var(--sx-space-xl);
  }

  [ui="stack"][align="start"] {
    align-items: flex-start;
  }

  [ui="stack"][align="center"] {
    align-items: center;
  }

  [ui="stack"][align="end"] {
    align-items: flex-end;
  }

  [ui="stack"][align="stretch"] {
    align-items: stretch;
  }

  [ui="stack"][padding="xs"] {
    padding: var(--sx-space-xs);
  }

  [ui="stack"][padding="sm"] {
    padding: var(--sx-space-sm);
  }

  [ui="stack"][padding="md"] {
    padding: var(--sx-space-md);
  }

  [ui="stack"][padding="lg"] {
    padding: var(--sx-space-lg);
  }

  [ui="stack"][padding="xl"] {
    padding: var(--sx-space-xl);
  }

  [ui="text"] {
    font-family: var(--sx-font-sans);
    color: var(--sx-surface-fg);
    font-size: var(--sx-text-md-size);
    line-height: var(--sx-text-md-line);
  }

  [ui="text"][size="xs"],
  [ui="text"][data-size="xs"] {
    font-size: var(--sx-text-xs-size);
    line-height: var(--sx-text-xs-line);
  }

  [ui="text"][size="sm"],
  [ui="text"][data-size="sm"] {
    font-size: var(--sx-text-sm-size);
    line-height: var(--sx-text-sm-line);
  }

  [ui="text"][size="md"],
  [ui="text"][data-size="md"] {
    font-size: var(--sx-text-md-size);
    line-height: var(--sx-text-md-line);
  }

  [ui="text"][size="lg"],
  [ui="text"][data-size="lg"] {
    font-size: var(--sx-text-lg-size);
    line-height: var(--sx-text-lg-line);
  }

  [ui="text"][size="xl"],
  [ui="text"][data-size="xl"] {
    font-size: var(--sx-text-xl-size);
    line-height: var(--sx-text-xl-line);
  }

  [ui="text"][weight="regular"] {
    font-weight: var(--sx-weight-regular);
  }

  [ui="text"][weight="medium"] {
    font-weight: var(--sx-weight-medium);
  }

  [ui="text"][weight="semibold"] {
    font-weight: var(--sx-weight-semibold);
  }

  [ui="text"][weight="bold"] {
    font-weight: var(--sx-weight-bold);
  }

  [ui="text"][tone="neutral"] {
    color: var(--sx-surface-fg);
  }

  [ui="text"][tone="brand"] {
    color: var(--sx-color-brand-600);
  }

  [ui="text"][tone="success"] {
    color: var(--sx-color-success-600);
  }

  [ui="text"][tone="warning"] {
    color: var(--sx-color-warning-600);
  }

  [ui="text"][tone="danger"] {
    color: var(--sx-color-danger-600);
  }

  [ui="text"][align="start"] {
    text-align: start;
  }

  [ui="text"][align="center"] {
    text-align: center;
  }

  [ui="text"][align="end"] {
    text-align: end;
  }

  [ui="text"][align="stretch"] {
    text-align: justify;
  }

  [ui="input"] {
    display: block;
    width: 100%;
    font-family: var(--sx-font-sans);
    background-color: var(--sx-surface-bg);
    color: var(--sx-surface-fg);
    border: 1px solid var(--sx-surface-border);
    border-radius: var(--sx-radius-md);
    transition-property: border-color, box-shadow;
    transition-duration: 150ms;
    font-size: var(--sx-text-sm-size);
    padding-inline: var(--sx-space-md);
    padding-block: var(--sx-space-sm);
    min-height: 2.5rem;
  }

  [ui="input"][size="xs"],
  [ui="input"][data-size="xs"] {
    font-size: var(--sx-text-xs-size);
    padding-inline: var(--sx-space-sm);
    padding-block: var(--sx-space-2xs);
    min-height: 1.75rem;
  }

  [ui="input"][size="sm"],
  [ui="input"][data-size="sm"] {
    font-size: var(--sx-text-sm-size);
    padding-inline: var(--sx-space-sm);
    padding-block: var(--sx-space-xs);
    min-height: 2rem;
  }

  [ui="input"][size="md"],
  [ui="input"][data-size="md"] {
    font-size: var(--sx-text-sm-size);
    padding-inline: var(--sx-space-md);
    padding-block: var(--sx-space-sm);
    min-height: 2.5rem;
  }

  [ui="input"][size="lg"],
  [ui="input"][data-size="lg"] {
    font-size: var(--sx-text-md-size);
    padding-inline: var(--sx-space-md);
    padding-block: var(--sx-space-sm);
    min-height: 2.75rem;
  }

  [ui="input"][size="xl"],
  [ui="input"][data-size="xl"] {
    font-size: var(--sx-text-lg-size);
    padding-inline: var(--sx-space-lg);
    padding-block: var(--sx-space-md);
    min-height: 3.25rem;
  }

  [ui="input"][tone="neutral"] {
    border-color: var(--sx-surface-border);
  }

  [ui="input"][tone="brand"] {
    border-color: var(--sx-color-brand-300);
  }

  [ui="input"][tone="success"] {
    border-color: var(--sx-color-success-300);
  }

  [ui="input"][tone="warning"] {
    border-color: var(--sx-color-warning-300);
  }

  [ui="input"][tone="danger"] {
    border-color: var(--sx-color-danger-300);
  }

  [ui="input"][radius="none"] {
    border-radius: 0;
  }

  [ui="input"][radius="sm"] {
    border-radius: var(--sx-radius-sm);
  }

  [ui="input"][radius="md"] {
    border-radius: var(--sx-radius-md);
  }

  [ui="input"][radius="lg"] {
    border-radius: var(--sx-radius-lg);
  }

  [ui="input"][radius="pill"] {
    border-radius: var(--sx-radius-pill);
  }

  [ui="input"]:focus-visible {
    outline: 2px solid var(--sx-surface-ring);
    outline-offset: 2px;
    border-color: var(--sx-surface-ring);
  }

  [ui="input"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  [ui="input"]::placeholder {
    color: var(--sx-surface-muted-fg);
  }

  [ui="section"] {
    display: block;
  }

  [ui="section"][padding="xs"] {
    padding: var(--sx-space-xs);
  }

  [ui="section"][padding="sm"] {
    padding: var(--sx-space-sm);
  }

  [ui="section"][padding="md"] {
    padding: var(--sx-space-md);
  }

  [ui="section"][padding="lg"] {
    padding: var(--sx-space-lg);
  }

  [ui="section"][padding="xl"] {
    padding: var(--sx-space-xl);
  }

  [ui="section"][surface="flat"] {
    background-color: transparent;
  }

  [ui="section"][surface="subtle"] {
    background-color: var(--sx-surface-muted);
  }

  [ui="section"][surface="elevated"] {
    background-color: var(--sx-surface-bg);
    box-shadow: var(--sx-shadow-md);
  }

  [ui="section"][gap="xs"] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-space-xs);
  }

  [ui="section"][gap="sm"] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-space-sm);
  }

  [ui="section"][gap="md"] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-space-md);
  }

  [ui="section"][gap="lg"] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-space-lg);
  }

  [ui="section"][gap="xl"] {
    display: flex;
    flex-direction: column;
    gap: var(--sx-space-xl);
  }

  [ui="badge"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sx-font-sans);
    font-weight: var(--sx-weight-medium);
    white-space: nowrap;
    border-radius: var(--sx-radius-full);
    border: 1px solid transparent;
    font-size: var(--sx-text-xs-size);
    padding-inline: var(--sx-space-sm);
    padding-block: var(--sx-space-2xs);
  }

  [ui="badge"][size="xs"],
  [ui="badge"][data-size="xs"] {
    font-size: 0.625rem;
    padding-inline: var(--sx-space-xs);
    padding-block: 0.0625rem;
  }

  [ui="badge"][size="sm"],
  [ui="badge"][data-size="sm"] {
    font-size: var(--sx-text-xs-size);
    padding-inline: var(--sx-space-sm);
    padding-block: 0.125rem;
  }

  [ui="badge"][size="md"],
  [ui="badge"][data-size="md"] {
    font-size: var(--sx-text-xs-size);
    padding-inline: var(--sx-space-sm);
    padding-block: var(--sx-space-2xs);
  }

  [ui="badge"][size="lg"],
  [ui="badge"][data-size="lg"] {
    font-size: var(--sx-text-sm-size);
    padding-inline: var(--sx-space-md);
    padding-block: var(--sx-space-xs);
  }

  [ui="badge"][size="xl"],
  [ui="badge"][data-size="xl"] {
    font-size: var(--sx-text-sm-size);
    padding-inline: var(--sx-space-md);
    padding-block: var(--sx-space-xs);
  }

  [ui="badge"][radius="none"] {
    border-radius: 0;
  }

  [ui="badge"][radius="sm"] {
    border-radius: var(--sx-radius-sm);
  }

  [ui="badge"][radius="md"] {
    border-radius: var(--sx-radius-md);
  }

  [ui="badge"][radius="lg"] {
    border-radius: var(--sx-radius-lg);
  }

  [ui="badge"][radius="pill"] {
    border-radius: var(--sx-radius-pill);
  }

  [ui="container"] {
    display: block;
    margin-inline: auto;
    width: 100%;
    padding-inline: var(--sx-space-lg);
  }

  [ui="container"][max-width="sm"] {
    max-width: 640px;
  }

  [ui="container"][max-width="md"] {
    max-width: 768px;
  }

  [ui="container"][max-width="lg"] {
    max-width: 1024px;
  }

  [ui="container"][max-width="xl"] {
    max-width: 1280px;
  }

  [ui="container"][max-width="full"] {
    max-width: none;
  }

  [ui="container"][padding="xs"] {
    padding-inline: var(--sx-space-xs);
  }

  [ui="container"][padding="sm"] {
    padding-inline: var(--sx-space-sm);
  }

  [ui="container"][padding="md"] {
    padding-inline: var(--sx-space-md);
  }

  [ui="container"][padding="lg"] {
    padding-inline: var(--sx-space-lg);
  }

  [ui="container"][padding="xl"] {
    padding-inline: var(--sx-space-xl);
  }

  [ui="divider"] {
    border: none;
    border-top: 1px solid var(--sx-surface-border);
    width: 100%;
    height: 0;
    margin: 0;
  }

  [ui="divider"][orientation="horizontal"],
  [ui="divider"][data-orientation="horizontal"] {
    border-top: 1px solid var(--sx-surface-border);
    border-left: none;
    width: 100%;
    height: 0;
  }

  [ui="divider"][orientation="vertical"],
  [ui="divider"][data-orientation="vertical"] {
    border-top: none;
    border-left: 1px solid var(--sx-surface-border);
    width: 0;
    height: 100%;
    align-self: stretch;
  }

  [ui="alert"] {
    display: flex;
    align-items: center;
    gap: var(--sx-space-sm);
    font-family: var(--sx-font-sans);
    font-size: var(--sx-text-sm-size);
    line-height: 1.5;
    padding-inline: var(--sx-space-md);
    padding-block: var(--sx-space-sm);
    border-radius: var(--sx-radius-md);
    border: 1px solid transparent;
  }

  [ui="alert"][radius="none"] {
    border-radius: 0;
  }

  [ui="alert"][radius="sm"] {
    border-radius: var(--sx-radius-sm);
  }

  [ui="alert"][radius="md"] {
    border-radius: var(--sx-radius-md);
  }

  [ui="alert"][radius="lg"] {
    border-radius: var(--sx-radius-lg);
  }

  [ui="alert"][radius="pill"] {
    border-radius: var(--sx-radius-pill);
  }

  [ui="alert"][padding="xs"] {
    padding-inline: var(--sx-space-xs);
    padding-block: var(--sx-space-2xs);
  }

  [ui="alert"][padding="sm"] {
    padding-inline: var(--sx-space-sm);
    padding-block: var(--sx-space-xs);
  }

  [ui="alert"][padding="md"] {
    padding-inline: var(--sx-space-md);
    padding-block: var(--sx-space-sm);
  }

  [ui="alert"][padding="lg"] {
    padding-inline: var(--sx-space-lg);
    padding-block: var(--sx-space-md);
  }

  [ui="alert"][padding="xl"] {
    padding-inline: var(--sx-space-xl);
    padding-block: var(--sx-space-lg);
  }

  [ui="select"] {
    display: block;
    width: 100%;
    font-family: var(--sx-font-sans);
    border: 1px solid var(--sx-surface-border);
    background-color: var(--sx-surface-bg);
    color: var(--sx-surface-fg);
    border-radius: var(--sx-radius-md);
    transition-property: border-color, box-shadow;
    transition-duration: 150ms;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    font-size: var(--sx-text-sm-size);
    padding-inline: var(--sx-space-md);
    padding-block: var(--sx-space-sm);
    min-height: 2.5rem;
  }

  [ui="select"][size="xs"],
  [ui="select"][data-size="xs"] {
    font-size: var(--sx-text-xs-size);
    padding-inline: var(--sx-space-sm);
    padding-block: var(--sx-space-2xs);
    min-height: 1.75rem;
  }

  [ui="select"][size="sm"],
  [ui="select"][data-size="sm"] {
    font-size: var(--sx-text-sm-size);
    padding-inline: var(--sx-space-sm);
    padding-block: var(--sx-space-xs);
    min-height: 2rem;
  }

  [ui="select"][size="md"],
  [ui="select"][data-size="md"] {
    font-size: var(--sx-text-sm-size);
    padding-inline: var(--sx-space-md);
    padding-block: var(--sx-space-sm);
    min-height: 2.5rem;
  }

  [ui="select"][size="lg"],
  [ui="select"][data-size="lg"] {
    font-size: var(--sx-text-md-size);
    padding-inline: var(--sx-space-lg);
    padding-block: var(--sx-space-md);
    min-height: 3rem;
  }

  [ui="select"][size="xl"],
  [ui="select"][data-size="xl"] {
    font-size: var(--sx-text-lg-size);
    padding-inline: var(--sx-space-xl);
    padding-block: var(--sx-space-lg);
    min-height: 3.5rem;
  }

  [ui="select"][radius="none"] {
    border-radius: 0;
  }

  [ui="select"][radius="sm"] {
    border-radius: var(--sx-radius-sm);
  }

  [ui="select"][radius="md"] {
    border-radius: var(--sx-radius-md);
  }

  [ui="select"][radius="lg"] {
    border-radius: var(--sx-radius-lg);
  }

  [ui="select"][radius="pill"] {
    border-radius: var(--sx-radius-pill);
  }

  [ui="select"]:focus {
    outline: 2px solid var(--sx-surface-ring);
    outline-offset: 2px;
  }

  [ui="select"]:disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }

  [ui="textarea"] {
    display: block;
    width: 100%;
    font-family: var(--sx-font-sans);
    font-size: var(--sx-text-sm-size);
    line-height: 1.5;
    border: 1px solid var(--sx-surface-border);
    background-color: var(--sx-surface-bg);
    color: var(--sx-surface-fg);
    border-radius: var(--sx-radius-md);
    padding-inline: var(--sx-space-md);
    padding-block: var(--sx-space-sm);
    transition-property: border-color, box-shadow;
    transition-duration: 150ms;
    resize: vertical;
    min-height: 5rem;
  }

  [ui="textarea"][size="xs"],
  [ui="textarea"][data-size="xs"] {
    font-size: var(--sx-text-xs-size);
    padding-inline: var(--sx-space-sm);
    padding-block: var(--sx-space-2xs);
  }

  [ui="textarea"][size="sm"],
  [ui="textarea"][data-size="sm"] {
    font-size: var(--sx-text-sm-size);
    padding-inline: var(--sx-space-sm);
    padding-block: var(--sx-space-xs);
  }

  [ui="textarea"][size="md"],
  [ui="textarea"][data-size="md"] {
    font-size: var(--sx-text-sm-size);
    padding-inline: var(--sx-space-md);
    padding-block: var(--sx-space-sm);
  }

  [ui="textarea"][size="lg"],
  [ui="textarea"][data-size="lg"] {
    font-size: var(--sx-text-md-size);
    padding-inline: var(--sx-space-md);
    padding-block: var(--sx-space-sm);
  }

  [ui="textarea"][size="xl"],
  [ui="textarea"][data-size="xl"] {
    font-size: var(--sx-text-lg-size);
    padding-inline: var(--sx-space-lg);
    padding-block: var(--sx-space-md);
  }

  [ui="textarea"][radius="none"] {
    border-radius: 0;
  }

  [ui="textarea"][radius="sm"] {
    border-radius: var(--sx-radius-sm);
  }

  [ui="textarea"][radius="md"] {
    border-radius: var(--sx-radius-md);
  }

  [ui="textarea"][radius="lg"] {
    border-radius: var(--sx-radius-lg);
  }

  [ui="textarea"][radius="pill"] {
    border-radius: var(--sx-radius-pill);
  }

  [ui="textarea"]:focus {
    outline: 2px solid var(--sx-surface-ring);
    outline-offset: 2px;
  }

  [ui="textarea"]:disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }

  [ui="avatar"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sx-radius-full);
    overflow: hidden;
    flex-shrink: 0;
    background-color: var(--sx-color-neutral-200);
    color: var(--sx-color-neutral-600);
    font-family: var(--sx-font-sans);
    font-weight: var(--sx-weight-medium);
    object-fit: cover;
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--sx-text-sm-size);
  }

  [ui="avatar"][size="xs"],
  [ui="avatar"][data-size="xs"] {
    width: 1.5rem;
    height: 1.5rem;
    font-size: var(--sx-text-xs-size);
  }

  [ui="avatar"][size="sm"],
  [ui="avatar"][data-size="sm"] {
    width: 2rem;
    height: 2rem;
    font-size: var(--sx-text-xs-size);
  }

  [ui="avatar"][size="md"],
  [ui="avatar"][data-size="md"] {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--sx-text-sm-size);
  }

  [ui="avatar"][size="lg"],
  [ui="avatar"][data-size="lg"] {
    width: 3.5rem;
    height: 3.5rem;
    font-size: var(--sx-text-md-size);
  }

  [ui="avatar"][size="xl"],
  [ui="avatar"][data-size="xl"] {
    width: 5rem;
    height: 5rem;
    font-size: var(--sx-text-lg-size);
  }

  [ui="avatar"][radius="none"] {
    border-radius: 0;
  }

  [ui="avatar"][radius="sm"] {
    border-radius: var(--sx-radius-sm);
  }

  [ui="avatar"][radius="md"] {
    border-radius: var(--sx-radius-md);
  }

  [ui="avatar"][radius="lg"] {
    border-radius: var(--sx-radius-lg);
  }

  [ui="avatar"][radius="pill"] {
    border-radius: var(--sx-radius-full);
  }

  [ui="toggle"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: var(--sx-radius-full);
    border: 2px solid transparent;
    background-color: var(--sx-color-neutral-300);
    transition-property: background-color, border-color;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;
    width: 2.75rem;
    height: 1.5rem;
  }

  [ui="toggle"][size="sm"],
  [ui="toggle"][data-size="sm"] {
    width: 2rem;
    height: 1.125rem;
  }

  [ui="toggle"][size="md"],
  [ui="toggle"][data-size="md"] {
    width: 2.75rem;
    height: 1.5rem;
  }

  [ui="toggle"][size="lg"],
  [ui="toggle"][data-size="lg"] {
    width: 3.5rem;
    height: 2rem;
  }

  [ui="toggle"]:focus-visible {
    outline: 2px solid var(--sx-surface-ring);
    outline-offset: 2px;
  }

  [ui="toggle"]:disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }

  [ui="tabs"] {
    display: flex;
    align-items: center;
    gap: var(--sx-space-xs);
    border-bottom: 1px solid var(--sx-surface-border);
    font-family: var(--sx-font-sans);
  }

  [ui="tabs"][size="sm"],
  [ui="tabs"][data-size="sm"] {
    font-size: var(--sx-text-xs-size);
    padding-inline: var(--sx-space-xs);
    padding-block: var(--sx-space-sm);
  }

  [ui="tabs"][size="md"],
  [ui="tabs"][data-size="md"] {
    font-size: var(--sx-text-sm-size);
    padding-inline: var(--sx-space-sm);
    padding-block: var(--sx-space-md);
  }

  [ui="tabs"][size="lg"],
  [ui="tabs"][data-size="lg"] {
    font-size: var(--sx-text-md-size);
    padding-inline: var(--sx-space-md);
    padding-block: var(--sx-space-lg);
  }

  [ui="tabs"][gap="xs"] {
    gap: var(--sx-space-xs);
  }

  [ui="tabs"][gap="sm"] {
    gap: var(--sx-space-sm);
  }

  [ui="tabs"][gap="md"] {
    gap: var(--sx-space-md);
  }

  [ui="tabs"][gap="lg"] {
    gap: var(--sx-space-lg);
  }

  [ui="tabs"][gap="xl"] {
    gap: var(--sx-space-xl);
  }

  [ui="dialog"] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sx-space-md);
    font-family: var(--sx-font-sans);
    border-radius: var(--sx-radius-lg);
    background-color: var(--sx-surface-bg);
    color: var(--sx-surface-fg);
    border: 1px solid var(--sx-surface-border);
    max-width: 32rem;
    width: calc(100% - 2rem);
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding: var(--sx-space-lg);
  }

  [ui="dialog"][surface="flat"] {
    background-color: var(--sx-surface-bg);
    box-shadow: none;
  }

  [ui="dialog"][surface="subtle"] {
    background-color: var(--sx-surface-muted);
    box-shadow: none;
  }

  [ui="dialog"][surface="elevated"] {
    background-color: var(--sx-surface-bg);
    box-shadow: var(--sx-shadow-md);
  }

  [ui="dialog"][radius="none"] {
    border-radius: 0;
  }

  [ui="dialog"][radius="sm"] {
    border-radius: var(--sx-radius-sm);
  }

  [ui="dialog"][radius="md"] {
    border-radius: var(--sx-radius-md);
  }

  [ui="dialog"][radius="lg"] {
    border-radius: var(--sx-radius-lg);
  }

  [ui="dialog"][radius="pill"] {
    border-radius: var(--sx-radius-pill);
  }

  [ui="dialog"][shadow="none"] {
    box-shadow: none;
  }

  [ui="dialog"][shadow="sm"] {
    box-shadow: var(--sx-shadow-sm);
  }

  [ui="dialog"][shadow="md"] {
    box-shadow: var(--sx-shadow-md);
  }

  [ui="dialog"][shadow="lg"] {
    box-shadow: var(--sx-shadow-lg);
  }

  [ui="dialog"][padding="xs"] {
    padding: var(--sx-space-xs);
  }

  [ui="dialog"][padding="sm"] {
    padding: var(--sx-space-sm);
  }

  [ui="dialog"][padding="md"] {
    padding: var(--sx-space-md);
  }

  [ui="dialog"][padding="lg"] {
    padding: var(--sx-space-lg);
  }

  [ui="dialog"][padding="xl"] {
    padding: var(--sx-space-xl);
  }

  [ui="tooltip"] {
    display: inline-block;
    font-family: var(--sx-font-sans);
    font-size: var(--sx-text-xs-size);
    line-height: 1.4;
    padding-inline: var(--sx-space-sm);
    padding-block: var(--sx-space-2xs);
    border-radius: var(--sx-radius-sm);
    background-color: var(--sx-surface-fg);
    color: var(--sx-surface-bg);
    white-space: nowrap;
    pointer-events: none;
    z-index: 50;
  }

  [ui="tooltip"][size="sm"],
  [ui="tooltip"][data-size="sm"] {
    font-size: var(--sx-text-xs-size);
    padding-inline: var(--sx-space-xs);
    padding-block: var(--sx-space-2xs);
  }

  [ui="tooltip"][size="md"],
  [ui="tooltip"][data-size="md"] {
    font-size: var(--sx-text-xs-size);
    padding-inline: var(--sx-space-sm);
    padding-block: var(--sx-space-2xs);
  }

  [ui="tooltip"][size="lg"],
  [ui="tooltip"][data-size="lg"] {
    font-size: var(--sx-text-sm-size);
    padding-inline: var(--sx-space-md);
    padding-block: var(--sx-space-xs);
  }

  [ui="tooltip"][radius="none"] {
    border-radius: 0;
  }

  [ui="tooltip"][radius="sm"] {
    border-radius: var(--sx-radius-sm);
  }

  [ui="tooltip"][radius="md"] {
    border-radius: var(--sx-radius-md);
  }

  [ui="tooltip"][radius="lg"] {
    border-radius: var(--sx-radius-lg);
  }

  [ui="tooltip"][radius="pill"] {
    border-radius: var(--sx-radius-pill);
  }

  [ui="table"] {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sx-font-sans);
    font-size: var(--sx-text-sm-size);
    text-align: left;
  }

  [ui="table"][size="sm"],
  [ui="table"][data-size="sm"] {
    font-size: var(--sx-text-xs-size);
  }

  [ui="table"][size="md"],
  [ui="table"][data-size="md"] {
    font-size: var(--sx-text-sm-size);
  }

  [ui="table"][size="lg"],
  [ui="table"][data-size="lg"] {
    font-size: var(--sx-text-md-size);
  }

  [ui="nav"] {
    display: flex;
    align-items: center;
    font-family: var(--sx-font-sans);
  }

  [ui="nav"][direction="horizontal"] {
    flex-direction: row;
  }

  [ui="nav"][direction="vertical"] {
    flex-direction: column;
  }

  [ui="nav"][gap="xs"] {
    gap: var(--sx-space-xs);
  }

  [ui="nav"][gap="sm"] {
    gap: var(--sx-space-sm);
  }

  [ui="nav"][gap="md"] {
    gap: var(--sx-space-md);
  }

  [ui="nav"][gap="lg"] {
    gap: var(--sx-space-lg);
  }

  [ui="nav"][gap="xl"] {
    gap: var(--sx-space-xl);
  }

  [ui="nav"][align="start"] {
    align-items: flex-start;
  }

  [ui="nav"][align="center"] {
    align-items: center;
  }

  [ui="nav"][align="end"] {
    align-items: flex-end;
  }

  [ui="nav"][align="stretch"] {
    align-items: stretch;
  }

  [ui="checkbox"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid var(--sx-surface-border);
    border-radius: var(--sx-radius-sm);
    background-color: var(--sx-surface-bg);
    color: transparent;
    transition-property: background-color, border-color, color;
    transition-duration: 150ms;
    width: 1.125rem;
    height: 1.125rem;
  }

  [ui="checkbox"][size="sm"],
  [ui="checkbox"][data-size="sm"] {
    width: 1rem;
    height: 1rem;
  }

  [ui="checkbox"][size="md"],
  [ui="checkbox"][data-size="md"] {
    width: 1.125rem;
    height: 1.125rem;
  }

  [ui="checkbox"][size="lg"],
  [ui="checkbox"][data-size="lg"] {
    width: 1.5rem;
    height: 1.5rem;
  }

  [ui="checkbox"]:focus-visible {
    outline: 2px solid var(--sx-surface-ring);
    outline-offset: 2px;
  }

  [ui="checkbox"]:disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }

  [ui="radio"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid var(--sx-surface-border);
    border-radius: var(--sx-radius-full);
    background-color: var(--sx-surface-bg);
    color: transparent;
    transition-property: background-color, border-color, color;
    transition-duration: 150ms;
    width: 1.125rem;
    height: 1.125rem;
  }

  [ui="radio"][size="sm"],
  [ui="radio"][data-size="sm"] {
    width: 1rem;
    height: 1rem;
  }

  [ui="radio"][size="md"],
  [ui="radio"][data-size="md"] {
    width: 1.125rem;
    height: 1.125rem;
  }

  [ui="radio"][size="lg"],
  [ui="radio"][data-size="lg"] {
    width: 1.5rem;
    height: 1.5rem;
  }

  [ui="radio"]:focus-visible {
    outline: 2px solid var(--sx-surface-ring);
    outline-offset: 2px;
  }

  [ui="radio"]:disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
  }

  [ui="segmented"] {
    display: inline-flex;
    align-items: center;
    background-color: var(--sx-surface-muted);
    border-radius: var(--sx-radius-md);
    padding: 2px;
    gap: 2px;
    font-family: var(--sx-font-sans);
  }

  [ui="segmented"][size="xs"],
  [ui="segmented"][data-size="xs"] {
    font-size: var(--sx-text-xs-size);
    height: 1.75rem;
  }

  [ui="segmented"][size="sm"],
  [ui="segmented"][data-size="sm"] {
    font-size: var(--sx-text-xs-size);
    height: 2rem;
  }

  [ui="segmented"][size="md"],
  [ui="segmented"][data-size="md"] {
    font-size: var(--sx-text-sm-size);
    height: 2.25rem;
  }

  [ui="segmented"][size="lg"],
  [ui="segmented"][data-size="lg"] {
    font-size: var(--sx-text-md-size);
    height: 2.5rem;
  }

  [ui="segmented"][size="xl"],
  [ui="segmented"][data-size="xl"] {
    font-size: var(--sx-text-md-size);
    height: 2.75rem;
  }

  [ui="segmented"][radius="none"] {
    border-radius: 0;
  }

  [ui="segmented"][radius="sm"] {
    border-radius: var(--sx-radius-sm);
  }

  [ui="segmented"][radius="md"] {
    border-radius: var(--sx-radius-md);
  }

  [ui="segmented"][radius="lg"] {
    border-radius: var(--sx-radius-lg);
  }

  [ui="segmented"][radius="pill"] {
    border-radius: var(--sx-radius-pill);
  }

  [ui="segment"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--sx-space-sm);
    padding-block: 0;
    border: none;
    background: transparent;
    color: var(--sx-surface-muted-fg);
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--sx-weight-medium);
    line-height: 1;
    cursor: pointer;
    border-radius: calc(var(--sx-radius-md) - 2px);
    transition-property: background-color, color, box-shadow;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;
    white-space: nowrap;
    height: 100%;
    -webkit-font-smoothing: antialiased;
  }

  [ui="segment"]:hover {
    color: var(--sx-surface-fg);
  }

  [ui="segment"][aria-pressed="true"] {
    background-color: var(--sx-surface-bg);
    color: var(--sx-surface-fg);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

  [ui="segment"][data-active="true"] {
    background-color: var(--sx-surface-bg);
    color: var(--sx-surface-fg);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  }

  [ui="button"][tone="neutral"][emphasis="high"] {
    background-color: var(--sx-surface-fg);
    color: var(--sx-surface-bg);
    border-color: var(--sx-surface-fg);
  }

  [ui="button"][tone="neutral"][emphasis="high"]:hover {
    background-color: var(--sx-color-neutral-800);
    border-color: var(--sx-color-neutral-800);
  }

  [ui="button"][tone="neutral"][emphasis="medium"] {
    background-color: transparent;
    color: var(--sx-surface-fg);
    border-color: var(--sx-surface-border);
  }

  [ui="button"][tone="neutral"][emphasis="medium"]:hover {
    background-color: var(--sx-surface-muted);
  }

  [ui="button"][tone="neutral"][emphasis="low"] {
    background-color: var(--sx-surface-muted);
    color: var(--sx-surface-fg);
    border-color: transparent;
  }

  [ui="button"][tone="neutral"][emphasis="low"]:hover {
    background-color: var(--sx-surface-border);
  }

  [ui="button"][tone="brand"][emphasis="high"] {
    background-color: var(--sx-color-brand-600);
    color: #ffffff;
    border-color: var(--sx-color-brand-600);
  }

  [ui="button"][tone="brand"][emphasis="high"]:hover {
    background-color: var(--sx-color-brand-700);
    border-color: var(--sx-color-brand-700);
  }

  [ui="button"][tone="brand"][emphasis="medium"] {
    background-color: transparent;
    color: var(--sx-color-brand-700);
    border-color: var(--sx-color-brand-300);
  }

  [ui="button"][tone="brand"][emphasis="medium"]:hover {
    background-color: var(--sx-color-brand-50);
  }

  [ui="button"][tone="brand"][emphasis="low"] {
    background-color: var(--sx-color-brand-50);
    color: var(--sx-color-brand-700);
    border-color: transparent;
  }

  [ui="button"][tone="brand"][emphasis="low"]:hover {
    background-color: var(--sx-color-brand-100);
  }

  [ui="button"][tone="success"][emphasis="high"] {
    background-color: var(--sx-color-success-600);
    color: #ffffff;
    border-color: var(--sx-color-success-600);
  }

  [ui="button"][tone="success"][emphasis="high"]:hover {
    background-color: var(--sx-color-success-700);
    border-color: var(--sx-color-success-700);
  }

  [ui="button"][tone="success"][emphasis="medium"] {
    background-color: transparent;
    color: var(--sx-color-success-700);
    border-color: var(--sx-color-success-300);
  }

  [ui="button"][tone="success"][emphasis="medium"]:hover {
    background-color: var(--sx-color-success-50);
  }

  [ui="button"][tone="success"][emphasis="low"] {
    background-color: var(--sx-color-success-50);
    color: var(--sx-color-success-700);
    border-color: transparent;
  }

  [ui="button"][tone="success"][emphasis="low"]:hover {
    background-color: var(--sx-color-success-100);
  }

  [ui="button"][tone="warning"][emphasis="high"] {
    background-color: var(--sx-color-warning-600);
    color: #ffffff;
    border-color: var(--sx-color-warning-600);
  }

  [ui="button"][tone="warning"][emphasis="high"]:hover {
    background-color: var(--sx-color-warning-700);
    border-color: var(--sx-color-warning-700);
  }

  [ui="button"][tone="warning"][emphasis="medium"] {
    background-color: transparent;
    color: var(--sx-color-warning-700);
    border-color: var(--sx-color-warning-300);
  }

  [ui="button"][tone="warning"][emphasis="medium"]:hover {
    background-color: var(--sx-color-warning-50);
  }

  [ui="button"][tone="warning"][emphasis="low"] {
    background-color: var(--sx-color-warning-50);
    color: var(--sx-color-warning-700);
    border-color: transparent;
  }

  [ui="button"][tone="warning"][emphasis="low"]:hover {
    background-color: var(--sx-color-warning-100);
  }

  [ui="button"][tone="danger"][emphasis="high"] {
    background-color: var(--sx-color-danger-600);
    color: #ffffff;
    border-color: var(--sx-color-danger-600);
  }

  [ui="button"][tone="danger"][emphasis="high"]:hover {
    background-color: var(--sx-color-danger-700);
    border-color: var(--sx-color-danger-700);
  }

  [ui="button"][tone="danger"][emphasis="medium"] {
    background-color: transparent;
    color: var(--sx-color-danger-700);
    border-color: var(--sx-color-danger-300);
  }

  [ui="button"][tone="danger"][emphasis="medium"]:hover {
    background-color: var(--sx-color-danger-50);
  }

  [ui="button"][tone="danger"][emphasis="low"] {
    background-color: var(--sx-color-danger-50);
    color: var(--sx-color-danger-700);
    border-color: transparent;
  }

  [ui="button"][tone="danger"][emphasis="low"]:hover {
    background-color: var(--sx-color-danger-100);
  }

  [ui="button"][tone="ghost"][emphasis="high"] {
    background-color: transparent;
    color: var(--sx-surface-fg);
    border-color: transparent;
  }

  [ui="button"][tone="ghost"][emphasis="high"]:hover {
    background-color: var(--sx-surface-muted);
  }

  [ui="button"][tone="ghost"][emphasis="medium"] {
    background-color: transparent;
    color: var(--sx-muted-fg);
    border-color: transparent;
  }

  [ui="button"][tone="ghost"][emphasis="medium"]:hover {
    background-color: var(--sx-surface-muted);
    color: var(--sx-surface-fg);
  }

  [ui="button"][tone="ghost"][emphasis="low"] {
    background-color: transparent;
    color: var(--sx-muted-fg);
    border-color: transparent;
  }

  [ui="button"][tone="ghost"][emphasis="low"]:hover {
    background-color: var(--sx-surface-muted);
    color: var(--sx-surface-fg);
  }

  [ui="badge"][tone="neutral"][emphasis="high"] {
    background-color: var(--sx-color-neutral-600);
    color: #ffffff;
  }

  [ui="badge"][tone="neutral"][emphasis="medium"] {
    background-color: var(--sx-color-neutral-100);
    color: var(--sx-color-neutral-700);
    border-color: var(--sx-color-neutral-200);
  }

  [ui="badge"][tone="neutral"][emphasis="low"] {
    background-color: transparent;
    color: var(--sx-color-neutral-600);
    border-color: var(--sx-color-neutral-200);
  }

  [ui="badge"][tone="brand"][emphasis="high"] {
    background-color: var(--sx-color-brand-600);
    color: #ffffff;
  }

  [ui="badge"][tone="brand"][emphasis="medium"] {
    background-color: var(--sx-color-brand-100);
    color: var(--sx-color-brand-700);
    border-color: var(--sx-color-brand-200);
  }

  [ui="badge"][tone="brand"][emphasis="low"] {
    background-color: transparent;
    color: var(--sx-color-brand-600);
    border-color: var(--sx-color-brand-200);
  }

  [ui="badge"][tone="success"][emphasis="high"] {
    background-color: var(--sx-color-success-600);
    color: #ffffff;
  }

  [ui="badge"][tone="success"][emphasis="medium"] {
    background-color: var(--sx-color-success-100);
    color: var(--sx-color-success-700);
    border-color: var(--sx-color-success-200);
  }

  [ui="badge"][tone="success"][emphasis="low"] {
    background-color: transparent;
    color: var(--sx-color-success-600);
    border-color: var(--sx-color-success-200);
  }

  [ui="badge"][tone="warning"][emphasis="high"] {
    background-color: var(--sx-color-warning-600);
    color: #ffffff;
  }

  [ui="badge"][tone="warning"][emphasis="medium"] {
    background-color: var(--sx-color-warning-100);
    color: var(--sx-color-warning-700);
    border-color: var(--sx-color-warning-200);
  }

  [ui="badge"][tone="warning"][emphasis="low"] {
    background-color: transparent;
    color: var(--sx-color-warning-600);
    border-color: var(--sx-color-warning-200);
  }

  [ui="badge"][tone="danger"][emphasis="high"] {
    background-color: var(--sx-color-danger-600);
    color: #ffffff;
  }

  [ui="badge"][tone="danger"][emphasis="medium"] {
    background-color: var(--sx-color-danger-100);
    color: var(--sx-color-danger-700);
    border-color: var(--sx-color-danger-200);
  }

  [ui="badge"][tone="danger"][emphasis="low"] {
    background-color: transparent;
    color: var(--sx-color-danger-600);
    border-color: var(--sx-color-danger-200);
  }

  [ui="badge"][tone="ghost"][emphasis="high"] {
    background-color: transparent;
    color: var(--sx-muted-fg);
  }

  [ui="badge"][tone="ghost"][emphasis="medium"] {
    background-color: transparent;
    color: var(--sx-muted-fg);
    border-color: var(--sx-surface-border);
  }

  [ui="badge"][tone="ghost"][emphasis="low"] {
    background-color: transparent;
    color: var(--sx-muted-fg);
    border-color: transparent;
  }

  [ui="alert"][tone="neutral"][emphasis="high"] {
    background-color: var(--sx-color-neutral-600);
    color: #ffffff;
    border-color: var(--sx-color-neutral-600);
  }

  [ui="alert"][tone="neutral"][emphasis="medium"] {
    background-color: var(--sx-color-neutral-100);
    color: var(--sx-color-neutral-700);
    border-color: var(--sx-color-neutral-200);
  }

  [ui="alert"][tone="neutral"][emphasis="low"] {
    background-color: transparent;
    color: var(--sx-color-neutral-600);
    border-color: var(--sx-color-neutral-200);
  }

  [ui="alert"][tone="brand"][emphasis="high"] {
    background-color: var(--sx-color-brand-600);
    color: #ffffff;
    border-color: var(--sx-color-brand-600);
  }

  [ui="alert"][tone="brand"][emphasis="medium"] {
    background-color: var(--sx-color-brand-100);
    color: var(--sx-color-brand-700);
    border-color: var(--sx-color-brand-200);
  }

  [ui="alert"][tone="brand"][emphasis="low"] {
    background-color: transparent;
    color: var(--sx-color-brand-600);
    border-color: var(--sx-color-brand-200);
  }

  [ui="alert"][tone="success"][emphasis="high"] {
    background-color: var(--sx-color-success-600);
    color: #ffffff;
    border-color: var(--sx-color-success-600);
  }

  [ui="alert"][tone="success"][emphasis="medium"] {
    background-color: var(--sx-color-success-100);
    color: var(--sx-color-success-700);
    border-color: var(--sx-color-success-200);
  }

  [ui="alert"][tone="success"][emphasis="low"] {
    background-color: transparent;
    color: var(--sx-color-success-600);
    border-color: var(--sx-color-success-200);
  }

  [ui="alert"][tone="warning"][emphasis="high"] {
    background-color: var(--sx-color-warning-600);
    color: #ffffff;
    border-color: var(--sx-color-warning-600);
  }

  [ui="alert"][tone="warning"][emphasis="medium"] {
    background-color: var(--sx-color-warning-100);
    color: var(--sx-color-warning-700);
    border-color: var(--sx-color-warning-200);
  }

  [ui="alert"][tone="warning"][emphasis="low"] {
    background-color: transparent;
    color: var(--sx-color-warning-600);
    border-color: var(--sx-color-warning-200);
  }

  [ui="alert"][tone="danger"][emphasis="high"] {
    background-color: var(--sx-color-danger-600);
    color: #ffffff;
    border-color: var(--sx-color-danger-600);
  }

  [ui="alert"][tone="danger"][emphasis="medium"] {
    background-color: var(--sx-color-danger-100);
    color: var(--sx-color-danger-700);
    border-color: var(--sx-color-danger-200);
  }

  [ui="alert"][tone="danger"][emphasis="low"] {
    background-color: transparent;
    color: var(--sx-color-danger-600);
    border-color: var(--sx-color-danger-200);
  }

  [ui="alert"][tone="ghost"][emphasis="high"] {
    background-color: transparent;
    color: var(--sx-muted-fg);
    border-color: var(--sx-surface-border);
  }

  [ui="alert"][tone="ghost"][emphasis="medium"] {
    background-color: transparent;
    color: var(--sx-muted-fg);
    border-color: var(--sx-surface-border);
  }

  [ui="alert"][tone="ghost"][emphasis="low"] {
    background-color: transparent;
    color: var(--sx-muted-fg);
    border-color: transparent;
  }

  [ui="toggle"][tone="neutral"][emphasis="checked"] {
    background-color: var(--sx-color-neutral-600);
  }

  [ui="toggle"][tone="brand"][emphasis="checked"] {
    background-color: var(--sx-color-brand-600);
  }

  [ui="toggle"][tone="success"][emphasis="checked"] {
    background-color: var(--sx-color-success-600);
  }

  [ui="toggle"][tone="warning"][emphasis="checked"] {
    background-color: var(--sx-color-warning-600);
  }

  [ui="toggle"][tone="danger"][emphasis="checked"] {
    background-color: var(--sx-color-danger-600);
  }

  [ui="toggle"][tone="ghost"][emphasis="checked"] {
    background-color: var(--sx-surface-fg);
  }

  [ui="checkbox"][tone="neutral"][emphasis="checked"] {
    background-color: var(--sx-color-neutral-600);
    border-color: var(--sx-color-neutral-600);
    color: #ffffff;
  }

  [ui="checkbox"][tone="brand"][emphasis="checked"] {
    background-color: var(--sx-color-brand-600);
    border-color: var(--sx-color-brand-600);
    color: #ffffff;
  }

  [ui="checkbox"][tone="success"][emphasis="checked"] {
    background-color: var(--sx-color-success-600);
    border-color: var(--sx-color-success-600);
    color: #ffffff;
  }

  [ui="checkbox"][tone="warning"][emphasis="checked"] {
    background-color: var(--sx-color-warning-600);
    border-color: var(--sx-color-warning-600);
    color: #ffffff;
  }

  [ui="checkbox"][tone="danger"][emphasis="checked"] {
    background-color: var(--sx-color-danger-600);
    border-color: var(--sx-color-danger-600);
    color: #ffffff;
  }

  [ui="checkbox"][tone="ghost"][emphasis="checked"] {
    background-color: var(--sx-surface-fg);
    border-color: var(--sx-surface-fg);
    color: var(--sx-surface-bg);
  }

  [ui="radio"][tone="neutral"][emphasis="checked"] {
    background-color: var(--sx-color-neutral-600);
    border-color: var(--sx-color-neutral-600);
    color: #ffffff;
  }

  [ui="radio"][tone="brand"][emphasis="checked"] {
    background-color: var(--sx-color-brand-600);
    border-color: var(--sx-color-brand-600);
    color: #ffffff;
  }

  [ui="radio"][tone="success"][emphasis="checked"] {
    background-color: var(--sx-color-success-600);
    border-color: var(--sx-color-success-600);
    color: #ffffff;
  }

  [ui="radio"][tone="warning"][emphasis="checked"] {
    background-color: var(--sx-color-warning-600);
    border-color: var(--sx-color-warning-600);
    color: #ffffff;
  }

  [ui="radio"][tone="danger"][emphasis="checked"] {
    background-color: var(--sx-color-danger-600);
    border-color: var(--sx-color-danger-600);
    color: #ffffff;
  }

  [ui="radio"][tone="ghost"][emphasis="checked"] {
    background-color: var(--sx-surface-fg);
    border-color: var(--sx-surface-fg);
    color: var(--sx-surface-bg);
  }
}

@layer utilities {
  @keyframes sx-spin {
    to { transform: rotate(360deg); }
  }

  @keyframes sx-ping {
    75%, 100% { transform: scale(2); opacity: 0; }
  }

  @keyframes sx-pulse {
    50% { opacity: .5; }
  }

  @keyframes sx-bounce {
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
  }

  [display="block"] {
    display: block;
  }

  [display="inline-block"] {
    display: inline-block;
  }

  [display="inline"] {
    display: inline;
  }

  [display="flex"] {
    display: flex;
  }

  [display="inline-flex"] {
    display: inline-flex;
  }

  [display="grid"] {
    display: grid;
  }

  [display="inline-grid"] {
    display: inline-grid;
  }

  [display="hidden"] {
    display: none;
  }

  [display="contents"] {
    display: contents;
  }

  [position="static"] {
    position: static;
  }

  [position="relative"] {
    position: relative;
  }

  [position="absolute"] {
    position: absolute;
  }

  [position="fixed"] {
    position: fixed;
  }

  [position="sticky"] {
    position: sticky;
  }

  [overflow="auto"] {
    overflow: auto;
  }

  [overflow="hidden"] {
    overflow: hidden;
  }

  [overflow="visible"] {
    overflow: visible;
  }

  [overflow="scroll"] {
    overflow: scroll;
  }

  [overflow="clip"] {
    overflow: clip;
  }

  [overflow-x="auto"] {
    overflow-x: auto;
  }

  [overflow-x="hidden"] {
    overflow-x: hidden;
  }

  [overflow-x="visible"] {
    overflow-x: visible;
  }

  [overflow-x="scroll"] {
    overflow-x: scroll;
  }

  [overflow-x="clip"] {
    overflow-x: clip;
  }

  [overflow-y="auto"] {
    overflow-y: auto;
  }

  [overflow-y="hidden"] {
    overflow-y: hidden;
  }

  [overflow-y="visible"] {
    overflow-y: visible;
  }

  [overflow-y="scroll"] {
    overflow-y: scroll;
  }

  [overflow-y="clip"] {
    overflow-y: clip;
  }

  [flex-direction="row"] {
    flex-direction: row;
  }

  [flex-direction="row-reverse"] {
    flex-direction: row-reverse;
  }

  [flex-direction="col"] {
    flex-direction: column;
  }

  [flex-direction="col-reverse"] {
    flex-direction: column-reverse;
  }

  [flex-wrap="wrap"] {
    flex-wrap: wrap;
  }

  [flex-wrap="nowrap"] {
    flex-wrap: nowrap;
  }

  [flex-wrap="wrap-reverse"] {
    flex-wrap: wrap-reverse;
  }

  [flex="1"] {
    flex: 1 1 0%;
  }

  [flex="auto"] {
    flex: 1 1 auto;
  }

  [flex="initial"] {
    flex: 0 1 auto;
  }

  [flex="none"] {
    flex: none;
  }

  [flex-grow="0"] {
    flex-grow: 0;
  }

  [flex-grow="1"] {
    flex-grow: 1;
  }

  [flex-shrink="0"] {
    flex-shrink: 0;
  }

  [flex-shrink="1"] {
    flex-shrink: 1;
  }

  [justify-content="start"] {
    justify-content: flex-start;
  }

  [justify-content="end"] {
    justify-content: flex-end;
  }

  [justify-content="center"] {
    justify-content: center;
  }

  [justify-content="between"] {
    justify-content: space-between;
  }

  [justify-content="around"] {
    justify-content: space-around;
  }

  [justify-content="evenly"] {
    justify-content: space-evenly;
  }

  [align-items="start"] {
    align-items: flex-start;
  }

  [align-items="end"] {
    align-items: flex-end;
  }

  [align-items="center"] {
    align-items: center;
  }

  [align-items="baseline"] {
    align-items: baseline;
  }

  [align-items="stretch"] {
    align-items: stretch;
  }

  [align-self="auto"] {
    align-self: auto;
  }

  [align-self="start"] {
    align-self: flex-start;
  }

  [align-self="end"] {
    align-self: flex-end;
  }

  [align-self="center"] {
    align-self: center;
  }

  [align-self="stretch"] {
    align-self: stretch;
  }

  [grid-cols="1"] {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  [grid-cols="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [grid-cols="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  [grid-cols="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  [grid-cols="5"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  [grid-cols="6"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  [grid-cols="12"] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  [grid-cols="none"] {
    grid-template-columns: none;
  }

  [grid-rows="1"] {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }

  [grid-rows="2"] {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  [grid-rows="3"] {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }

  [grid-rows="4"] {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  [grid-rows="5"] {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }

  [grid-rows="6"] {
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }

  [grid-rows="none"] {
    grid-template-rows: none;
  }

  [col-span="1"] {
    grid-column: span 1 / span 1;
  }

  [col-span="2"] {
    grid-column: span 2 / span 2;
  }

  [col-span="3"] {
    grid-column: span 3 / span 3;
  }

  [col-span="4"] {
    grid-column: span 4 / span 4;
  }

  [col-span="5"] {
    grid-column: span 5 / span 5;
  }

  [col-span="6"] {
    grid-column: span 6 / span 6;
  }

  [col-span="full"] {
    grid-column: 1 / -1;
  }

  [row-span="1"] {
    grid-row: span 1 / span 1;
  }

  [row-span="2"] {
    grid-row: span 2 / span 2;
  }

  [row-span="3"] {
    grid-row: span 3 / span 3;
  }

  [row-span="4"] {
    grid-row: span 4 / span 4;
  }

  [row-span="5"] {
    grid-row: span 5 / span 5;
  }

  [row-span="6"] {
    grid-row: span 6 / span 6;
  }

  [row-span="full"] {
    grid-row: 1 / -1;
  }

  [place-items="start"] {
    place-items: start;
  }

  [place-items="end"] {
    place-items: end;
  }

  [place-items="center"] {
    place-items: center;
  }

  [place-items="stretch"] {
    place-items: stretch;
  }

  [place-content="start"] {
    place-content: start;
  }

  [place-content="end"] {
    place-content: end;
  }

  [place-content="center"] {
    place-content: center;
  }

  [place-content="between"] {
    place-content: space-between;
  }

  [place-content="stretch"] {
    place-content: stretch;
  }

  [z-index="0"] {
    z-index: 0;
  }

  [z-index="10"] {
    z-index: 10;
  }

  [z-index="20"] {
    z-index: 20;
  }

  [z-index="30"] {
    z-index: 30;
  }

  [z-index="40"] {
    z-index: 40;
  }

  [z-index="50"] {
    z-index: 50;
  }

  [z-index="auto"] {
    z-index: auto;
  }

  [inset="0"] {
    inset: 0;
  }

  [inset="auto"] {
    inset: auto;
  }

  [inset="1/2"] {
    inset: 50%;
  }

  [top="0"] {
    top: 0;
  }

  [top="auto"] {
    top: auto;
  }

  [top="1/2"] {
    top: 50%;
  }

  [top="full"] {
    top: 100%;
  }

  [right="0"] {
    right: 0;
  }

  [right="auto"] {
    right: auto;
  }

  [right="1/2"] {
    right: 50%;
  }

  [right="full"] {
    right: 100%;
  }

  [bottom="0"] {
    bottom: 0;
  }

  [bottom="auto"] {
    bottom: auto;
  }

  [bottom="1/2"] {
    bottom: 50%;
  }

  [bottom="full"] {
    bottom: 100%;
  }

  [left="0"] {
    left: 0;
  }

  [left="auto"] {
    left: auto;
  }

  [left="1/2"] {
    left: 50%;
  }

  [left="full"] {
    left: 100%;
  }

  [margin="0"] {
    margin: 0;
  }

  [margin="2xs"] {
    margin: var(--sx-space-2xs);
  }

  [margin="xs"] {
    margin: var(--sx-space-xs);
  }

  [margin="sm"] {
    margin: var(--sx-space-sm);
  }

  [margin="md"] {
    margin: var(--sx-space-md);
  }

  [margin="lg"] {
    margin: var(--sx-space-lg);
  }

  [margin="xl"] {
    margin: var(--sx-space-xl);
  }

  [margin="2xl"] {
    margin: var(--sx-space-2xl);
  }

  [margin="3xl"] {
    margin: var(--sx-space-3xl);
  }

  [margin="auto"] {
    margin: auto;
  }

  [margin-x="0"] {
    margin-inline: 0;
  }

  [margin-x="2xs"] {
    margin-inline: var(--sx-space-2xs);
  }

  [margin-x="xs"] {
    margin-inline: var(--sx-space-xs);
  }

  [margin-x="sm"] {
    margin-inline: var(--sx-space-sm);
  }

  [margin-x="md"] {
    margin-inline: var(--sx-space-md);
  }

  [margin-x="lg"] {
    margin-inline: var(--sx-space-lg);
  }

  [margin-x="xl"] {
    margin-inline: var(--sx-space-xl);
  }

  [margin-x="2xl"] {
    margin-inline: var(--sx-space-2xl);
  }

  [margin-x="3xl"] {
    margin-inline: var(--sx-space-3xl);
  }

  [margin-x="auto"] {
    margin-inline: auto;
  }

  [margin-y="0"] {
    margin-block: 0;
  }

  [margin-y="2xs"] {
    margin-block: var(--sx-space-2xs);
  }

  [margin-y="xs"] {
    margin-block: var(--sx-space-xs);
  }

  [margin-y="sm"] {
    margin-block: var(--sx-space-sm);
  }

  [margin-y="md"] {
    margin-block: var(--sx-space-md);
  }

  [margin-y="lg"] {
    margin-block: var(--sx-space-lg);
  }

  [margin-y="xl"] {
    margin-block: var(--sx-space-xl);
  }

  [margin-y="2xl"] {
    margin-block: var(--sx-space-2xl);
  }

  [margin-y="3xl"] {
    margin-block: var(--sx-space-3xl);
  }

  [margin-y="auto"] {
    margin-block: auto;
  }

  [margin-top="0"] {
    margin-top: 0;
  }

  [margin-top="2xs"] {
    margin-top: var(--sx-space-2xs);
  }

  [margin-top="xs"] {
    margin-top: var(--sx-space-xs);
  }

  [margin-top="sm"] {
    margin-top: var(--sx-space-sm);
  }

  [margin-top="md"] {
    margin-top: var(--sx-space-md);
  }

  [margin-top="lg"] {
    margin-top: var(--sx-space-lg);
  }

  [margin-top="xl"] {
    margin-top: var(--sx-space-xl);
  }

  [margin-top="2xl"] {
    margin-top: var(--sx-space-2xl);
  }

  [margin-top="3xl"] {
    margin-top: var(--sx-space-3xl);
  }

  [margin-top="auto"] {
    margin-top: auto;
  }

  [margin-right="0"] {
    margin-right: 0;
  }

  [margin-right="2xs"] {
    margin-right: var(--sx-space-2xs);
  }

  [margin-right="xs"] {
    margin-right: var(--sx-space-xs);
  }

  [margin-right="sm"] {
    margin-right: var(--sx-space-sm);
  }

  [margin-right="md"] {
    margin-right: var(--sx-space-md);
  }

  [margin-right="lg"] {
    margin-right: var(--sx-space-lg);
  }

  [margin-right="xl"] {
    margin-right: var(--sx-space-xl);
  }

  [margin-right="2xl"] {
    margin-right: var(--sx-space-2xl);
  }

  [margin-right="3xl"] {
    margin-right: var(--sx-space-3xl);
  }

  [margin-right="auto"] {
    margin-right: auto;
  }

  [margin-bottom="0"] {
    margin-bottom: 0;
  }

  [margin-bottom="2xs"] {
    margin-bottom: var(--sx-space-2xs);
  }

  [margin-bottom="xs"] {
    margin-bottom: var(--sx-space-xs);
  }

  [margin-bottom="sm"] {
    margin-bottom: var(--sx-space-sm);
  }

  [margin-bottom="md"] {
    margin-bottom: var(--sx-space-md);
  }

  [margin-bottom="lg"] {
    margin-bottom: var(--sx-space-lg);
  }

  [margin-bottom="xl"] {
    margin-bottom: var(--sx-space-xl);
  }

  [margin-bottom="2xl"] {
    margin-bottom: var(--sx-space-2xl);
  }

  [margin-bottom="3xl"] {
    margin-bottom: var(--sx-space-3xl);
  }

  [margin-bottom="auto"] {
    margin-bottom: auto;
  }

  [margin-left="0"] {
    margin-left: 0;
  }

  [margin-left="2xs"] {
    margin-left: var(--sx-space-2xs);
  }

  [margin-left="xs"] {
    margin-left: var(--sx-space-xs);
  }

  [margin-left="sm"] {
    margin-left: var(--sx-space-sm);
  }

  [margin-left="md"] {
    margin-left: var(--sx-space-md);
  }

  [margin-left="lg"] {
    margin-left: var(--sx-space-lg);
  }

  [margin-left="xl"] {
    margin-left: var(--sx-space-xl);
  }

  [margin-left="2xl"] {
    margin-left: var(--sx-space-2xl);
  }

  [margin-left="3xl"] {
    margin-left: var(--sx-space-3xl);
  }

  [margin-left="auto"] {
    margin-left: auto;
  }

  [pad="0"] {
    padding: 0;
  }

  [pad="2xs"] {
    padding: var(--sx-space-2xs);
  }

  [pad="xs"] {
    padding: var(--sx-space-xs);
  }

  [pad="sm"] {
    padding: var(--sx-space-sm);
  }

  [pad="md"] {
    padding: var(--sx-space-md);
  }

  [pad="lg"] {
    padding: var(--sx-space-lg);
  }

  [pad="xl"] {
    padding: var(--sx-space-xl);
  }

  [pad="2xl"] {
    padding: var(--sx-space-2xl);
  }

  [pad="3xl"] {
    padding: var(--sx-space-3xl);
  }

  [pad="auto"] {
    padding: auto;
  }

  [pad-x="0"] {
    padding-inline: 0;
  }

  [pad-x="2xs"] {
    padding-inline: var(--sx-space-2xs);
  }

  [pad-x="xs"] {
    padding-inline: var(--sx-space-xs);
  }

  [pad-x="sm"] {
    padding-inline: var(--sx-space-sm);
  }

  [pad-x="md"] {
    padding-inline: var(--sx-space-md);
  }

  [pad-x="lg"] {
    padding-inline: var(--sx-space-lg);
  }

  [pad-x="xl"] {
    padding-inline: var(--sx-space-xl);
  }

  [pad-x="2xl"] {
    padding-inline: var(--sx-space-2xl);
  }

  [pad-x="3xl"] {
    padding-inline: var(--sx-space-3xl);
  }

  [pad-x="auto"] {
    padding-inline: auto;
  }

  [pad-y="0"] {
    padding-block: 0;
  }

  [pad-y="2xs"] {
    padding-block: var(--sx-space-2xs);
  }

  [pad-y="xs"] {
    padding-block: var(--sx-space-xs);
  }

  [pad-y="sm"] {
    padding-block: var(--sx-space-sm);
  }

  [pad-y="md"] {
    padding-block: var(--sx-space-md);
  }

  [pad-y="lg"] {
    padding-block: var(--sx-space-lg);
  }

  [pad-y="xl"] {
    padding-block: var(--sx-space-xl);
  }

  [pad-y="2xl"] {
    padding-block: var(--sx-space-2xl);
  }

  [pad-y="3xl"] {
    padding-block: var(--sx-space-3xl);
  }

  [pad-y="auto"] {
    padding-block: auto;
  }

  [pad-top="0"] {
    padding-top: 0;
  }

  [pad-top="2xs"] {
    padding-top: var(--sx-space-2xs);
  }

  [pad-top="xs"] {
    padding-top: var(--sx-space-xs);
  }

  [pad-top="sm"] {
    padding-top: var(--sx-space-sm);
  }

  [pad-top="md"] {
    padding-top: var(--sx-space-md);
  }

  [pad-top="lg"] {
    padding-top: var(--sx-space-lg);
  }

  [pad-top="xl"] {
    padding-top: var(--sx-space-xl);
  }

  [pad-top="2xl"] {
    padding-top: var(--sx-space-2xl);
  }

  [pad-top="3xl"] {
    padding-top: var(--sx-space-3xl);
  }

  [pad-top="auto"] {
    padding-top: auto;
  }

  [pad-right="0"] {
    padding-right: 0;
  }

  [pad-right="2xs"] {
    padding-right: var(--sx-space-2xs);
  }

  [pad-right="xs"] {
    padding-right: var(--sx-space-xs);
  }

  [pad-right="sm"] {
    padding-right: var(--sx-space-sm);
  }

  [pad-right="md"] {
    padding-right: var(--sx-space-md);
  }

  [pad-right="lg"] {
    padding-right: var(--sx-space-lg);
  }

  [pad-right="xl"] {
    padding-right: var(--sx-space-xl);
  }

  [pad-right="2xl"] {
    padding-right: var(--sx-space-2xl);
  }

  [pad-right="3xl"] {
    padding-right: var(--sx-space-3xl);
  }

  [pad-right="auto"] {
    padding-right: auto;
  }

  [pad-bottom="0"] {
    padding-bottom: 0;
  }

  [pad-bottom="2xs"] {
    padding-bottom: var(--sx-space-2xs);
  }

  [pad-bottom="xs"] {
    padding-bottom: var(--sx-space-xs);
  }

  [pad-bottom="sm"] {
    padding-bottom: var(--sx-space-sm);
  }

  [pad-bottom="md"] {
    padding-bottom: var(--sx-space-md);
  }

  [pad-bottom="lg"] {
    padding-bottom: var(--sx-space-lg);
  }

  [pad-bottom="xl"] {
    padding-bottom: var(--sx-space-xl);
  }

  [pad-bottom="2xl"] {
    padding-bottom: var(--sx-space-2xl);
  }

  [pad-bottom="3xl"] {
    padding-bottom: var(--sx-space-3xl);
  }

  [pad-bottom="auto"] {
    padding-bottom: auto;
  }

  [pad-left="0"] {
    padding-left: 0;
  }

  [pad-left="2xs"] {
    padding-left: var(--sx-space-2xs);
  }

  [pad-left="xs"] {
    padding-left: var(--sx-space-xs);
  }

  [pad-left="sm"] {
    padding-left: var(--sx-space-sm);
  }

  [pad-left="md"] {
    padding-left: var(--sx-space-md);
  }

  [pad-left="lg"] {
    padding-left: var(--sx-space-lg);
  }

  [pad-left="xl"] {
    padding-left: var(--sx-space-xl);
  }

  [pad-left="2xl"] {
    padding-left: var(--sx-space-2xl);
  }

  [pad-left="3xl"] {
    padding-left: var(--sx-space-3xl);
  }

  [pad-left="auto"] {
    padding-left: auto;
  }

  [gap="0"] {
    gap: 0;
  }

  [gap="2xs"] {
    gap: var(--sx-space-2xs);
  }

  [gap="xs"] {
    gap: var(--sx-space-xs);
  }

  [gap="sm"] {
    gap: var(--sx-space-sm);
  }

  [gap="md"] {
    gap: var(--sx-space-md);
  }

  [gap="lg"] {
    gap: var(--sx-space-lg);
  }

  [gap="xl"] {
    gap: var(--sx-space-xl);
  }

  [gap="2xl"] {
    gap: var(--sx-space-2xl);
  }

  [gap="3xl"] {
    gap: var(--sx-space-3xl);
  }

  [gap="auto"] {
    gap: auto;
  }

  [gap-x="0"] {
    column-gap: 0;
  }

  [gap-x="2xs"] {
    column-gap: var(--sx-space-2xs);
  }

  [gap-x="xs"] {
    column-gap: var(--sx-space-xs);
  }

  [gap-x="sm"] {
    column-gap: var(--sx-space-sm);
  }

  [gap-x="md"] {
    column-gap: var(--sx-space-md);
  }

  [gap-x="lg"] {
    column-gap: var(--sx-space-lg);
  }

  [gap-x="xl"] {
    column-gap: var(--sx-space-xl);
  }

  [gap-x="2xl"] {
    column-gap: var(--sx-space-2xl);
  }

  [gap-x="3xl"] {
    column-gap: var(--sx-space-3xl);
  }

  [gap-x="auto"] {
    column-gap: auto;
  }

  [gap-y="0"] {
    row-gap: 0;
  }

  [gap-y="2xs"] {
    row-gap: var(--sx-space-2xs);
  }

  [gap-y="xs"] {
    row-gap: var(--sx-space-xs);
  }

  [gap-y="sm"] {
    row-gap: var(--sx-space-sm);
  }

  [gap-y="md"] {
    row-gap: var(--sx-space-md);
  }

  [gap-y="lg"] {
    row-gap: var(--sx-space-lg);
  }

  [gap-y="xl"] {
    row-gap: var(--sx-space-xl);
  }

  [gap-y="2xl"] {
    row-gap: var(--sx-space-2xl);
  }

  [gap-y="3xl"] {
    row-gap: var(--sx-space-3xl);
  }

  [gap-y="auto"] {
    row-gap: auto;
  }

  [width="0"] {
    width: 0;
  }

  [width="auto"] {
    width: auto;
  }

  [width="full"] {
    width: 100%;
  }

  [width="min"] {
    width: min-content;
  }

  [width="max"] {
    width: max-content;
  }

  [width="fit"] {
    width: fit-content;
  }

  [width="1/2"] {
    width: 50%;
  }

  [width="1/3"] {
    width: 33.333333%;
  }

  [width="2/3"] {
    width: 66.666667%;
  }

  [width="1/4"] {
    width: 25%;
  }

  [width="3/4"] {
    width: 75%;
  }

  [width="1/5"] {
    width: 20%;
  }

  [width="2/5"] {
    width: 40%;
  }

  [width="3/5"] {
    width: 60%;
  }

  [width="4/5"] {
    width: 80%;
  }

  [width="xs"] {
    width: var(--sx-space-xs);
  }

  [width="sm"] {
    width: var(--sx-space-sm);
  }

  [width="md"] {
    width: var(--sx-space-md);
  }

  [width="lg"] {
    width: var(--sx-space-lg);
  }

  [width="xl"] {
    width: var(--sx-space-xl);
  }

  [width="2xl"] {
    width: var(--sx-space-2xl);
  }

  [width="3xl"] {
    width: var(--sx-space-3xl);
  }

  [width="screen"] {
    width: 100vw;
  }

  [height="0"] {
    height: 0;
  }

  [height="auto"] {
    height: auto;
  }

  [height="full"] {
    height: 100%;
  }

  [height="min"] {
    height: min-content;
  }

  [height="max"] {
    height: max-content;
  }

  [height="fit"] {
    height: fit-content;
  }

  [height="1/2"] {
    height: 50%;
  }

  [height="1/3"] {
    height: 33.333333%;
  }

  [height="2/3"] {
    height: 66.666667%;
  }

  [height="1/4"] {
    height: 25%;
  }

  [height="3/4"] {
    height: 75%;
  }

  [height="1/5"] {
    height: 20%;
  }

  [height="2/5"] {
    height: 40%;
  }

  [height="3/5"] {
    height: 60%;
  }

  [height="4/5"] {
    height: 80%;
  }

  [height="xs"] {
    height: var(--sx-space-xs);
  }

  [height="sm"] {
    height: var(--sx-space-sm);
  }

  [height="md"] {
    height: var(--sx-space-md);
  }

  [height="lg"] {
    height: var(--sx-space-lg);
  }

  [height="xl"] {
    height: var(--sx-space-xl);
  }

  [height="2xl"] {
    height: var(--sx-space-2xl);
  }

  [height="3xl"] {
    height: var(--sx-space-3xl);
  }

  [height="screen"] {
    height: 100vh;
  }

  [min-w="0"] {
    min-width: 0;
  }

  [min-w="none"] {
    min-width: none;
  }

  [min-w="full"] {
    min-width: 100%;
  }

  [min-w="min"] {
    min-width: min-content;
  }

  [min-w="max"] {
    min-width: max-content;
  }

  [min-w="fit"] {
    min-width: fit-content;
  }

  [min-w="xs"] {
    min-width: 20rem;
  }

  [min-w="sm"] {
    min-width: 24rem;
  }

  [min-w="md"] {
    min-width: 28rem;
  }

  [min-w="lg"] {
    min-width: 32rem;
  }

  [min-w="xl"] {
    min-width: 36rem;
  }

  [min-w="2xl"] {
    min-width: 42rem;
  }

  [min-w="3xl"] {
    min-width: 48rem;
  }

  [min-w="4xl"] {
    min-width: 56rem;
  }

  [min-w="5xl"] {
    min-width: 64rem;
  }

  [min-w="6xl"] {
    min-width: 72rem;
  }

  [min-w="7xl"] {
    min-width: 80rem;
  }

  [min-w="prose"] {
    min-width: 65ch;
  }

  [min-w="screen"] {
    min-width: 100vw;
  }

  [max-w="0"] {
    max-width: 0;
  }

  [max-w="none"] {
    max-width: none;
  }

  [max-w="full"] {
    max-width: 100%;
  }

  [max-w="min"] {
    max-width: min-content;
  }

  [max-w="max"] {
    max-width: max-content;
  }

  [max-w="fit"] {
    max-width: fit-content;
  }

  [max-w="xs"] {
    max-width: 20rem;
  }

  [max-w="sm"] {
    max-width: 24rem;
  }

  [max-w="md"] {
    max-width: 28rem;
  }

  [max-w="lg"] {
    max-width: 32rem;
  }

  [max-w="xl"] {
    max-width: 36rem;
  }

  [max-w="2xl"] {
    max-width: 42rem;
  }

  [max-w="3xl"] {
    max-width: 48rem;
  }

  [max-w="4xl"] {
    max-width: 56rem;
  }

  [max-w="5xl"] {
    max-width: 64rem;
  }

  [max-w="6xl"] {
    max-width: 72rem;
  }

  [max-w="7xl"] {
    max-width: 80rem;
  }

  [max-w="prose"] {
    max-width: 65ch;
  }

  [max-w="screen"] {
    max-width: 100vw;
  }

  [min-h="0"] {
    min-height: 0;
  }

  [min-h="none"] {
    min-height: none;
  }

  [min-h="full"] {
    min-height: 100%;
  }

  [min-h="min"] {
    min-height: min-content;
  }

  [min-h="max"] {
    min-height: max-content;
  }

  [min-h="fit"] {
    min-height: fit-content;
  }

  [min-h="xs"] {
    min-height: 20rem;
  }

  [min-h="sm"] {
    min-height: 24rem;
  }

  [min-h="md"] {
    min-height: 28rem;
  }

  [min-h="lg"] {
    min-height: 32rem;
  }

  [min-h="xl"] {
    min-height: 36rem;
  }

  [min-h="2xl"] {
    min-height: 42rem;
  }

  [min-h="3xl"] {
    min-height: 48rem;
  }

  [min-h="4xl"] {
    min-height: 56rem;
  }

  [min-h="5xl"] {
    min-height: 64rem;
  }

  [min-h="6xl"] {
    min-height: 72rem;
  }

  [min-h="7xl"] {
    min-height: 80rem;
  }

  [min-h="prose"] {
    min-height: 65ch;
  }

  [min-h="screen"] {
    min-height: 100vh;
  }

  [max-h="0"] {
    max-height: 0;
  }

  [max-h="none"] {
    max-height: none;
  }

  [max-h="full"] {
    max-height: 100%;
  }

  [max-h="min"] {
    max-height: min-content;
  }

  [max-h="max"] {
    max-height: max-content;
  }

  [max-h="fit"] {
    max-height: fit-content;
  }

  [max-h="xs"] {
    max-height: 20rem;
  }

  [max-h="sm"] {
    max-height: 24rem;
  }

  [max-h="md"] {
    max-height: 28rem;
  }

  [max-h="lg"] {
    max-height: 32rem;
  }

  [max-h="xl"] {
    max-height: 36rem;
  }

  [max-h="2xl"] {
    max-height: 42rem;
  }

  [max-h="3xl"] {
    max-height: 48rem;
  }

  [max-h="4xl"] {
    max-height: 56rem;
  }

  [max-h="5xl"] {
    max-height: 64rem;
  }

  [max-h="6xl"] {
    max-height: 72rem;
  }

  [max-h="7xl"] {
    max-height: 80rem;
  }

  [max-h="prose"] {
    max-height: 65ch;
  }

  [max-h="screen"] {
    max-height: 100vh;
  }

  [bg="neutral-50"] {
    background-color: var(--sx-color-neutral-50);
  }

  [bg="neutral-100"] {
    background-color: var(--sx-color-neutral-100);
  }

  [bg="neutral-200"] {
    background-color: var(--sx-color-neutral-200);
  }

  [bg="neutral-300"] {
    background-color: var(--sx-color-neutral-300);
  }

  [bg="neutral-400"] {
    background-color: var(--sx-color-neutral-400);
  }

  [bg="neutral-500"] {
    background-color: var(--sx-color-neutral-500);
  }

  [bg="neutral-600"] {
    background-color: var(--sx-color-neutral-600);
  }

  [bg="neutral-700"] {
    background-color: var(--sx-color-neutral-700);
  }

  [bg="neutral-800"] {
    background-color: var(--sx-color-neutral-800);
  }

  [bg="neutral-900"] {
    background-color: var(--sx-color-neutral-900);
  }

  [bg="neutral-950"] {
    background-color: var(--sx-color-neutral-950);
  }

  [bg="brand-50"] {
    background-color: var(--sx-color-brand-50);
  }

  [bg="brand-100"] {
    background-color: var(--sx-color-brand-100);
  }

  [bg="brand-200"] {
    background-color: var(--sx-color-brand-200);
  }

  [bg="brand-300"] {
    background-color: var(--sx-color-brand-300);
  }

  [bg="brand-400"] {
    background-color: var(--sx-color-brand-400);
  }

  [bg="brand-500"] {
    background-color: var(--sx-color-brand-500);
  }

  [bg="brand-600"] {
    background-color: var(--sx-color-brand-600);
  }

  [bg="brand-700"] {
    background-color: var(--sx-color-brand-700);
  }

  [bg="brand-800"] {
    background-color: var(--sx-color-brand-800);
  }

  [bg="brand-900"] {
    background-color: var(--sx-color-brand-900);
  }

  [bg="brand-950"] {
    background-color: var(--sx-color-brand-950);
  }

  [bg="success-50"] {
    background-color: var(--sx-color-success-50);
  }

  [bg="success-100"] {
    background-color: var(--sx-color-success-100);
  }

  [bg="success-200"] {
    background-color: var(--sx-color-success-200);
  }

  [bg="success-300"] {
    background-color: var(--sx-color-success-300);
  }

  [bg="success-400"] {
    background-color: var(--sx-color-success-400);
  }

  [bg="success-500"] {
    background-color: var(--sx-color-success-500);
  }

  [bg="success-600"] {
    background-color: var(--sx-color-success-600);
  }

  [bg="success-700"] {
    background-color: var(--sx-color-success-700);
  }

  [bg="success-800"] {
    background-color: var(--sx-color-success-800);
  }

  [bg="success-900"] {
    background-color: var(--sx-color-success-900);
  }

  [bg="success-950"] {
    background-color: var(--sx-color-success-950);
  }

  [bg="warning-50"] {
    background-color: var(--sx-color-warning-50);
  }

  [bg="warning-100"] {
    background-color: var(--sx-color-warning-100);
  }

  [bg="warning-200"] {
    background-color: var(--sx-color-warning-200);
  }

  [bg="warning-300"] {
    background-color: var(--sx-color-warning-300);
  }

  [bg="warning-400"] {
    background-color: var(--sx-color-warning-400);
  }

  [bg="warning-500"] {
    background-color: var(--sx-color-warning-500);
  }

  [bg="warning-600"] {
    background-color: var(--sx-color-warning-600);
  }

  [bg="warning-700"] {
    background-color: var(--sx-color-warning-700);
  }

  [bg="warning-800"] {
    background-color: var(--sx-color-warning-800);
  }

  [bg="warning-900"] {
    background-color: var(--sx-color-warning-900);
  }

  [bg="warning-950"] {
    background-color: var(--sx-color-warning-950);
  }

  [bg="danger-50"] {
    background-color: var(--sx-color-danger-50);
  }

  [bg="danger-100"] {
    background-color: var(--sx-color-danger-100);
  }

  [bg="danger-200"] {
    background-color: var(--sx-color-danger-200);
  }

  [bg="danger-300"] {
    background-color: var(--sx-color-danger-300);
  }

  [bg="danger-400"] {
    background-color: var(--sx-color-danger-400);
  }

  [bg="danger-500"] {
    background-color: var(--sx-color-danger-500);
  }

  [bg="danger-600"] {
    background-color: var(--sx-color-danger-600);
  }

  [bg="danger-700"] {
    background-color: var(--sx-color-danger-700);
  }

  [bg="danger-800"] {
    background-color: var(--sx-color-danger-800);
  }

  [bg="danger-900"] {
    background-color: var(--sx-color-danger-900);
  }

  [bg="danger-950"] {
    background-color: var(--sx-color-danger-950);
  }

  [bg="surface"] {
    background-color: var(--sx-surface-bg);
  }

  [bg="surface-fg"] {
    background-color: var(--sx-surface-fg);
  }

  [bg="muted"] {
    background-color: var(--sx-surface-muted);
  }

  [bg="muted-fg"] {
    background-color: var(--sx-surface-muted-fg);
  }

  [bg="border"] {
    background-color: var(--sx-surface-border);
  }

  [bg="white"] {
    background-color: #ffffff;
  }

  [bg="black"] {
    background-color: #000000;
  }

  [bg="transparent"] {
    background-color: transparent;
  }

  [bg="current"] {
    background-color: currentColor;
  }

  [bg="inherit"] {
    background-color: inherit;
  }

  [bg="custom"] {
    background-color: var(--sx-bg);
  }

  [fg="neutral-50"] {
    color: var(--sx-color-neutral-50);
  }

  [fg="neutral-100"] {
    color: var(--sx-color-neutral-100);
  }

  [fg="neutral-200"] {
    color: var(--sx-color-neutral-200);
  }

  [fg="neutral-300"] {
    color: var(--sx-color-neutral-300);
  }

  [fg="neutral-400"] {
    color: var(--sx-color-neutral-400);
  }

  [fg="neutral-500"] {
    color: var(--sx-color-neutral-500);
  }

  [fg="neutral-600"] {
    color: var(--sx-color-neutral-600);
  }

  [fg="neutral-700"] {
    color: var(--sx-color-neutral-700);
  }

  [fg="neutral-800"] {
    color: var(--sx-color-neutral-800);
  }

  [fg="neutral-900"] {
    color: var(--sx-color-neutral-900);
  }

  [fg="neutral-950"] {
    color: var(--sx-color-neutral-950);
  }

  [fg="brand-50"] {
    color: var(--sx-color-brand-50);
  }

  [fg="brand-100"] {
    color: var(--sx-color-brand-100);
  }

  [fg="brand-200"] {
    color: var(--sx-color-brand-200);
  }

  [fg="brand-300"] {
    color: var(--sx-color-brand-300);
  }

  [fg="brand-400"] {
    color: var(--sx-color-brand-400);
  }

  [fg="brand-500"] {
    color: var(--sx-color-brand-500);
  }

  [fg="brand-600"] {
    color: var(--sx-color-brand-600);
  }

  [fg="brand-700"] {
    color: var(--sx-color-brand-700);
  }

  [fg="brand-800"] {
    color: var(--sx-color-brand-800);
  }

  [fg="brand-900"] {
    color: var(--sx-color-brand-900);
  }

  [fg="brand-950"] {
    color: var(--sx-color-brand-950);
  }

  [fg="success-50"] {
    color: var(--sx-color-success-50);
  }

  [fg="success-100"] {
    color: var(--sx-color-success-100);
  }

  [fg="success-200"] {
    color: var(--sx-color-success-200);
  }

  [fg="success-300"] {
    color: var(--sx-color-success-300);
  }

  [fg="success-400"] {
    color: var(--sx-color-success-400);
  }

  [fg="success-500"] {
    color: var(--sx-color-success-500);
  }

  [fg="success-600"] {
    color: var(--sx-color-success-600);
  }

  [fg="success-700"] {
    color: var(--sx-color-success-700);
  }

  [fg="success-800"] {
    color: var(--sx-color-success-800);
  }

  [fg="success-900"] {
    color: var(--sx-color-success-900);
  }

  [fg="success-950"] {
    color: var(--sx-color-success-950);
  }

  [fg="warning-50"] {
    color: var(--sx-color-warning-50);
  }

  [fg="warning-100"] {
    color: var(--sx-color-warning-100);
  }

  [fg="warning-200"] {
    color: var(--sx-color-warning-200);
  }

  [fg="warning-300"] {
    color: var(--sx-color-warning-300);
  }

  [fg="warning-400"] {
    color: var(--sx-color-warning-400);
  }

  [fg="warning-500"] {
    color: var(--sx-color-warning-500);
  }

  [fg="warning-600"] {
    color: var(--sx-color-warning-600);
  }

  [fg="warning-700"] {
    color: var(--sx-color-warning-700);
  }

  [fg="warning-800"] {
    color: var(--sx-color-warning-800);
  }

  [fg="warning-900"] {
    color: var(--sx-color-warning-900);
  }

  [fg="warning-950"] {
    color: var(--sx-color-warning-950);
  }

  [fg="danger-50"] {
    color: var(--sx-color-danger-50);
  }

  [fg="danger-100"] {
    color: var(--sx-color-danger-100);
  }

  [fg="danger-200"] {
    color: var(--sx-color-danger-200);
  }

  [fg="danger-300"] {
    color: var(--sx-color-danger-300);
  }

  [fg="danger-400"] {
    color: var(--sx-color-danger-400);
  }

  [fg="danger-500"] {
    color: var(--sx-color-danger-500);
  }

  [fg="danger-600"] {
    color: var(--sx-color-danger-600);
  }

  [fg="danger-700"] {
    color: var(--sx-color-danger-700);
  }

  [fg="danger-800"] {
    color: var(--sx-color-danger-800);
  }

  [fg="danger-900"] {
    color: var(--sx-color-danger-900);
  }

  [fg="danger-950"] {
    color: var(--sx-color-danger-950);
  }

  [fg="surface"] {
    color: var(--sx-surface-bg);
  }

  [fg="surface-fg"] {
    color: var(--sx-surface-fg);
  }

  [fg="muted"] {
    color: var(--sx-surface-muted);
  }

  [fg="muted-fg"] {
    color: var(--sx-surface-muted-fg);
  }

  [fg="border"] {
    color: var(--sx-surface-border);
  }

  [fg="white"] {
    color: #ffffff;
  }

  [fg="black"] {
    color: #000000;
  }

  [fg="transparent"] {
    color: transparent;
  }

  [fg="current"] {
    color: currentColor;
  }

  [fg="inherit"] {
    color: inherit;
  }

  [fg="custom"] {
    color: var(--sx-fg);
  }

  [border-color="neutral-50"] {
    border-color: var(--sx-color-neutral-50);
  }

  [border-color="neutral-100"] {
    border-color: var(--sx-color-neutral-100);
  }

  [border-color="neutral-200"] {
    border-color: var(--sx-color-neutral-200);
  }

  [border-color="neutral-300"] {
    border-color: var(--sx-color-neutral-300);
  }

  [border-color="neutral-400"] {
    border-color: var(--sx-color-neutral-400);
  }

  [border-color="neutral-500"] {
    border-color: var(--sx-color-neutral-500);
  }

  [border-color="neutral-600"] {
    border-color: var(--sx-color-neutral-600);
  }

  [border-color="neutral-700"] {
    border-color: var(--sx-color-neutral-700);
  }

  [border-color="neutral-800"] {
    border-color: var(--sx-color-neutral-800);
  }

  [border-color="neutral-900"] {
    border-color: var(--sx-color-neutral-900);
  }

  [border-color="neutral-950"] {
    border-color: var(--sx-color-neutral-950);
  }

  [border-color="brand-50"] {
    border-color: var(--sx-color-brand-50);
  }

  [border-color="brand-100"] {
    border-color: var(--sx-color-brand-100);
  }

  [border-color="brand-200"] {
    border-color: var(--sx-color-brand-200);
  }

  [border-color="brand-300"] {
    border-color: var(--sx-color-brand-300);
  }

  [border-color="brand-400"] {
    border-color: var(--sx-color-brand-400);
  }

  [border-color="brand-500"] {
    border-color: var(--sx-color-brand-500);
  }

  [border-color="brand-600"] {
    border-color: var(--sx-color-brand-600);
  }

  [border-color="brand-700"] {
    border-color: var(--sx-color-brand-700);
  }

  [border-color="brand-800"] {
    border-color: var(--sx-color-brand-800);
  }

  [border-color="brand-900"] {
    border-color: var(--sx-color-brand-900);
  }

  [border-color="brand-950"] {
    border-color: var(--sx-color-brand-950);
  }

  [border-color="success-50"] {
    border-color: var(--sx-color-success-50);
  }

  [border-color="success-100"] {
    border-color: var(--sx-color-success-100);
  }

  [border-color="success-200"] {
    border-color: var(--sx-color-success-200);
  }

  [border-color="success-300"] {
    border-color: var(--sx-color-success-300);
  }

  [border-color="success-400"] {
    border-color: var(--sx-color-success-400);
  }

  [border-color="success-500"] {
    border-color: var(--sx-color-success-500);
  }

  [border-color="success-600"] {
    border-color: var(--sx-color-success-600);
  }

  [border-color="success-700"] {
    border-color: var(--sx-color-success-700);
  }

  [border-color="success-800"] {
    border-color: var(--sx-color-success-800);
  }

  [border-color="success-900"] {
    border-color: var(--sx-color-success-900);
  }

  [border-color="success-950"] {
    border-color: var(--sx-color-success-950);
  }

  [border-color="warning-50"] {
    border-color: var(--sx-color-warning-50);
  }

  [border-color="warning-100"] {
    border-color: var(--sx-color-warning-100);
  }

  [border-color="warning-200"] {
    border-color: var(--sx-color-warning-200);
  }

  [border-color="warning-300"] {
    border-color: var(--sx-color-warning-300);
  }

  [border-color="warning-400"] {
    border-color: var(--sx-color-warning-400);
  }

  [border-color="warning-500"] {
    border-color: var(--sx-color-warning-500);
  }

  [border-color="warning-600"] {
    border-color: var(--sx-color-warning-600);
  }

  [border-color="warning-700"] {
    border-color: var(--sx-color-warning-700);
  }

  [border-color="warning-800"] {
    border-color: var(--sx-color-warning-800);
  }

  [border-color="warning-900"] {
    border-color: var(--sx-color-warning-900);
  }

  [border-color="warning-950"] {
    border-color: var(--sx-color-warning-950);
  }

  [border-color="danger-50"] {
    border-color: var(--sx-color-danger-50);
  }

  [border-color="danger-100"] {
    border-color: var(--sx-color-danger-100);
  }

  [border-color="danger-200"] {
    border-color: var(--sx-color-danger-200);
  }

  [border-color="danger-300"] {
    border-color: var(--sx-color-danger-300);
  }

  [border-color="danger-400"] {
    border-color: var(--sx-color-danger-400);
  }

  [border-color="danger-500"] {
    border-color: var(--sx-color-danger-500);
  }

  [border-color="danger-600"] {
    border-color: var(--sx-color-danger-600);
  }

  [border-color="danger-700"] {
    border-color: var(--sx-color-danger-700);
  }

  [border-color="danger-800"] {
    border-color: var(--sx-color-danger-800);
  }

  [border-color="danger-900"] {
    border-color: var(--sx-color-danger-900);
  }

  [border-color="danger-950"] {
    border-color: var(--sx-color-danger-950);
  }

  [border-color="surface"] {
    border-color: var(--sx-surface-bg);
  }

  [border-color="surface-fg"] {
    border-color: var(--sx-surface-fg);
  }

  [border-color="muted"] {
    border-color: var(--sx-surface-muted);
  }

  [border-color="muted-fg"] {
    border-color: var(--sx-surface-muted-fg);
  }

  [border-color="border"] {
    border-color: var(--sx-surface-border);
  }

  [border-color="white"] {
    border-color: #ffffff;
  }

  [border-color="black"] {
    border-color: #000000;
  }

  [border-color="transparent"] {
    border-color: transparent;
  }

  [border-color="current"] {
    border-color: currentColor;
  }

  [border-color="inherit"] {
    border-color: inherit;
  }

  [border-color="custom"] {
    border-color: var(--sx-border-color);
  }

  [border="0"] {
    border-width: 0;
    border-style: none;
  }

  [border="1"] {
    border-width: 1px;
    border-style: solid;
  }

  [border="2"] {
    border-width: 2px;
    border-style: solid;
  }

  [border="4"] {
    border-width: 4px;
    border-style: solid;
  }

  [border="8"] {
    border-width: 8px;
    border-style: solid;
  }

  [border-t="0"] {
    border-top-width: 0;
    border-top-style: none;
  }

  [border-t="1"] {
    border-top-width: 1px;
    border-top-style: solid;
  }

  [border-t="2"] {
    border-top-width: 2px;
    border-top-style: solid;
  }

  [border-t="4"] {
    border-top-width: 4px;
    border-top-style: solid;
  }

  [border-t="8"] {
    border-top-width: 8px;
    border-top-style: solid;
  }

  [border-r="0"] {
    border-right-width: 0;
    border-right-style: none;
  }

  [border-r="1"] {
    border-right-width: 1px;
    border-right-style: solid;
  }

  [border-r="2"] {
    border-right-width: 2px;
    border-right-style: solid;
  }

  [border-r="4"] {
    border-right-width: 4px;
    border-right-style: solid;
  }

  [border-r="8"] {
    border-right-width: 8px;
    border-right-style: solid;
  }

  [border-b="0"] {
    border-bottom-width: 0;
    border-bottom-style: none;
  }

  [border-b="1"] {
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }

  [border-b="2"] {
    border-bottom-width: 2px;
    border-bottom-style: solid;
  }

  [border-b="4"] {
    border-bottom-width: 4px;
    border-bottom-style: solid;
  }

  [border-b="8"] {
    border-bottom-width: 8px;
    border-bottom-style: solid;
  }

  [border-l="0"] {
    border-left-width: 0;
    border-left-style: none;
  }

  [border-l="1"] {
    border-left-width: 1px;
    border-left-style: solid;
  }

  [border-l="2"] {
    border-left-width: 2px;
    border-left-style: solid;
  }

  [border-l="4"] {
    border-left-width: 4px;
    border-left-style: solid;
  }

  [border-l="8"] {
    border-left-width: 8px;
    border-left-style: solid;
  }

  [border-style="solid"] {
    border-style: solid;
  }

  [border-style="dashed"] {
    border-style: dashed;
  }

  [border-style="dotted"] {
    border-style: dotted;
  }

  [border-style="double"] {
    border-style: double;
  }

  [border-style="none"] {
    border-style: none;
  }

  [border-style="hidden"] {
    border-style: hidden;
  }

  [outline="0"] {
    outline-width: 0;
  }

  [outline="1"] {
    outline-width: 1px;
  }

  [outline="2"] {
    outline-width: 2px;
  }

  [outline="4"] {
    outline-width: 4px;
  }

  [outline="none"] {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  [ring="0"] {
    box-shadow: none;
  }

  [ring="1"] {
    box-shadow: 0 0 0 1px var(--sx-surface-ring);
  }

  [ring="2"] {
    box-shadow: 0 0 0 2px var(--sx-surface-ring);
  }

  [ring="4"] {
    box-shadow: 0 0 0 4px var(--sx-surface-ring);
  }

  [text-align="left"] {
    text-align: left;
  }

  [text-align="center"] {
    text-align: center;
  }

  [text-align="right"] {
    text-align: right;
  }

  [text-align="justify"] {
    text-align: justify;
  }

  [text-decoration="underline"] {
    text-decoration-line: underline;
  }

  [text-decoration="overline"] {
    text-decoration-line: overline;
  }

  [text-decoration="line-through"] {
    text-decoration-line: line-through;
  }

  [text-decoration="none"] {
    text-decoration-line: none;
  }

  [text-transform="uppercase"] {
    text-transform: uppercase;
  }

  [text-transform="lowercase"] {
    text-transform: lowercase;
  }

  [text-transform="capitalize"] {
    text-transform: capitalize;
  }

  [text-transform="none"] {
    text-transform: none;
  }

  [text-overflow="truncate"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  [text-overflow="ellipsis"] {
    text-overflow: ellipsis;
  }

  [text-overflow="clip"] {
    text-overflow: clip;
  }

  [whitespace="normal"] {
    white-space: normal;
  }

  [whitespace="nowrap"] {
    white-space: nowrap;
  }

  [whitespace="pre"] {
    white-space: pre;
  }

  [whitespace="pre-line"] {
    white-space: pre-line;
  }

  [whitespace="pre-wrap"] {
    white-space: pre-wrap;
  }

  [whitespace="break-spaces"] {
    white-space: break-spaces;
  }

  [word-break="normal"] {
    overflow-wrap: normal;
    word-break: normal;
  }

  [word-break="words"] {
    overflow-wrap: break-word;
  }

  [word-break="all"] {
    word-break: break-all;
  }

  [word-break="keep"] {
    word-break: keep-all;
  }

  [tracking="tighter"] {
    letter-spacing: -0.05em;
  }

  [tracking="tight"] {
    letter-spacing: -0.025em;
  }

  [tracking="normal"] {
    letter-spacing: 0em;
  }

  [tracking="wide"] {
    letter-spacing: 0.025em;
  }

  [tracking="wider"] {
    letter-spacing: 0.05em;
  }

  [tracking="widest"] {
    letter-spacing: 0.1em;
  }

  [tracking="custom"] {
    letter-spacing: var(--sx-tracking);
  }

  [leading="none"] {
    line-height: 1;
  }

  [leading="tight"] {
    line-height: 1.25;
  }

  [leading="snug"] {
    line-height: 1.375;
  }

  [leading="normal"] {
    line-height: 1.5;
  }

  [leading="relaxed"] {
    line-height: 1.625;
  }

  [leading="loose"] {
    line-height: 2;
  }

  [leading="custom"] {
    line-height: var(--sx-leading);
  }

  [font-style="italic"] {
    font-style: italic;
  }

  [font-style="normal"] {
    font-style: normal;
  }

  [font-variant="tabular-nums"] {
    font-variant-numeric: tabular-nums;
  }

  [font-variant="proportional-nums"] {
    font-variant-numeric: proportional-nums;
  }

  [font-variant="oldstyle-nums"] {
    font-variant-numeric: oldstyle-nums;
  }

  [font-variant="lining-nums"] {
    font-variant-numeric: lining-nums;
  }

  [font-variant="small-caps"] {
    font-variant-caps: small-caps;
  }

  [font-variant="normal"] {
    font-variant: normal;
  }

  [list-style="none"] {
    list-style-type: none;
  }

  [list-style="disc"] {
    list-style-type: disc;
  }

  [list-style="decimal"] {
    list-style-type: decimal;
  }

  [list-style="inside"] {
    list-style-position: inside;
  }

  [list-style="outside"] {
    list-style-position: outside;
  }

  [opacity="0"] {
    opacity: 0;
  }

  [opacity="5"] {
    opacity: 0.05;
  }

  [opacity="10"] {
    opacity: 0.1;
  }

  [opacity="20"] {
    opacity: 0.2;
  }

  [opacity="25"] {
    opacity: 0.25;
  }

  [opacity="30"] {
    opacity: 0.3;
  }

  [opacity="40"] {
    opacity: 0.4;
  }

  [opacity="50"] {
    opacity: 0.5;
  }

  [opacity="60"] {
    opacity: 0.6;
  }

  [opacity="70"] {
    opacity: 0.7;
  }

  [opacity="75"] {
    opacity: 0.75;
  }

  [opacity="80"] {
    opacity: 0.8;
  }

  [opacity="90"] {
    opacity: 0.9;
  }

  [opacity="95"] {
    opacity: 0.95;
  }

  [opacity="100"] {
    opacity: 1;
  }

  [shadow="none"] {
    box-shadow: none;
  }

  [shadow="sm"] {
    box-shadow: var(--sx-shadow-sm);
  }

  [shadow="md"] {
    box-shadow: var(--sx-shadow-md);
  }

  [shadow="lg"] {
    box-shadow: var(--sx-shadow-lg);
  }

  [mix-blend="normal"] {
    mix-blend-mode: normal;
  }

  [mix-blend="multiply"] {
    mix-blend-mode: multiply;
  }

  [mix-blend="screen"] {
    mix-blend-mode: screen;
  }

  [mix-blend="overlay"] {
    mix-blend-mode: overlay;
  }

  [backdrop-blur="none"] {
    backdrop-filter: none;
  }

  [backdrop-blur="sm"] {
    backdrop-filter: blur(4px);
  }

  [backdrop-blur="md"] {
    backdrop-filter: blur(12px);
  }

  [backdrop-blur="lg"] {
    backdrop-filter: blur(16px);
  }

  [backdrop-blur="xl"] {
    backdrop-filter: blur(24px);
  }

  [transition="none"] {
    transition-property: none;
  }

  [transition="all"] {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  [transition="default"] {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  [transition="colors"] {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  [transition="opacity"] {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  [transition="shadow"] {
    transition-property: box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  [transition="transform"] {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  [duration="0"] {
    transition-duration: 0ms;
  }

  [duration="75"] {
    transition-duration: 75ms;
  }

  [duration="100"] {
    transition-duration: 100ms;
  }

  [duration="150"] {
    transition-duration: 150ms;
  }

  [duration="200"] {
    transition-duration: 200ms;
  }

  [duration="300"] {
    transition-duration: 300ms;
  }

  [duration="500"] {
    transition-duration: 500ms;
  }

  [duration="700"] {
    transition-duration: 700ms;
  }

  [duration="1000"] {
    transition-duration: 1000ms;
  }

  [ease="linear"] {
    transition-timing-function: linear;
  }

  [ease="in"] {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }

  [ease="out"] {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }

  [ease="in-out"] {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  [delay="0"] {
    transition-delay: 0ms;
  }

  [delay="75"] {
    transition-delay: 75ms;
  }

  [delay="100"] {
    transition-delay: 100ms;
  }

  [delay="150"] {
    transition-delay: 150ms;
  }

  [delay="200"] {
    transition-delay: 200ms;
  }

  [delay="300"] {
    transition-delay: 300ms;
  }

  [delay="500"] {
    transition-delay: 500ms;
  }

  [delay="700"] {
    transition-delay: 700ms;
  }

  [delay="1000"] {
    transition-delay: 1000ms;
  }

  [animate="none"] {
    animation: none;
  }

  [animate="spin"] {
    animation: sx-spin 1s linear infinite;
  }

  [animate="ping"] {
    animation: sx-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  [animate="pulse"] {
    animation: sx-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  [animate="bounce"] {
    animation: sx-bounce 1s infinite;
  }

  [translate-x="0"] {
    --sx-translate-x: 0;
    transform: translateX(var(--sx-translate-x)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [translate-x="1/2"] {
    --sx-translate-x: 50%;
    transform: translateX(var(--sx-translate-x)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [translate-x="-1/2"] {
    --sx-translate-x: -50%;
    transform: translateX(var(--sx-translate-x)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [translate-x="full"] {
    --sx-translate-x: 100%;
    transform: translateX(var(--sx-translate-x)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [translate-x="-full"] {
    --sx-translate-x: -100%;
    transform: translateX(var(--sx-translate-x)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [translate-y="0"] {
    --sx-translate-y: 0;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [translate-y="1/2"] {
    --sx-translate-y: 50%;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [translate-y="-1/2"] {
    --sx-translate-y: -50%;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [translate-y="full"] {
    --sx-translate-y: 100%;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [translate-y="-full"] {
    --sx-translate-y: -100%;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [scale="0"] {
    --sx-scale: 0;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [scale="50"] {
    --sx-scale: .5;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [scale="75"] {
    --sx-scale: .75;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [scale="90"] {
    --sx-scale: .9;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [scale="95"] {
    --sx-scale: .95;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [scale="100"] {
    --sx-scale: 1;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [scale="105"] {
    --sx-scale: 1.05;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [scale="110"] {
    --sx-scale: 1.1;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [scale="125"] {
    --sx-scale: 1.25;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [scale="150"] {
    --sx-scale: 1.5;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [rotate="0"] {
    --sx-rotate: 0deg;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate)) scale(var(--sx-scale, 1));
  }

  [rotate="1"] {
    --sx-rotate: 1deg;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate)) scale(var(--sx-scale, 1));
  }

  [rotate="2"] {
    --sx-rotate: 2deg;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate)) scale(var(--sx-scale, 1));
  }

  [rotate="3"] {
    --sx-rotate: 3deg;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate)) scale(var(--sx-scale, 1));
  }

  [rotate="6"] {
    --sx-rotate: 6deg;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate)) scale(var(--sx-scale, 1));
  }

  [rotate="12"] {
    --sx-rotate: 12deg;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate)) scale(var(--sx-scale, 1));
  }

  [rotate="45"] {
    --sx-rotate: 45deg;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate)) scale(var(--sx-scale, 1));
  }

  [rotate="90"] {
    --sx-rotate: 90deg;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate)) scale(var(--sx-scale, 1));
  }

  [rotate="180"] {
    --sx-rotate: 180deg;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate)) scale(var(--sx-scale, 1));
  }

  [origin="center"] {
    transform-origin: center;
  }

  [origin="top"] {
    transform-origin: top;
  }

  [origin="top-right"] {
    transform-origin: top right;
  }

  [origin="right"] {
    transform-origin: right;
  }

  [origin="bottom-right"] {
    transform-origin: bottom right;
  }

  [origin="bottom"] {
    transform-origin: bottom;
  }

  [origin="bottom-left"] {
    transform-origin: bottom left;
  }

  [origin="left"] {
    transform-origin: left;
  }

  [origin="top-left"] {
    transform-origin: top left;
  }

  [cursor="auto"] {
    cursor: auto;
  }

  [cursor="default"] {
    cursor: default;
  }

  [cursor="pointer"] {
    cursor: pointer;
  }

  [cursor="wait"] {
    cursor: wait;
  }

  [cursor="text"] {
    cursor: text;
  }

  [cursor="move"] {
    cursor: move;
  }

  [cursor="help"] {
    cursor: help;
  }

  [cursor="not-allowed"] {
    cursor: not-allowed;
  }

  [cursor="none"] {
    cursor: none;
  }

  [cursor="grab"] {
    cursor: grab;
  }

  [cursor="grabbing"] {
    cursor: grabbing;
  }

  [pointer-events="none"] {
    pointer-events: none;
  }

  [pointer-events="auto"] {
    pointer-events: auto;
  }

  [select="none"] {
    user-select: none;
  }

  [select="text"] {
    user-select: text;
  }

  [select="all"] {
    user-select: all;
  }

  [select="auto"] {
    user-select: auto;
  }

  [resize="none"] {
    resize: none;
  }

  [resize="x"] {
    resize: horizontal;
  }

  [resize="y"] {
    resize: vertical;
  }

  [resize="both"] {
    resize: both;
  }

  [scroll-behavior="auto"] {
    scroll-behavior: auto;
  }

  [scroll-behavior="smooth"] {
    scroll-behavior: smooth;
  }

  [appearance="none"] {
    appearance: none;
  }

  [appearance="auto"] {
    appearance: auto;
  }

  [object-fit="contain"] {
    object-fit: contain;
  }

  [object-fit="cover"] {
    object-fit: cover;
  }

  [object-fit="fill"] {
    object-fit: fill;
  }

  [object-fit="none"] {
    object-fit: none;
  }

  [object-fit="scale-down"] {
    object-fit: scale-down;
  }

  [object-position="center"] {
    object-position: center;
  }

  [object-position="top"] {
    object-position: top;
  }

  [object-position="right"] {
    object-position: right;
  }

  [object-position="bottom"] {
    object-position: bottom;
  }

  [object-position="left"] {
    object-position: left;
  }

  [aspect-ratio="auto"] {
    aspect-ratio: auto;
  }

  [aspect-ratio="square"] {
    aspect-ratio: 1 / 1;
  }

  [aspect-ratio="video"] {
    aspect-ratio: 16 / 9;
  }

  [visibility="visible"] {
    visibility: visible;
  }

  [visibility="invisible"] {
    visibility: hidden;
  }

  [visibility="collapse"] {
    visibility: collapse;
  }

  [sr-only="true"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  [sr-only="false"] {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  [group]:hover [group-hover-display="block"] {
    display: block;
  }

  [group]:hover [group-hover-display="inline-block"] {
    display: inline-block;
  }

  [group]:hover [group-hover-display="inline"] {
    display: inline;
  }

  [group]:hover [group-hover-display="flex"] {
    display: flex;
  }

  [group]:hover [group-hover-display="inline-flex"] {
    display: inline-flex;
  }

  [group]:hover [group-hover-display="grid"] {
    display: grid;
  }

  [group]:hover [group-hover-display="inline-grid"] {
    display: inline-grid;
  }

  [group]:hover [group-hover-display="hidden"] {
    display: none;
  }

  [group]:hover [group-hover-display="contents"] {
    display: contents;
  }

  [hover-bg="neutral-50"]:hover {
    background-color: var(--sx-color-neutral-50);
  }

  [hover-bg="neutral-100"]:hover {
    background-color: var(--sx-color-neutral-100);
  }

  [hover-bg="neutral-200"]:hover {
    background-color: var(--sx-color-neutral-200);
  }

  [hover-bg="neutral-300"]:hover {
    background-color: var(--sx-color-neutral-300);
  }

  [hover-bg="neutral-400"]:hover {
    background-color: var(--sx-color-neutral-400);
  }

  [hover-bg="neutral-500"]:hover {
    background-color: var(--sx-color-neutral-500);
  }

  [hover-bg="neutral-600"]:hover {
    background-color: var(--sx-color-neutral-600);
  }

  [hover-bg="neutral-700"]:hover {
    background-color: var(--sx-color-neutral-700);
  }

  [hover-bg="neutral-800"]:hover {
    background-color: var(--sx-color-neutral-800);
  }

  [hover-bg="neutral-900"]:hover {
    background-color: var(--sx-color-neutral-900);
  }

  [hover-bg="neutral-950"]:hover {
    background-color: var(--sx-color-neutral-950);
  }

  [hover-bg="brand-50"]:hover {
    background-color: var(--sx-color-brand-50);
  }

  [hover-bg="brand-100"]:hover {
    background-color: var(--sx-color-brand-100);
  }

  [hover-bg="brand-200"]:hover {
    background-color: var(--sx-color-brand-200);
  }

  [hover-bg="brand-300"]:hover {
    background-color: var(--sx-color-brand-300);
  }

  [hover-bg="brand-400"]:hover {
    background-color: var(--sx-color-brand-400);
  }

  [hover-bg="brand-500"]:hover {
    background-color: var(--sx-color-brand-500);
  }

  [hover-bg="brand-600"]:hover {
    background-color: var(--sx-color-brand-600);
  }

  [hover-bg="brand-700"]:hover {
    background-color: var(--sx-color-brand-700);
  }

  [hover-bg="brand-800"]:hover {
    background-color: var(--sx-color-brand-800);
  }

  [hover-bg="brand-900"]:hover {
    background-color: var(--sx-color-brand-900);
  }

  [hover-bg="brand-950"]:hover {
    background-color: var(--sx-color-brand-950);
  }

  [hover-bg="success-50"]:hover {
    background-color: var(--sx-color-success-50);
  }

  [hover-bg="success-100"]:hover {
    background-color: var(--sx-color-success-100);
  }

  [hover-bg="success-200"]:hover {
    background-color: var(--sx-color-success-200);
  }

  [hover-bg="success-300"]:hover {
    background-color: var(--sx-color-success-300);
  }

  [hover-bg="success-400"]:hover {
    background-color: var(--sx-color-success-400);
  }

  [hover-bg="success-500"]:hover {
    background-color: var(--sx-color-success-500);
  }

  [hover-bg="success-600"]:hover {
    background-color: var(--sx-color-success-600);
  }

  [hover-bg="success-700"]:hover {
    background-color: var(--sx-color-success-700);
  }

  [hover-bg="success-800"]:hover {
    background-color: var(--sx-color-success-800);
  }

  [hover-bg="success-900"]:hover {
    background-color: var(--sx-color-success-900);
  }

  [hover-bg="success-950"]:hover {
    background-color: var(--sx-color-success-950);
  }

  [hover-bg="warning-50"]:hover {
    background-color: var(--sx-color-warning-50);
  }

  [hover-bg="warning-100"]:hover {
    background-color: var(--sx-color-warning-100);
  }

  [hover-bg="warning-200"]:hover {
    background-color: var(--sx-color-warning-200);
  }

  [hover-bg="warning-300"]:hover {
    background-color: var(--sx-color-warning-300);
  }

  [hover-bg="warning-400"]:hover {
    background-color: var(--sx-color-warning-400);
  }

  [hover-bg="warning-500"]:hover {
    background-color: var(--sx-color-warning-500);
  }

  [hover-bg="warning-600"]:hover {
    background-color: var(--sx-color-warning-600);
  }

  [hover-bg="warning-700"]:hover {
    background-color: var(--sx-color-warning-700);
  }

  [hover-bg="warning-800"]:hover {
    background-color: var(--sx-color-warning-800);
  }

  [hover-bg="warning-900"]:hover {
    background-color: var(--sx-color-warning-900);
  }

  [hover-bg="warning-950"]:hover {
    background-color: var(--sx-color-warning-950);
  }

  [hover-bg="danger-50"]:hover {
    background-color: var(--sx-color-danger-50);
  }

  [hover-bg="danger-100"]:hover {
    background-color: var(--sx-color-danger-100);
  }

  [hover-bg="danger-200"]:hover {
    background-color: var(--sx-color-danger-200);
  }

  [hover-bg="danger-300"]:hover {
    background-color: var(--sx-color-danger-300);
  }

  [hover-bg="danger-400"]:hover {
    background-color: var(--sx-color-danger-400);
  }

  [hover-bg="danger-500"]:hover {
    background-color: var(--sx-color-danger-500);
  }

  [hover-bg="danger-600"]:hover {
    background-color: var(--sx-color-danger-600);
  }

  [hover-bg="danger-700"]:hover {
    background-color: var(--sx-color-danger-700);
  }

  [hover-bg="danger-800"]:hover {
    background-color: var(--sx-color-danger-800);
  }

  [hover-bg="danger-900"]:hover {
    background-color: var(--sx-color-danger-900);
  }

  [hover-bg="danger-950"]:hover {
    background-color: var(--sx-color-danger-950);
  }

  [hover-bg="surface"]:hover {
    background-color: var(--sx-surface-bg);
  }

  [hover-bg="surface-fg"]:hover {
    background-color: var(--sx-surface-fg);
  }

  [hover-bg="muted"]:hover {
    background-color: var(--sx-surface-muted);
  }

  [hover-bg="muted-fg"]:hover {
    background-color: var(--sx-surface-muted-fg);
  }

  [hover-bg="border"]:hover {
    background-color: var(--sx-surface-border);
  }

  [hover-bg="white"]:hover {
    background-color: #ffffff;
  }

  [hover-bg="black"]:hover {
    background-color: #000000;
  }

  [hover-bg="transparent"]:hover {
    background-color: transparent;
  }

  [hover-bg="current"]:hover {
    background-color: currentColor;
  }

  [hover-bg="inherit"]:hover {
    background-color: inherit;
  }

  [hover-bg="custom"]:hover {
    background-color: var(--sx-bg);
  }

  [focus-bg="neutral-50"]:focus {
    background-color: var(--sx-color-neutral-50);
  }

  [focus-bg="neutral-100"]:focus {
    background-color: var(--sx-color-neutral-100);
  }

  [focus-bg="neutral-200"]:focus {
    background-color: var(--sx-color-neutral-200);
  }

  [focus-bg="neutral-300"]:focus {
    background-color: var(--sx-color-neutral-300);
  }

  [focus-bg="neutral-400"]:focus {
    background-color: var(--sx-color-neutral-400);
  }

  [focus-bg="neutral-500"]:focus {
    background-color: var(--sx-color-neutral-500);
  }

  [focus-bg="neutral-600"]:focus {
    background-color: var(--sx-color-neutral-600);
  }

  [focus-bg="neutral-700"]:focus {
    background-color: var(--sx-color-neutral-700);
  }

  [focus-bg="neutral-800"]:focus {
    background-color: var(--sx-color-neutral-800);
  }

  [focus-bg="neutral-900"]:focus {
    background-color: var(--sx-color-neutral-900);
  }

  [focus-bg="neutral-950"]:focus {
    background-color: var(--sx-color-neutral-950);
  }

  [focus-bg="brand-50"]:focus {
    background-color: var(--sx-color-brand-50);
  }

  [focus-bg="brand-100"]:focus {
    background-color: var(--sx-color-brand-100);
  }

  [focus-bg="brand-200"]:focus {
    background-color: var(--sx-color-brand-200);
  }

  [focus-bg="brand-300"]:focus {
    background-color: var(--sx-color-brand-300);
  }

  [focus-bg="brand-400"]:focus {
    background-color: var(--sx-color-brand-400);
  }

  [focus-bg="brand-500"]:focus {
    background-color: var(--sx-color-brand-500);
  }

  [focus-bg="brand-600"]:focus {
    background-color: var(--sx-color-brand-600);
  }

  [focus-bg="brand-700"]:focus {
    background-color: var(--sx-color-brand-700);
  }

  [focus-bg="brand-800"]:focus {
    background-color: var(--sx-color-brand-800);
  }

  [focus-bg="brand-900"]:focus {
    background-color: var(--sx-color-brand-900);
  }

  [focus-bg="brand-950"]:focus {
    background-color: var(--sx-color-brand-950);
  }

  [focus-bg="success-50"]:focus {
    background-color: var(--sx-color-success-50);
  }

  [focus-bg="success-100"]:focus {
    background-color: var(--sx-color-success-100);
  }

  [focus-bg="success-200"]:focus {
    background-color: var(--sx-color-success-200);
  }

  [focus-bg="success-300"]:focus {
    background-color: var(--sx-color-success-300);
  }

  [focus-bg="success-400"]:focus {
    background-color: var(--sx-color-success-400);
  }

  [focus-bg="success-500"]:focus {
    background-color: var(--sx-color-success-500);
  }

  [focus-bg="success-600"]:focus {
    background-color: var(--sx-color-success-600);
  }

  [focus-bg="success-700"]:focus {
    background-color: var(--sx-color-success-700);
  }

  [focus-bg="success-800"]:focus {
    background-color: var(--sx-color-success-800);
  }

  [focus-bg="success-900"]:focus {
    background-color: var(--sx-color-success-900);
  }

  [focus-bg="success-950"]:focus {
    background-color: var(--sx-color-success-950);
  }

  [focus-bg="warning-50"]:focus {
    background-color: var(--sx-color-warning-50);
  }

  [focus-bg="warning-100"]:focus {
    background-color: var(--sx-color-warning-100);
  }

  [focus-bg="warning-200"]:focus {
    background-color: var(--sx-color-warning-200);
  }

  [focus-bg="warning-300"]:focus {
    background-color: var(--sx-color-warning-300);
  }

  [focus-bg="warning-400"]:focus {
    background-color: var(--sx-color-warning-400);
  }

  [focus-bg="warning-500"]:focus {
    background-color: var(--sx-color-warning-500);
  }

  [focus-bg="warning-600"]:focus {
    background-color: var(--sx-color-warning-600);
  }

  [focus-bg="warning-700"]:focus {
    background-color: var(--sx-color-warning-700);
  }

  [focus-bg="warning-800"]:focus {
    background-color: var(--sx-color-warning-800);
  }

  [focus-bg="warning-900"]:focus {
    background-color: var(--sx-color-warning-900);
  }

  [focus-bg="warning-950"]:focus {
    background-color: var(--sx-color-warning-950);
  }

  [focus-bg="danger-50"]:focus {
    background-color: var(--sx-color-danger-50);
  }

  [focus-bg="danger-100"]:focus {
    background-color: var(--sx-color-danger-100);
  }

  [focus-bg="danger-200"]:focus {
    background-color: var(--sx-color-danger-200);
  }

  [focus-bg="danger-300"]:focus {
    background-color: var(--sx-color-danger-300);
  }

  [focus-bg="danger-400"]:focus {
    background-color: var(--sx-color-danger-400);
  }

  [focus-bg="danger-500"]:focus {
    background-color: var(--sx-color-danger-500);
  }

  [focus-bg="danger-600"]:focus {
    background-color: var(--sx-color-danger-600);
  }

  [focus-bg="danger-700"]:focus {
    background-color: var(--sx-color-danger-700);
  }

  [focus-bg="danger-800"]:focus {
    background-color: var(--sx-color-danger-800);
  }

  [focus-bg="danger-900"]:focus {
    background-color: var(--sx-color-danger-900);
  }

  [focus-bg="danger-950"]:focus {
    background-color: var(--sx-color-danger-950);
  }

  [focus-bg="surface"]:focus {
    background-color: var(--sx-surface-bg);
  }

  [focus-bg="surface-fg"]:focus {
    background-color: var(--sx-surface-fg);
  }

  [focus-bg="muted"]:focus {
    background-color: var(--sx-surface-muted);
  }

  [focus-bg="muted-fg"]:focus {
    background-color: var(--sx-surface-muted-fg);
  }

  [focus-bg="border"]:focus {
    background-color: var(--sx-surface-border);
  }

  [focus-bg="white"]:focus {
    background-color: #ffffff;
  }

  [focus-bg="black"]:focus {
    background-color: #000000;
  }

  [focus-bg="transparent"]:focus {
    background-color: transparent;
  }

  [focus-bg="current"]:focus {
    background-color: currentColor;
  }

  [focus-bg="inherit"]:focus {
    background-color: inherit;
  }

  [focus-bg="custom"]:focus {
    background-color: var(--sx-bg);
  }

  [active-bg="neutral-50"]:active {
    background-color: var(--sx-color-neutral-50);
  }

  [active-bg="neutral-100"]:active {
    background-color: var(--sx-color-neutral-100);
  }

  [active-bg="neutral-200"]:active {
    background-color: var(--sx-color-neutral-200);
  }

  [active-bg="neutral-300"]:active {
    background-color: var(--sx-color-neutral-300);
  }

  [active-bg="neutral-400"]:active {
    background-color: var(--sx-color-neutral-400);
  }

  [active-bg="neutral-500"]:active {
    background-color: var(--sx-color-neutral-500);
  }

  [active-bg="neutral-600"]:active {
    background-color: var(--sx-color-neutral-600);
  }

  [active-bg="neutral-700"]:active {
    background-color: var(--sx-color-neutral-700);
  }

  [active-bg="neutral-800"]:active {
    background-color: var(--sx-color-neutral-800);
  }

  [active-bg="neutral-900"]:active {
    background-color: var(--sx-color-neutral-900);
  }

  [active-bg="neutral-950"]:active {
    background-color: var(--sx-color-neutral-950);
  }

  [active-bg="brand-50"]:active {
    background-color: var(--sx-color-brand-50);
  }

  [active-bg="brand-100"]:active {
    background-color: var(--sx-color-brand-100);
  }

  [active-bg="brand-200"]:active {
    background-color: var(--sx-color-brand-200);
  }

  [active-bg="brand-300"]:active {
    background-color: var(--sx-color-brand-300);
  }

  [active-bg="brand-400"]:active {
    background-color: var(--sx-color-brand-400);
  }

  [active-bg="brand-500"]:active {
    background-color: var(--sx-color-brand-500);
  }

  [active-bg="brand-600"]:active {
    background-color: var(--sx-color-brand-600);
  }

  [active-bg="brand-700"]:active {
    background-color: var(--sx-color-brand-700);
  }

  [active-bg="brand-800"]:active {
    background-color: var(--sx-color-brand-800);
  }

  [active-bg="brand-900"]:active {
    background-color: var(--sx-color-brand-900);
  }

  [active-bg="brand-950"]:active {
    background-color: var(--sx-color-brand-950);
  }

  [active-bg="success-50"]:active {
    background-color: var(--sx-color-success-50);
  }

  [active-bg="success-100"]:active {
    background-color: var(--sx-color-success-100);
  }

  [active-bg="success-200"]:active {
    background-color: var(--sx-color-success-200);
  }

  [active-bg="success-300"]:active {
    background-color: var(--sx-color-success-300);
  }

  [active-bg="success-400"]:active {
    background-color: var(--sx-color-success-400);
  }

  [active-bg="success-500"]:active {
    background-color: var(--sx-color-success-500);
  }

  [active-bg="success-600"]:active {
    background-color: var(--sx-color-success-600);
  }

  [active-bg="success-700"]:active {
    background-color: var(--sx-color-success-700);
  }

  [active-bg="success-800"]:active {
    background-color: var(--sx-color-success-800);
  }

  [active-bg="success-900"]:active {
    background-color: var(--sx-color-success-900);
  }

  [active-bg="success-950"]:active {
    background-color: var(--sx-color-success-950);
  }

  [active-bg="warning-50"]:active {
    background-color: var(--sx-color-warning-50);
  }

  [active-bg="warning-100"]:active {
    background-color: var(--sx-color-warning-100);
  }

  [active-bg="warning-200"]:active {
    background-color: var(--sx-color-warning-200);
  }

  [active-bg="warning-300"]:active {
    background-color: var(--sx-color-warning-300);
  }

  [active-bg="warning-400"]:active {
    background-color: var(--sx-color-warning-400);
  }

  [active-bg="warning-500"]:active {
    background-color: var(--sx-color-warning-500);
  }

  [active-bg="warning-600"]:active {
    background-color: var(--sx-color-warning-600);
  }

  [active-bg="warning-700"]:active {
    background-color: var(--sx-color-warning-700);
  }

  [active-bg="warning-800"]:active {
    background-color: var(--sx-color-warning-800);
  }

  [active-bg="warning-900"]:active {
    background-color: var(--sx-color-warning-900);
  }

  [active-bg="warning-950"]:active {
    background-color: var(--sx-color-warning-950);
  }

  [active-bg="danger-50"]:active {
    background-color: var(--sx-color-danger-50);
  }

  [active-bg="danger-100"]:active {
    background-color: var(--sx-color-danger-100);
  }

  [active-bg="danger-200"]:active {
    background-color: var(--sx-color-danger-200);
  }

  [active-bg="danger-300"]:active {
    background-color: var(--sx-color-danger-300);
  }

  [active-bg="danger-400"]:active {
    background-color: var(--sx-color-danger-400);
  }

  [active-bg="danger-500"]:active {
    background-color: var(--sx-color-danger-500);
  }

  [active-bg="danger-600"]:active {
    background-color: var(--sx-color-danger-600);
  }

  [active-bg="danger-700"]:active {
    background-color: var(--sx-color-danger-700);
  }

  [active-bg="danger-800"]:active {
    background-color: var(--sx-color-danger-800);
  }

  [active-bg="danger-900"]:active {
    background-color: var(--sx-color-danger-900);
  }

  [active-bg="danger-950"]:active {
    background-color: var(--sx-color-danger-950);
  }

  [active-bg="surface"]:active {
    background-color: var(--sx-surface-bg);
  }

  [active-bg="surface-fg"]:active {
    background-color: var(--sx-surface-fg);
  }

  [active-bg="muted"]:active {
    background-color: var(--sx-surface-muted);
  }

  [active-bg="muted-fg"]:active {
    background-color: var(--sx-surface-muted-fg);
  }

  [active-bg="border"]:active {
    background-color: var(--sx-surface-border);
  }

  [active-bg="white"]:active {
    background-color: #ffffff;
  }

  [active-bg="black"]:active {
    background-color: #000000;
  }

  [active-bg="transparent"]:active {
    background-color: transparent;
  }

  [active-bg="current"]:active {
    background-color: currentColor;
  }

  [active-bg="inherit"]:active {
    background-color: inherit;
  }

  [active-bg="custom"]:active {
    background-color: var(--sx-bg);
  }

  [group]:hover [group-hover-bg="neutral-50"] {
    background-color: var(--sx-color-neutral-50);
  }

  [group]:hover [group-hover-bg="neutral-100"] {
    background-color: var(--sx-color-neutral-100);
  }

  [group]:hover [group-hover-bg="neutral-200"] {
    background-color: var(--sx-color-neutral-200);
  }

  [group]:hover [group-hover-bg="neutral-300"] {
    background-color: var(--sx-color-neutral-300);
  }

  [group]:hover [group-hover-bg="neutral-400"] {
    background-color: var(--sx-color-neutral-400);
  }

  [group]:hover [group-hover-bg="neutral-500"] {
    background-color: var(--sx-color-neutral-500);
  }

  [group]:hover [group-hover-bg="neutral-600"] {
    background-color: var(--sx-color-neutral-600);
  }

  [group]:hover [group-hover-bg="neutral-700"] {
    background-color: var(--sx-color-neutral-700);
  }

  [group]:hover [group-hover-bg="neutral-800"] {
    background-color: var(--sx-color-neutral-800);
  }

  [group]:hover [group-hover-bg="neutral-900"] {
    background-color: var(--sx-color-neutral-900);
  }

  [group]:hover [group-hover-bg="neutral-950"] {
    background-color: var(--sx-color-neutral-950);
  }

  [group]:hover [group-hover-bg="brand-50"] {
    background-color: var(--sx-color-brand-50);
  }

  [group]:hover [group-hover-bg="brand-100"] {
    background-color: var(--sx-color-brand-100);
  }

  [group]:hover [group-hover-bg="brand-200"] {
    background-color: var(--sx-color-brand-200);
  }

  [group]:hover [group-hover-bg="brand-300"] {
    background-color: var(--sx-color-brand-300);
  }

  [group]:hover [group-hover-bg="brand-400"] {
    background-color: var(--sx-color-brand-400);
  }

  [group]:hover [group-hover-bg="brand-500"] {
    background-color: var(--sx-color-brand-500);
  }

  [group]:hover [group-hover-bg="brand-600"] {
    background-color: var(--sx-color-brand-600);
  }

  [group]:hover [group-hover-bg="brand-700"] {
    background-color: var(--sx-color-brand-700);
  }

  [group]:hover [group-hover-bg="brand-800"] {
    background-color: var(--sx-color-brand-800);
  }

  [group]:hover [group-hover-bg="brand-900"] {
    background-color: var(--sx-color-brand-900);
  }

  [group]:hover [group-hover-bg="brand-950"] {
    background-color: var(--sx-color-brand-950);
  }

  [group]:hover [group-hover-bg="success-50"] {
    background-color: var(--sx-color-success-50);
  }

  [group]:hover [group-hover-bg="success-100"] {
    background-color: var(--sx-color-success-100);
  }

  [group]:hover [group-hover-bg="success-200"] {
    background-color: var(--sx-color-success-200);
  }

  [group]:hover [group-hover-bg="success-300"] {
    background-color: var(--sx-color-success-300);
  }

  [group]:hover [group-hover-bg="success-400"] {
    background-color: var(--sx-color-success-400);
  }

  [group]:hover [group-hover-bg="success-500"] {
    background-color: var(--sx-color-success-500);
  }

  [group]:hover [group-hover-bg="success-600"] {
    background-color: var(--sx-color-success-600);
  }

  [group]:hover [group-hover-bg="success-700"] {
    background-color: var(--sx-color-success-700);
  }

  [group]:hover [group-hover-bg="success-800"] {
    background-color: var(--sx-color-success-800);
  }

  [group]:hover [group-hover-bg="success-900"] {
    background-color: var(--sx-color-success-900);
  }

  [group]:hover [group-hover-bg="success-950"] {
    background-color: var(--sx-color-success-950);
  }

  [group]:hover [group-hover-bg="warning-50"] {
    background-color: var(--sx-color-warning-50);
  }

  [group]:hover [group-hover-bg="warning-100"] {
    background-color: var(--sx-color-warning-100);
  }

  [group]:hover [group-hover-bg="warning-200"] {
    background-color: var(--sx-color-warning-200);
  }

  [group]:hover [group-hover-bg="warning-300"] {
    background-color: var(--sx-color-warning-300);
  }

  [group]:hover [group-hover-bg="warning-400"] {
    background-color: var(--sx-color-warning-400);
  }

  [group]:hover [group-hover-bg="warning-500"] {
    background-color: var(--sx-color-warning-500);
  }

  [group]:hover [group-hover-bg="warning-600"] {
    background-color: var(--sx-color-warning-600);
  }

  [group]:hover [group-hover-bg="warning-700"] {
    background-color: var(--sx-color-warning-700);
  }

  [group]:hover [group-hover-bg="warning-800"] {
    background-color: var(--sx-color-warning-800);
  }

  [group]:hover [group-hover-bg="warning-900"] {
    background-color: var(--sx-color-warning-900);
  }

  [group]:hover [group-hover-bg="warning-950"] {
    background-color: var(--sx-color-warning-950);
  }

  [group]:hover [group-hover-bg="danger-50"] {
    background-color: var(--sx-color-danger-50);
  }

  [group]:hover [group-hover-bg="danger-100"] {
    background-color: var(--sx-color-danger-100);
  }

  [group]:hover [group-hover-bg="danger-200"] {
    background-color: var(--sx-color-danger-200);
  }

  [group]:hover [group-hover-bg="danger-300"] {
    background-color: var(--sx-color-danger-300);
  }

  [group]:hover [group-hover-bg="danger-400"] {
    background-color: var(--sx-color-danger-400);
  }

  [group]:hover [group-hover-bg="danger-500"] {
    background-color: var(--sx-color-danger-500);
  }

  [group]:hover [group-hover-bg="danger-600"] {
    background-color: var(--sx-color-danger-600);
  }

  [group]:hover [group-hover-bg="danger-700"] {
    background-color: var(--sx-color-danger-700);
  }

  [group]:hover [group-hover-bg="danger-800"] {
    background-color: var(--sx-color-danger-800);
  }

  [group]:hover [group-hover-bg="danger-900"] {
    background-color: var(--sx-color-danger-900);
  }

  [group]:hover [group-hover-bg="danger-950"] {
    background-color: var(--sx-color-danger-950);
  }

  [group]:hover [group-hover-bg="surface"] {
    background-color: var(--sx-surface-bg);
  }

  [group]:hover [group-hover-bg="surface-fg"] {
    background-color: var(--sx-surface-fg);
  }

  [group]:hover [group-hover-bg="muted"] {
    background-color: var(--sx-surface-muted);
  }

  [group]:hover [group-hover-bg="muted-fg"] {
    background-color: var(--sx-surface-muted-fg);
  }

  [group]:hover [group-hover-bg="border"] {
    background-color: var(--sx-surface-border);
  }

  [group]:hover [group-hover-bg="white"] {
    background-color: #ffffff;
  }

  [group]:hover [group-hover-bg="black"] {
    background-color: #000000;
  }

  [group]:hover [group-hover-bg="transparent"] {
    background-color: transparent;
  }

  [group]:hover [group-hover-bg="current"] {
    background-color: currentColor;
  }

  [group]:hover [group-hover-bg="inherit"] {
    background-color: inherit;
  }

  [group]:hover [group-hover-bg="custom"] {
    background-color: var(--sx-bg);
  }

  [hover-fg="neutral-50"]:hover {
    color: var(--sx-color-neutral-50);
  }

  [hover-fg="neutral-100"]:hover {
    color: var(--sx-color-neutral-100);
  }

  [hover-fg="neutral-200"]:hover {
    color: var(--sx-color-neutral-200);
  }

  [hover-fg="neutral-300"]:hover {
    color: var(--sx-color-neutral-300);
  }

  [hover-fg="neutral-400"]:hover {
    color: var(--sx-color-neutral-400);
  }

  [hover-fg="neutral-500"]:hover {
    color: var(--sx-color-neutral-500);
  }

  [hover-fg="neutral-600"]:hover {
    color: var(--sx-color-neutral-600);
  }

  [hover-fg="neutral-700"]:hover {
    color: var(--sx-color-neutral-700);
  }

  [hover-fg="neutral-800"]:hover {
    color: var(--sx-color-neutral-800);
  }

  [hover-fg="neutral-900"]:hover {
    color: var(--sx-color-neutral-900);
  }

  [hover-fg="neutral-950"]:hover {
    color: var(--sx-color-neutral-950);
  }

  [hover-fg="brand-50"]:hover {
    color: var(--sx-color-brand-50);
  }

  [hover-fg="brand-100"]:hover {
    color: var(--sx-color-brand-100);
  }

  [hover-fg="brand-200"]:hover {
    color: var(--sx-color-brand-200);
  }

  [hover-fg="brand-300"]:hover {
    color: var(--sx-color-brand-300);
  }

  [hover-fg="brand-400"]:hover {
    color: var(--sx-color-brand-400);
  }

  [hover-fg="brand-500"]:hover {
    color: var(--sx-color-brand-500);
  }

  [hover-fg="brand-600"]:hover {
    color: var(--sx-color-brand-600);
  }

  [hover-fg="brand-700"]:hover {
    color: var(--sx-color-brand-700);
  }

  [hover-fg="brand-800"]:hover {
    color: var(--sx-color-brand-800);
  }

  [hover-fg="brand-900"]:hover {
    color: var(--sx-color-brand-900);
  }

  [hover-fg="brand-950"]:hover {
    color: var(--sx-color-brand-950);
  }

  [hover-fg="success-50"]:hover {
    color: var(--sx-color-success-50);
  }

  [hover-fg="success-100"]:hover {
    color: var(--sx-color-success-100);
  }

  [hover-fg="success-200"]:hover {
    color: var(--sx-color-success-200);
  }

  [hover-fg="success-300"]:hover {
    color: var(--sx-color-success-300);
  }

  [hover-fg="success-400"]:hover {
    color: var(--sx-color-success-400);
  }

  [hover-fg="success-500"]:hover {
    color: var(--sx-color-success-500);
  }

  [hover-fg="success-600"]:hover {
    color: var(--sx-color-success-600);
  }

  [hover-fg="success-700"]:hover {
    color: var(--sx-color-success-700);
  }

  [hover-fg="success-800"]:hover {
    color: var(--sx-color-success-800);
  }

  [hover-fg="success-900"]:hover {
    color: var(--sx-color-success-900);
  }

  [hover-fg="success-950"]:hover {
    color: var(--sx-color-success-950);
  }

  [hover-fg="warning-50"]:hover {
    color: var(--sx-color-warning-50);
  }

  [hover-fg="warning-100"]:hover {
    color: var(--sx-color-warning-100);
  }

  [hover-fg="warning-200"]:hover {
    color: var(--sx-color-warning-200);
  }

  [hover-fg="warning-300"]:hover {
    color: var(--sx-color-warning-300);
  }

  [hover-fg="warning-400"]:hover {
    color: var(--sx-color-warning-400);
  }

  [hover-fg="warning-500"]:hover {
    color: var(--sx-color-warning-500);
  }

  [hover-fg="warning-600"]:hover {
    color: var(--sx-color-warning-600);
  }

  [hover-fg="warning-700"]:hover {
    color: var(--sx-color-warning-700);
  }

  [hover-fg="warning-800"]:hover {
    color: var(--sx-color-warning-800);
  }

  [hover-fg="warning-900"]:hover {
    color: var(--sx-color-warning-900);
  }

  [hover-fg="warning-950"]:hover {
    color: var(--sx-color-warning-950);
  }

  [hover-fg="danger-50"]:hover {
    color: var(--sx-color-danger-50);
  }

  [hover-fg="danger-100"]:hover {
    color: var(--sx-color-danger-100);
  }

  [hover-fg="danger-200"]:hover {
    color: var(--sx-color-danger-200);
  }

  [hover-fg="danger-300"]:hover {
    color: var(--sx-color-danger-300);
  }

  [hover-fg="danger-400"]:hover {
    color: var(--sx-color-danger-400);
  }

  [hover-fg="danger-500"]:hover {
    color: var(--sx-color-danger-500);
  }

  [hover-fg="danger-600"]:hover {
    color: var(--sx-color-danger-600);
  }

  [hover-fg="danger-700"]:hover {
    color: var(--sx-color-danger-700);
  }

  [hover-fg="danger-800"]:hover {
    color: var(--sx-color-danger-800);
  }

  [hover-fg="danger-900"]:hover {
    color: var(--sx-color-danger-900);
  }

  [hover-fg="danger-950"]:hover {
    color: var(--sx-color-danger-950);
  }

  [hover-fg="surface"]:hover {
    color: var(--sx-surface-bg);
  }

  [hover-fg="surface-fg"]:hover {
    color: var(--sx-surface-fg);
  }

  [hover-fg="muted"]:hover {
    color: var(--sx-surface-muted);
  }

  [hover-fg="muted-fg"]:hover {
    color: var(--sx-surface-muted-fg);
  }

  [hover-fg="border"]:hover {
    color: var(--sx-surface-border);
  }

  [hover-fg="white"]:hover {
    color: #ffffff;
  }

  [hover-fg="black"]:hover {
    color: #000000;
  }

  [hover-fg="transparent"]:hover {
    color: transparent;
  }

  [hover-fg="current"]:hover {
    color: currentColor;
  }

  [hover-fg="inherit"]:hover {
    color: inherit;
  }

  [hover-fg="custom"]:hover {
    color: var(--sx-fg);
  }

  [focus-fg="neutral-50"]:focus {
    color: var(--sx-color-neutral-50);
  }

  [focus-fg="neutral-100"]:focus {
    color: var(--sx-color-neutral-100);
  }

  [focus-fg="neutral-200"]:focus {
    color: var(--sx-color-neutral-200);
  }

  [focus-fg="neutral-300"]:focus {
    color: var(--sx-color-neutral-300);
  }

  [focus-fg="neutral-400"]:focus {
    color: var(--sx-color-neutral-400);
  }

  [focus-fg="neutral-500"]:focus {
    color: var(--sx-color-neutral-500);
  }

  [focus-fg="neutral-600"]:focus {
    color: var(--sx-color-neutral-600);
  }

  [focus-fg="neutral-700"]:focus {
    color: var(--sx-color-neutral-700);
  }

  [focus-fg="neutral-800"]:focus {
    color: var(--sx-color-neutral-800);
  }

  [focus-fg="neutral-900"]:focus {
    color: var(--sx-color-neutral-900);
  }

  [focus-fg="neutral-950"]:focus {
    color: var(--sx-color-neutral-950);
  }

  [focus-fg="brand-50"]:focus {
    color: var(--sx-color-brand-50);
  }

  [focus-fg="brand-100"]:focus {
    color: var(--sx-color-brand-100);
  }

  [focus-fg="brand-200"]:focus {
    color: var(--sx-color-brand-200);
  }

  [focus-fg="brand-300"]:focus {
    color: var(--sx-color-brand-300);
  }

  [focus-fg="brand-400"]:focus {
    color: var(--sx-color-brand-400);
  }

  [focus-fg="brand-500"]:focus {
    color: var(--sx-color-brand-500);
  }

  [focus-fg="brand-600"]:focus {
    color: var(--sx-color-brand-600);
  }

  [focus-fg="brand-700"]:focus {
    color: var(--sx-color-brand-700);
  }

  [focus-fg="brand-800"]:focus {
    color: var(--sx-color-brand-800);
  }

  [focus-fg="brand-900"]:focus {
    color: var(--sx-color-brand-900);
  }

  [focus-fg="brand-950"]:focus {
    color: var(--sx-color-brand-950);
  }

  [focus-fg="success-50"]:focus {
    color: var(--sx-color-success-50);
  }

  [focus-fg="success-100"]:focus {
    color: var(--sx-color-success-100);
  }

  [focus-fg="success-200"]:focus {
    color: var(--sx-color-success-200);
  }

  [focus-fg="success-300"]:focus {
    color: var(--sx-color-success-300);
  }

  [focus-fg="success-400"]:focus {
    color: var(--sx-color-success-400);
  }

  [focus-fg="success-500"]:focus {
    color: var(--sx-color-success-500);
  }

  [focus-fg="success-600"]:focus {
    color: var(--sx-color-success-600);
  }

  [focus-fg="success-700"]:focus {
    color: var(--sx-color-success-700);
  }

  [focus-fg="success-800"]:focus {
    color: var(--sx-color-success-800);
  }

  [focus-fg="success-900"]:focus {
    color: var(--sx-color-success-900);
  }

  [focus-fg="success-950"]:focus {
    color: var(--sx-color-success-950);
  }

  [focus-fg="warning-50"]:focus {
    color: var(--sx-color-warning-50);
  }

  [focus-fg="warning-100"]:focus {
    color: var(--sx-color-warning-100);
  }

  [focus-fg="warning-200"]:focus {
    color: var(--sx-color-warning-200);
  }

  [focus-fg="warning-300"]:focus {
    color: var(--sx-color-warning-300);
  }

  [focus-fg="warning-400"]:focus {
    color: var(--sx-color-warning-400);
  }

  [focus-fg="warning-500"]:focus {
    color: var(--sx-color-warning-500);
  }

  [focus-fg="warning-600"]:focus {
    color: var(--sx-color-warning-600);
  }

  [focus-fg="warning-700"]:focus {
    color: var(--sx-color-warning-700);
  }

  [focus-fg="warning-800"]:focus {
    color: var(--sx-color-warning-800);
  }

  [focus-fg="warning-900"]:focus {
    color: var(--sx-color-warning-900);
  }

  [focus-fg="warning-950"]:focus {
    color: var(--sx-color-warning-950);
  }

  [focus-fg="danger-50"]:focus {
    color: var(--sx-color-danger-50);
  }

  [focus-fg="danger-100"]:focus {
    color: var(--sx-color-danger-100);
  }

  [focus-fg="danger-200"]:focus {
    color: var(--sx-color-danger-200);
  }

  [focus-fg="danger-300"]:focus {
    color: var(--sx-color-danger-300);
  }

  [focus-fg="danger-400"]:focus {
    color: var(--sx-color-danger-400);
  }

  [focus-fg="danger-500"]:focus {
    color: var(--sx-color-danger-500);
  }

  [focus-fg="danger-600"]:focus {
    color: var(--sx-color-danger-600);
  }

  [focus-fg="danger-700"]:focus {
    color: var(--sx-color-danger-700);
  }

  [focus-fg="danger-800"]:focus {
    color: var(--sx-color-danger-800);
  }

  [focus-fg="danger-900"]:focus {
    color: var(--sx-color-danger-900);
  }

  [focus-fg="danger-950"]:focus {
    color: var(--sx-color-danger-950);
  }

  [focus-fg="surface"]:focus {
    color: var(--sx-surface-bg);
  }

  [focus-fg="surface-fg"]:focus {
    color: var(--sx-surface-fg);
  }

  [focus-fg="muted"]:focus {
    color: var(--sx-surface-muted);
  }

  [focus-fg="muted-fg"]:focus {
    color: var(--sx-surface-muted-fg);
  }

  [focus-fg="border"]:focus {
    color: var(--sx-surface-border);
  }

  [focus-fg="white"]:focus {
    color: #ffffff;
  }

  [focus-fg="black"]:focus {
    color: #000000;
  }

  [focus-fg="transparent"]:focus {
    color: transparent;
  }

  [focus-fg="current"]:focus {
    color: currentColor;
  }

  [focus-fg="inherit"]:focus {
    color: inherit;
  }

  [focus-fg="custom"]:focus {
    color: var(--sx-fg);
  }

  [group]:hover [group-hover-fg="neutral-50"] {
    color: var(--sx-color-neutral-50);
  }

  [group]:hover [group-hover-fg="neutral-100"] {
    color: var(--sx-color-neutral-100);
  }

  [group]:hover [group-hover-fg="neutral-200"] {
    color: var(--sx-color-neutral-200);
  }

  [group]:hover [group-hover-fg="neutral-300"] {
    color: var(--sx-color-neutral-300);
  }

  [group]:hover [group-hover-fg="neutral-400"] {
    color: var(--sx-color-neutral-400);
  }

  [group]:hover [group-hover-fg="neutral-500"] {
    color: var(--sx-color-neutral-500);
  }

  [group]:hover [group-hover-fg="neutral-600"] {
    color: var(--sx-color-neutral-600);
  }

  [group]:hover [group-hover-fg="neutral-700"] {
    color: var(--sx-color-neutral-700);
  }

  [group]:hover [group-hover-fg="neutral-800"] {
    color: var(--sx-color-neutral-800);
  }

  [group]:hover [group-hover-fg="neutral-900"] {
    color: var(--sx-color-neutral-900);
  }

  [group]:hover [group-hover-fg="neutral-950"] {
    color: var(--sx-color-neutral-950);
  }

  [group]:hover [group-hover-fg="brand-50"] {
    color: var(--sx-color-brand-50);
  }

  [group]:hover [group-hover-fg="brand-100"] {
    color: var(--sx-color-brand-100);
  }

  [group]:hover [group-hover-fg="brand-200"] {
    color: var(--sx-color-brand-200);
  }

  [group]:hover [group-hover-fg="brand-300"] {
    color: var(--sx-color-brand-300);
  }

  [group]:hover [group-hover-fg="brand-400"] {
    color: var(--sx-color-brand-400);
  }

  [group]:hover [group-hover-fg="brand-500"] {
    color: var(--sx-color-brand-500);
  }

  [group]:hover [group-hover-fg="brand-600"] {
    color: var(--sx-color-brand-600);
  }

  [group]:hover [group-hover-fg="brand-700"] {
    color: var(--sx-color-brand-700);
  }

  [group]:hover [group-hover-fg="brand-800"] {
    color: var(--sx-color-brand-800);
  }

  [group]:hover [group-hover-fg="brand-900"] {
    color: var(--sx-color-brand-900);
  }

  [group]:hover [group-hover-fg="brand-950"] {
    color: var(--sx-color-brand-950);
  }

  [group]:hover [group-hover-fg="success-50"] {
    color: var(--sx-color-success-50);
  }

  [group]:hover [group-hover-fg="success-100"] {
    color: var(--sx-color-success-100);
  }

  [group]:hover [group-hover-fg="success-200"] {
    color: var(--sx-color-success-200);
  }

  [group]:hover [group-hover-fg="success-300"] {
    color: var(--sx-color-success-300);
  }

  [group]:hover [group-hover-fg="success-400"] {
    color: var(--sx-color-success-400);
  }

  [group]:hover [group-hover-fg="success-500"] {
    color: var(--sx-color-success-500);
  }

  [group]:hover [group-hover-fg="success-600"] {
    color: var(--sx-color-success-600);
  }

  [group]:hover [group-hover-fg="success-700"] {
    color: var(--sx-color-success-700);
  }

  [group]:hover [group-hover-fg="success-800"] {
    color: var(--sx-color-success-800);
  }

  [group]:hover [group-hover-fg="success-900"] {
    color: var(--sx-color-success-900);
  }

  [group]:hover [group-hover-fg="success-950"] {
    color: var(--sx-color-success-950);
  }

  [group]:hover [group-hover-fg="warning-50"] {
    color: var(--sx-color-warning-50);
  }

  [group]:hover [group-hover-fg="warning-100"] {
    color: var(--sx-color-warning-100);
  }

  [group]:hover [group-hover-fg="warning-200"] {
    color: var(--sx-color-warning-200);
  }

  [group]:hover [group-hover-fg="warning-300"] {
    color: var(--sx-color-warning-300);
  }

  [group]:hover [group-hover-fg="warning-400"] {
    color: var(--sx-color-warning-400);
  }

  [group]:hover [group-hover-fg="warning-500"] {
    color: var(--sx-color-warning-500);
  }

  [group]:hover [group-hover-fg="warning-600"] {
    color: var(--sx-color-warning-600);
  }

  [group]:hover [group-hover-fg="warning-700"] {
    color: var(--sx-color-warning-700);
  }

  [group]:hover [group-hover-fg="warning-800"] {
    color: var(--sx-color-warning-800);
  }

  [group]:hover [group-hover-fg="warning-900"] {
    color: var(--sx-color-warning-900);
  }

  [group]:hover [group-hover-fg="warning-950"] {
    color: var(--sx-color-warning-950);
  }

  [group]:hover [group-hover-fg="danger-50"] {
    color: var(--sx-color-danger-50);
  }

  [group]:hover [group-hover-fg="danger-100"] {
    color: var(--sx-color-danger-100);
  }

  [group]:hover [group-hover-fg="danger-200"] {
    color: var(--sx-color-danger-200);
  }

  [group]:hover [group-hover-fg="danger-300"] {
    color: var(--sx-color-danger-300);
  }

  [group]:hover [group-hover-fg="danger-400"] {
    color: var(--sx-color-danger-400);
  }

  [group]:hover [group-hover-fg="danger-500"] {
    color: var(--sx-color-danger-500);
  }

  [group]:hover [group-hover-fg="danger-600"] {
    color: var(--sx-color-danger-600);
  }

  [group]:hover [group-hover-fg="danger-700"] {
    color: var(--sx-color-danger-700);
  }

  [group]:hover [group-hover-fg="danger-800"] {
    color: var(--sx-color-danger-800);
  }

  [group]:hover [group-hover-fg="danger-900"] {
    color: var(--sx-color-danger-900);
  }

  [group]:hover [group-hover-fg="danger-950"] {
    color: var(--sx-color-danger-950);
  }

  [group]:hover [group-hover-fg="surface"] {
    color: var(--sx-surface-bg);
  }

  [group]:hover [group-hover-fg="surface-fg"] {
    color: var(--sx-surface-fg);
  }

  [group]:hover [group-hover-fg="muted"] {
    color: var(--sx-surface-muted);
  }

  [group]:hover [group-hover-fg="muted-fg"] {
    color: var(--sx-surface-muted-fg);
  }

  [group]:hover [group-hover-fg="border"] {
    color: var(--sx-surface-border);
  }

  [group]:hover [group-hover-fg="white"] {
    color: #ffffff;
  }

  [group]:hover [group-hover-fg="black"] {
    color: #000000;
  }

  [group]:hover [group-hover-fg="transparent"] {
    color: transparent;
  }

  [group]:hover [group-hover-fg="current"] {
    color: currentColor;
  }

  [group]:hover [group-hover-fg="inherit"] {
    color: inherit;
  }

  [group]:hover [group-hover-fg="custom"] {
    color: var(--sx-fg);
  }

  [hover-border-color="neutral-50"]:hover {
    border-color: var(--sx-color-neutral-50);
  }

  [hover-border-color="neutral-100"]:hover {
    border-color: var(--sx-color-neutral-100);
  }

  [hover-border-color="neutral-200"]:hover {
    border-color: var(--sx-color-neutral-200);
  }

  [hover-border-color="neutral-300"]:hover {
    border-color: var(--sx-color-neutral-300);
  }

  [hover-border-color="neutral-400"]:hover {
    border-color: var(--sx-color-neutral-400);
  }

  [hover-border-color="neutral-500"]:hover {
    border-color: var(--sx-color-neutral-500);
  }

  [hover-border-color="neutral-600"]:hover {
    border-color: var(--sx-color-neutral-600);
  }

  [hover-border-color="neutral-700"]:hover {
    border-color: var(--sx-color-neutral-700);
  }

  [hover-border-color="neutral-800"]:hover {
    border-color: var(--sx-color-neutral-800);
  }

  [hover-border-color="neutral-900"]:hover {
    border-color: var(--sx-color-neutral-900);
  }

  [hover-border-color="neutral-950"]:hover {
    border-color: var(--sx-color-neutral-950);
  }

  [hover-border-color="brand-50"]:hover {
    border-color: var(--sx-color-brand-50);
  }

  [hover-border-color="brand-100"]:hover {
    border-color: var(--sx-color-brand-100);
  }

  [hover-border-color="brand-200"]:hover {
    border-color: var(--sx-color-brand-200);
  }

  [hover-border-color="brand-300"]:hover {
    border-color: var(--sx-color-brand-300);
  }

  [hover-border-color="brand-400"]:hover {
    border-color: var(--sx-color-brand-400);
  }

  [hover-border-color="brand-500"]:hover {
    border-color: var(--sx-color-brand-500);
  }

  [hover-border-color="brand-600"]:hover {
    border-color: var(--sx-color-brand-600);
  }

  [hover-border-color="brand-700"]:hover {
    border-color: var(--sx-color-brand-700);
  }

  [hover-border-color="brand-800"]:hover {
    border-color: var(--sx-color-brand-800);
  }

  [hover-border-color="brand-900"]:hover {
    border-color: var(--sx-color-brand-900);
  }

  [hover-border-color="brand-950"]:hover {
    border-color: var(--sx-color-brand-950);
  }

  [hover-border-color="success-50"]:hover {
    border-color: var(--sx-color-success-50);
  }

  [hover-border-color="success-100"]:hover {
    border-color: var(--sx-color-success-100);
  }

  [hover-border-color="success-200"]:hover {
    border-color: var(--sx-color-success-200);
  }

  [hover-border-color="success-300"]:hover {
    border-color: var(--sx-color-success-300);
  }

  [hover-border-color="success-400"]:hover {
    border-color: var(--sx-color-success-400);
  }

  [hover-border-color="success-500"]:hover {
    border-color: var(--sx-color-success-500);
  }

  [hover-border-color="success-600"]:hover {
    border-color: var(--sx-color-success-600);
  }

  [hover-border-color="success-700"]:hover {
    border-color: var(--sx-color-success-700);
  }

  [hover-border-color="success-800"]:hover {
    border-color: var(--sx-color-success-800);
  }

  [hover-border-color="success-900"]:hover {
    border-color: var(--sx-color-success-900);
  }

  [hover-border-color="success-950"]:hover {
    border-color: var(--sx-color-success-950);
  }

  [hover-border-color="warning-50"]:hover {
    border-color: var(--sx-color-warning-50);
  }

  [hover-border-color="warning-100"]:hover {
    border-color: var(--sx-color-warning-100);
  }

  [hover-border-color="warning-200"]:hover {
    border-color: var(--sx-color-warning-200);
  }

  [hover-border-color="warning-300"]:hover {
    border-color: var(--sx-color-warning-300);
  }

  [hover-border-color="warning-400"]:hover {
    border-color: var(--sx-color-warning-400);
  }

  [hover-border-color="warning-500"]:hover {
    border-color: var(--sx-color-warning-500);
  }

  [hover-border-color="warning-600"]:hover {
    border-color: var(--sx-color-warning-600);
  }

  [hover-border-color="warning-700"]:hover {
    border-color: var(--sx-color-warning-700);
  }

  [hover-border-color="warning-800"]:hover {
    border-color: var(--sx-color-warning-800);
  }

  [hover-border-color="warning-900"]:hover {
    border-color: var(--sx-color-warning-900);
  }

  [hover-border-color="warning-950"]:hover {
    border-color: var(--sx-color-warning-950);
  }

  [hover-border-color="danger-50"]:hover {
    border-color: var(--sx-color-danger-50);
  }

  [hover-border-color="danger-100"]:hover {
    border-color: var(--sx-color-danger-100);
  }

  [hover-border-color="danger-200"]:hover {
    border-color: var(--sx-color-danger-200);
  }

  [hover-border-color="danger-300"]:hover {
    border-color: var(--sx-color-danger-300);
  }

  [hover-border-color="danger-400"]:hover {
    border-color: var(--sx-color-danger-400);
  }

  [hover-border-color="danger-500"]:hover {
    border-color: var(--sx-color-danger-500);
  }

  [hover-border-color="danger-600"]:hover {
    border-color: var(--sx-color-danger-600);
  }

  [hover-border-color="danger-700"]:hover {
    border-color: var(--sx-color-danger-700);
  }

  [hover-border-color="danger-800"]:hover {
    border-color: var(--sx-color-danger-800);
  }

  [hover-border-color="danger-900"]:hover {
    border-color: var(--sx-color-danger-900);
  }

  [hover-border-color="danger-950"]:hover {
    border-color: var(--sx-color-danger-950);
  }

  [hover-border-color="surface"]:hover {
    border-color: var(--sx-surface-bg);
  }

  [hover-border-color="surface-fg"]:hover {
    border-color: var(--sx-surface-fg);
  }

  [hover-border-color="muted"]:hover {
    border-color: var(--sx-surface-muted);
  }

  [hover-border-color="muted-fg"]:hover {
    border-color: var(--sx-surface-muted-fg);
  }

  [hover-border-color="border"]:hover {
    border-color: var(--sx-surface-border);
  }

  [hover-border-color="white"]:hover {
    border-color: #ffffff;
  }

  [hover-border-color="black"]:hover {
    border-color: #000000;
  }

  [hover-border-color="transparent"]:hover {
    border-color: transparent;
  }

  [hover-border-color="current"]:hover {
    border-color: currentColor;
  }

  [hover-border-color="inherit"]:hover {
    border-color: inherit;
  }

  [hover-border-color="custom"]:hover {
    border-color: var(--sx-border-color);
  }

  [focus-border-color="neutral-50"]:focus {
    border-color: var(--sx-color-neutral-50);
  }

  [focus-border-color="neutral-100"]:focus {
    border-color: var(--sx-color-neutral-100);
  }

  [focus-border-color="neutral-200"]:focus {
    border-color: var(--sx-color-neutral-200);
  }

  [focus-border-color="neutral-300"]:focus {
    border-color: var(--sx-color-neutral-300);
  }

  [focus-border-color="neutral-400"]:focus {
    border-color: var(--sx-color-neutral-400);
  }

  [focus-border-color="neutral-500"]:focus {
    border-color: var(--sx-color-neutral-500);
  }

  [focus-border-color="neutral-600"]:focus {
    border-color: var(--sx-color-neutral-600);
  }

  [focus-border-color="neutral-700"]:focus {
    border-color: var(--sx-color-neutral-700);
  }

  [focus-border-color="neutral-800"]:focus {
    border-color: var(--sx-color-neutral-800);
  }

  [focus-border-color="neutral-900"]:focus {
    border-color: var(--sx-color-neutral-900);
  }

  [focus-border-color="neutral-950"]:focus {
    border-color: var(--sx-color-neutral-950);
  }

  [focus-border-color="brand-50"]:focus {
    border-color: var(--sx-color-brand-50);
  }

  [focus-border-color="brand-100"]:focus {
    border-color: var(--sx-color-brand-100);
  }

  [focus-border-color="brand-200"]:focus {
    border-color: var(--sx-color-brand-200);
  }

  [focus-border-color="brand-300"]:focus {
    border-color: var(--sx-color-brand-300);
  }

  [focus-border-color="brand-400"]:focus {
    border-color: var(--sx-color-brand-400);
  }

  [focus-border-color="brand-500"]:focus {
    border-color: var(--sx-color-brand-500);
  }

  [focus-border-color="brand-600"]:focus {
    border-color: var(--sx-color-brand-600);
  }

  [focus-border-color="brand-700"]:focus {
    border-color: var(--sx-color-brand-700);
  }

  [focus-border-color="brand-800"]:focus {
    border-color: var(--sx-color-brand-800);
  }

  [focus-border-color="brand-900"]:focus {
    border-color: var(--sx-color-brand-900);
  }

  [focus-border-color="brand-950"]:focus {
    border-color: var(--sx-color-brand-950);
  }

  [focus-border-color="success-50"]:focus {
    border-color: var(--sx-color-success-50);
  }

  [focus-border-color="success-100"]:focus {
    border-color: var(--sx-color-success-100);
  }

  [focus-border-color="success-200"]:focus {
    border-color: var(--sx-color-success-200);
  }

  [focus-border-color="success-300"]:focus {
    border-color: var(--sx-color-success-300);
  }

  [focus-border-color="success-400"]:focus {
    border-color: var(--sx-color-success-400);
  }

  [focus-border-color="success-500"]:focus {
    border-color: var(--sx-color-success-500);
  }

  [focus-border-color="success-600"]:focus {
    border-color: var(--sx-color-success-600);
  }

  [focus-border-color="success-700"]:focus {
    border-color: var(--sx-color-success-700);
  }

  [focus-border-color="success-800"]:focus {
    border-color: var(--sx-color-success-800);
  }

  [focus-border-color="success-900"]:focus {
    border-color: var(--sx-color-success-900);
  }

  [focus-border-color="success-950"]:focus {
    border-color: var(--sx-color-success-950);
  }

  [focus-border-color="warning-50"]:focus {
    border-color: var(--sx-color-warning-50);
  }

  [focus-border-color="warning-100"]:focus {
    border-color: var(--sx-color-warning-100);
  }

  [focus-border-color="warning-200"]:focus {
    border-color: var(--sx-color-warning-200);
  }

  [focus-border-color="warning-300"]:focus {
    border-color: var(--sx-color-warning-300);
  }

  [focus-border-color="warning-400"]:focus {
    border-color: var(--sx-color-warning-400);
  }

  [focus-border-color="warning-500"]:focus {
    border-color: var(--sx-color-warning-500);
  }

  [focus-border-color="warning-600"]:focus {
    border-color: var(--sx-color-warning-600);
  }

  [focus-border-color="warning-700"]:focus {
    border-color: var(--sx-color-warning-700);
  }

  [focus-border-color="warning-800"]:focus {
    border-color: var(--sx-color-warning-800);
  }

  [focus-border-color="warning-900"]:focus {
    border-color: var(--sx-color-warning-900);
  }

  [focus-border-color="warning-950"]:focus {
    border-color: var(--sx-color-warning-950);
  }

  [focus-border-color="danger-50"]:focus {
    border-color: var(--sx-color-danger-50);
  }

  [focus-border-color="danger-100"]:focus {
    border-color: var(--sx-color-danger-100);
  }

  [focus-border-color="danger-200"]:focus {
    border-color: var(--sx-color-danger-200);
  }

  [focus-border-color="danger-300"]:focus {
    border-color: var(--sx-color-danger-300);
  }

  [focus-border-color="danger-400"]:focus {
    border-color: var(--sx-color-danger-400);
  }

  [focus-border-color="danger-500"]:focus {
    border-color: var(--sx-color-danger-500);
  }

  [focus-border-color="danger-600"]:focus {
    border-color: var(--sx-color-danger-600);
  }

  [focus-border-color="danger-700"]:focus {
    border-color: var(--sx-color-danger-700);
  }

  [focus-border-color="danger-800"]:focus {
    border-color: var(--sx-color-danger-800);
  }

  [focus-border-color="danger-900"]:focus {
    border-color: var(--sx-color-danger-900);
  }

  [focus-border-color="danger-950"]:focus {
    border-color: var(--sx-color-danger-950);
  }

  [focus-border-color="surface"]:focus {
    border-color: var(--sx-surface-bg);
  }

  [focus-border-color="surface-fg"]:focus {
    border-color: var(--sx-surface-fg);
  }

  [focus-border-color="muted"]:focus {
    border-color: var(--sx-surface-muted);
  }

  [focus-border-color="muted-fg"]:focus {
    border-color: var(--sx-surface-muted-fg);
  }

  [focus-border-color="border"]:focus {
    border-color: var(--sx-surface-border);
  }

  [focus-border-color="white"]:focus {
    border-color: #ffffff;
  }

  [focus-border-color="black"]:focus {
    border-color: #000000;
  }

  [focus-border-color="transparent"]:focus {
    border-color: transparent;
  }

  [focus-border-color="current"]:focus {
    border-color: currentColor;
  }

  [focus-border-color="inherit"]:focus {
    border-color: inherit;
  }

  [focus-border-color="custom"]:focus {
    border-color: var(--sx-border-color);
  }

  [focus-visible-border-color="neutral-50"]:focus-visible {
    border-color: var(--sx-color-neutral-50);
  }

  [focus-visible-border-color="neutral-100"]:focus-visible {
    border-color: var(--sx-color-neutral-100);
  }

  [focus-visible-border-color="neutral-200"]:focus-visible {
    border-color: var(--sx-color-neutral-200);
  }

  [focus-visible-border-color="neutral-300"]:focus-visible {
    border-color: var(--sx-color-neutral-300);
  }

  [focus-visible-border-color="neutral-400"]:focus-visible {
    border-color: var(--sx-color-neutral-400);
  }

  [focus-visible-border-color="neutral-500"]:focus-visible {
    border-color: var(--sx-color-neutral-500);
  }

  [focus-visible-border-color="neutral-600"]:focus-visible {
    border-color: var(--sx-color-neutral-600);
  }

  [focus-visible-border-color="neutral-700"]:focus-visible {
    border-color: var(--sx-color-neutral-700);
  }

  [focus-visible-border-color="neutral-800"]:focus-visible {
    border-color: var(--sx-color-neutral-800);
  }

  [focus-visible-border-color="neutral-900"]:focus-visible {
    border-color: var(--sx-color-neutral-900);
  }

  [focus-visible-border-color="neutral-950"]:focus-visible {
    border-color: var(--sx-color-neutral-950);
  }

  [focus-visible-border-color="brand-50"]:focus-visible {
    border-color: var(--sx-color-brand-50);
  }

  [focus-visible-border-color="brand-100"]:focus-visible {
    border-color: var(--sx-color-brand-100);
  }

  [focus-visible-border-color="brand-200"]:focus-visible {
    border-color: var(--sx-color-brand-200);
  }

  [focus-visible-border-color="brand-300"]:focus-visible {
    border-color: var(--sx-color-brand-300);
  }

  [focus-visible-border-color="brand-400"]:focus-visible {
    border-color: var(--sx-color-brand-400);
  }

  [focus-visible-border-color="brand-500"]:focus-visible {
    border-color: var(--sx-color-brand-500);
  }

  [focus-visible-border-color="brand-600"]:focus-visible {
    border-color: var(--sx-color-brand-600);
  }

  [focus-visible-border-color="brand-700"]:focus-visible {
    border-color: var(--sx-color-brand-700);
  }

  [focus-visible-border-color="brand-800"]:focus-visible {
    border-color: var(--sx-color-brand-800);
  }

  [focus-visible-border-color="brand-900"]:focus-visible {
    border-color: var(--sx-color-brand-900);
  }

  [focus-visible-border-color="brand-950"]:focus-visible {
    border-color: var(--sx-color-brand-950);
  }

  [focus-visible-border-color="success-50"]:focus-visible {
    border-color: var(--sx-color-success-50);
  }

  [focus-visible-border-color="success-100"]:focus-visible {
    border-color: var(--sx-color-success-100);
  }

  [focus-visible-border-color="success-200"]:focus-visible {
    border-color: var(--sx-color-success-200);
  }

  [focus-visible-border-color="success-300"]:focus-visible {
    border-color: var(--sx-color-success-300);
  }

  [focus-visible-border-color="success-400"]:focus-visible {
    border-color: var(--sx-color-success-400);
  }

  [focus-visible-border-color="success-500"]:focus-visible {
    border-color: var(--sx-color-success-500);
  }

  [focus-visible-border-color="success-600"]:focus-visible {
    border-color: var(--sx-color-success-600);
  }

  [focus-visible-border-color="success-700"]:focus-visible {
    border-color: var(--sx-color-success-700);
  }

  [focus-visible-border-color="success-800"]:focus-visible {
    border-color: var(--sx-color-success-800);
  }

  [focus-visible-border-color="success-900"]:focus-visible {
    border-color: var(--sx-color-success-900);
  }

  [focus-visible-border-color="success-950"]:focus-visible {
    border-color: var(--sx-color-success-950);
  }

  [focus-visible-border-color="warning-50"]:focus-visible {
    border-color: var(--sx-color-warning-50);
  }

  [focus-visible-border-color="warning-100"]:focus-visible {
    border-color: var(--sx-color-warning-100);
  }

  [focus-visible-border-color="warning-200"]:focus-visible {
    border-color: var(--sx-color-warning-200);
  }

  [focus-visible-border-color="warning-300"]:focus-visible {
    border-color: var(--sx-color-warning-300);
  }

  [focus-visible-border-color="warning-400"]:focus-visible {
    border-color: var(--sx-color-warning-400);
  }

  [focus-visible-border-color="warning-500"]:focus-visible {
    border-color: var(--sx-color-warning-500);
  }

  [focus-visible-border-color="warning-600"]:focus-visible {
    border-color: var(--sx-color-warning-600);
  }

  [focus-visible-border-color="warning-700"]:focus-visible {
    border-color: var(--sx-color-warning-700);
  }

  [focus-visible-border-color="warning-800"]:focus-visible {
    border-color: var(--sx-color-warning-800);
  }

  [focus-visible-border-color="warning-900"]:focus-visible {
    border-color: var(--sx-color-warning-900);
  }

  [focus-visible-border-color="warning-950"]:focus-visible {
    border-color: var(--sx-color-warning-950);
  }

  [focus-visible-border-color="danger-50"]:focus-visible {
    border-color: var(--sx-color-danger-50);
  }

  [focus-visible-border-color="danger-100"]:focus-visible {
    border-color: var(--sx-color-danger-100);
  }

  [focus-visible-border-color="danger-200"]:focus-visible {
    border-color: var(--sx-color-danger-200);
  }

  [focus-visible-border-color="danger-300"]:focus-visible {
    border-color: var(--sx-color-danger-300);
  }

  [focus-visible-border-color="danger-400"]:focus-visible {
    border-color: var(--sx-color-danger-400);
  }

  [focus-visible-border-color="danger-500"]:focus-visible {
    border-color: var(--sx-color-danger-500);
  }

  [focus-visible-border-color="danger-600"]:focus-visible {
    border-color: var(--sx-color-danger-600);
  }

  [focus-visible-border-color="danger-700"]:focus-visible {
    border-color: var(--sx-color-danger-700);
  }

  [focus-visible-border-color="danger-800"]:focus-visible {
    border-color: var(--sx-color-danger-800);
  }

  [focus-visible-border-color="danger-900"]:focus-visible {
    border-color: var(--sx-color-danger-900);
  }

  [focus-visible-border-color="danger-950"]:focus-visible {
    border-color: var(--sx-color-danger-950);
  }

  [focus-visible-border-color="surface"]:focus-visible {
    border-color: var(--sx-surface-bg);
  }

  [focus-visible-border-color="surface-fg"]:focus-visible {
    border-color: var(--sx-surface-fg);
  }

  [focus-visible-border-color="muted"]:focus-visible {
    border-color: var(--sx-surface-muted);
  }

  [focus-visible-border-color="muted-fg"]:focus-visible {
    border-color: var(--sx-surface-muted-fg);
  }

  [focus-visible-border-color="border"]:focus-visible {
    border-color: var(--sx-surface-border);
  }

  [focus-visible-border-color="white"]:focus-visible {
    border-color: #ffffff;
  }

  [focus-visible-border-color="black"]:focus-visible {
    border-color: #000000;
  }

  [focus-visible-border-color="transparent"]:focus-visible {
    border-color: transparent;
  }

  [focus-visible-border-color="current"]:focus-visible {
    border-color: currentColor;
  }

  [focus-visible-border-color="inherit"]:focus-visible {
    border-color: inherit;
  }

  [focus-visible-border-color="custom"]:focus-visible {
    border-color: var(--sx-border-color);
  }

  [focus-outline="0"]:focus {
    outline-width: 0;
  }

  [focus-outline="1"]:focus {
    outline-width: 1px;
  }

  [focus-outline="2"]:focus {
    outline-width: 2px;
  }

  [focus-outline="4"]:focus {
    outline-width: 4px;
  }

  [focus-outline="none"]:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  [focus-visible-outline="0"]:focus-visible {
    outline-width: 0;
  }

  [focus-visible-outline="1"]:focus-visible {
    outline-width: 1px;
  }

  [focus-visible-outline="2"]:focus-visible {
    outline-width: 2px;
  }

  [focus-visible-outline="4"]:focus-visible {
    outline-width: 4px;
  }

  [focus-visible-outline="none"]:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  [focus-ring="0"]:focus {
    box-shadow: none;
  }

  [focus-ring="1"]:focus {
    box-shadow: 0 0 0 1px var(--sx-surface-ring);
  }

  [focus-ring="2"]:focus {
    box-shadow: 0 0 0 2px var(--sx-surface-ring);
  }

  [focus-ring="4"]:focus {
    box-shadow: 0 0 0 4px var(--sx-surface-ring);
  }

  [focus-visible-ring="0"]:focus-visible {
    box-shadow: none;
  }

  [focus-visible-ring="1"]:focus-visible {
    box-shadow: 0 0 0 1px var(--sx-surface-ring);
  }

  [focus-visible-ring="2"]:focus-visible {
    box-shadow: 0 0 0 2px var(--sx-surface-ring);
  }

  [focus-visible-ring="4"]:focus-visible {
    box-shadow: 0 0 0 4px var(--sx-surface-ring);
  }

  [hover-text-decoration="underline"]:hover {
    text-decoration-line: underline;
  }

  [hover-text-decoration="overline"]:hover {
    text-decoration-line: overline;
  }

  [hover-text-decoration="line-through"]:hover {
    text-decoration-line: line-through;
  }

  [hover-text-decoration="none"]:hover {
    text-decoration-line: none;
  }

  [group]:hover [group-hover-text-decoration="underline"] {
    text-decoration-line: underline;
  }

  [group]:hover [group-hover-text-decoration="overline"] {
    text-decoration-line: overline;
  }

  [group]:hover [group-hover-text-decoration="line-through"] {
    text-decoration-line: line-through;
  }

  [group]:hover [group-hover-text-decoration="none"] {
    text-decoration-line: none;
  }

  [hover-opacity="0"]:hover {
    opacity: 0;
  }

  [hover-opacity="5"]:hover {
    opacity: 0.05;
  }

  [hover-opacity="10"]:hover {
    opacity: 0.1;
  }

  [hover-opacity="20"]:hover {
    opacity: 0.2;
  }

  [hover-opacity="25"]:hover {
    opacity: 0.25;
  }

  [hover-opacity="30"]:hover {
    opacity: 0.3;
  }

  [hover-opacity="40"]:hover {
    opacity: 0.4;
  }

  [hover-opacity="50"]:hover {
    opacity: 0.5;
  }

  [hover-opacity="60"]:hover {
    opacity: 0.6;
  }

  [hover-opacity="70"]:hover {
    opacity: 0.7;
  }

  [hover-opacity="75"]:hover {
    opacity: 0.75;
  }

  [hover-opacity="80"]:hover {
    opacity: 0.8;
  }

  [hover-opacity="90"]:hover {
    opacity: 0.9;
  }

  [hover-opacity="95"]:hover {
    opacity: 0.95;
  }

  [hover-opacity="100"]:hover {
    opacity: 1;
  }

  [focus-opacity="0"]:focus {
    opacity: 0;
  }

  [focus-opacity="5"]:focus {
    opacity: 0.05;
  }

  [focus-opacity="10"]:focus {
    opacity: 0.1;
  }

  [focus-opacity="20"]:focus {
    opacity: 0.2;
  }

  [focus-opacity="25"]:focus {
    opacity: 0.25;
  }

  [focus-opacity="30"]:focus {
    opacity: 0.3;
  }

  [focus-opacity="40"]:focus {
    opacity: 0.4;
  }

  [focus-opacity="50"]:focus {
    opacity: 0.5;
  }

  [focus-opacity="60"]:focus {
    opacity: 0.6;
  }

  [focus-opacity="70"]:focus {
    opacity: 0.7;
  }

  [focus-opacity="75"]:focus {
    opacity: 0.75;
  }

  [focus-opacity="80"]:focus {
    opacity: 0.8;
  }

  [focus-opacity="90"]:focus {
    opacity: 0.9;
  }

  [focus-opacity="95"]:focus {
    opacity: 0.95;
  }

  [focus-opacity="100"]:focus {
    opacity: 1;
  }

  [group]:hover [group-hover-opacity="0"] {
    opacity: 0;
  }

  [group]:hover [group-hover-opacity="5"] {
    opacity: 0.05;
  }

  [group]:hover [group-hover-opacity="10"] {
    opacity: 0.1;
  }

  [group]:hover [group-hover-opacity="20"] {
    opacity: 0.2;
  }

  [group]:hover [group-hover-opacity="25"] {
    opacity: 0.25;
  }

  [group]:hover [group-hover-opacity="30"] {
    opacity: 0.3;
  }

  [group]:hover [group-hover-opacity="40"] {
    opacity: 0.4;
  }

  [group]:hover [group-hover-opacity="50"] {
    opacity: 0.5;
  }

  [group]:hover [group-hover-opacity="60"] {
    opacity: 0.6;
  }

  [group]:hover [group-hover-opacity="70"] {
    opacity: 0.7;
  }

  [group]:hover [group-hover-opacity="75"] {
    opacity: 0.75;
  }

  [group]:hover [group-hover-opacity="80"] {
    opacity: 0.8;
  }

  [group]:hover [group-hover-opacity="90"] {
    opacity: 0.9;
  }

  [group]:hover [group-hover-opacity="95"] {
    opacity: 0.95;
  }

  [group]:hover [group-hover-opacity="100"] {
    opacity: 1;
  }

  [group]:focus [group-focus-opacity="0"] {
    opacity: 0;
  }

  [group]:focus [group-focus-opacity="5"] {
    opacity: 0.05;
  }

  [group]:focus [group-focus-opacity="10"] {
    opacity: 0.1;
  }

  [group]:focus [group-focus-opacity="20"] {
    opacity: 0.2;
  }

  [group]:focus [group-focus-opacity="25"] {
    opacity: 0.25;
  }

  [group]:focus [group-focus-opacity="30"] {
    opacity: 0.3;
  }

  [group]:focus [group-focus-opacity="40"] {
    opacity: 0.4;
  }

  [group]:focus [group-focus-opacity="50"] {
    opacity: 0.5;
  }

  [group]:focus [group-focus-opacity="60"] {
    opacity: 0.6;
  }

  [group]:focus [group-focus-opacity="70"] {
    opacity: 0.7;
  }

  [group]:focus [group-focus-opacity="75"] {
    opacity: 0.75;
  }

  [group]:focus [group-focus-opacity="80"] {
    opacity: 0.8;
  }

  [group]:focus [group-focus-opacity="90"] {
    opacity: 0.9;
  }

  [group]:focus [group-focus-opacity="95"] {
    opacity: 0.95;
  }

  [group]:focus [group-focus-opacity="100"] {
    opacity: 1;
  }

  [hover-shadow="none"]:hover {
    box-shadow: none;
  }

  [hover-shadow="sm"]:hover {
    box-shadow: var(--sx-shadow-sm);
  }

  [hover-shadow="md"]:hover {
    box-shadow: var(--sx-shadow-md);
  }

  [hover-shadow="lg"]:hover {
    box-shadow: var(--sx-shadow-lg);
  }

  [focus-shadow="none"]:focus {
    box-shadow: none;
  }

  [focus-shadow="sm"]:focus {
    box-shadow: var(--sx-shadow-sm);
  }

  [focus-shadow="md"]:focus {
    box-shadow: var(--sx-shadow-md);
  }

  [focus-shadow="lg"]:focus {
    box-shadow: var(--sx-shadow-lg);
  }

  [hover-translate-x="0"]:hover {
    --sx-translate-x: 0;
    transform: translateX(var(--sx-translate-x)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [hover-translate-x="1/2"]:hover {
    --sx-translate-x: 50%;
    transform: translateX(var(--sx-translate-x)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [hover-translate-x="-1/2"]:hover {
    --sx-translate-x: -50%;
    transform: translateX(var(--sx-translate-x)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [hover-translate-x="full"]:hover {
    --sx-translate-x: 100%;
    transform: translateX(var(--sx-translate-x)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [hover-translate-x="-full"]:hover {
    --sx-translate-x: -100%;
    transform: translateX(var(--sx-translate-x)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [group]:hover [group-hover-translate-x="0"] {
    --sx-translate-x: 0;
    transform: translateX(var(--sx-translate-x)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [group]:hover [group-hover-translate-x="1/2"] {
    --sx-translate-x: 50%;
    transform: translateX(var(--sx-translate-x)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [group]:hover [group-hover-translate-x="-1/2"] {
    --sx-translate-x: -50%;
    transform: translateX(var(--sx-translate-x)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [group]:hover [group-hover-translate-x="full"] {
    --sx-translate-x: 100%;
    transform: translateX(var(--sx-translate-x)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [group]:hover [group-hover-translate-x="-full"] {
    --sx-translate-x: -100%;
    transform: translateX(var(--sx-translate-x)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [hover-translate-y="0"]:hover {
    --sx-translate-y: 0;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [hover-translate-y="1/2"]:hover {
    --sx-translate-y: 50%;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [hover-translate-y="-1/2"]:hover {
    --sx-translate-y: -50%;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [hover-translate-y="full"]:hover {
    --sx-translate-y: 100%;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [hover-translate-y="-full"]:hover {
    --sx-translate-y: -100%;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [group]:hover [group-hover-translate-y="0"] {
    --sx-translate-y: 0;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [group]:hover [group-hover-translate-y="1/2"] {
    --sx-translate-y: 50%;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [group]:hover [group-hover-translate-y="-1/2"] {
    --sx-translate-y: -50%;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [group]:hover [group-hover-translate-y="full"] {
    --sx-translate-y: 100%;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [group]:hover [group-hover-translate-y="-full"] {
    --sx-translate-y: -100%;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale, 1));
  }

  [hover-scale="0"]:hover {
    --sx-scale: 0;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [hover-scale="50"]:hover {
    --sx-scale: .5;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [hover-scale="75"]:hover {
    --sx-scale: .75;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [hover-scale="90"]:hover {
    --sx-scale: .9;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [hover-scale="95"]:hover {
    --sx-scale: .95;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [hover-scale="100"]:hover {
    --sx-scale: 1;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [hover-scale="105"]:hover {
    --sx-scale: 1.05;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [hover-scale="110"]:hover {
    --sx-scale: 1.1;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [hover-scale="125"]:hover {
    --sx-scale: 1.25;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [hover-scale="150"]:hover {
    --sx-scale: 1.5;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [active-scale="0"]:active {
    --sx-scale: 0;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [active-scale="50"]:active {
    --sx-scale: .5;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [active-scale="75"]:active {
    --sx-scale: .75;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [active-scale="90"]:active {
    --sx-scale: .9;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [active-scale="95"]:active {
    --sx-scale: .95;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [active-scale="100"]:active {
    --sx-scale: 1;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [active-scale="105"]:active {
    --sx-scale: 1.05;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [active-scale="110"]:active {
    --sx-scale: 1.1;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [active-scale="125"]:active {
    --sx-scale: 1.25;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [active-scale="150"]:active {
    --sx-scale: 1.5;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [group]:hover [group-hover-scale="0"] {
    --sx-scale: 0;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [group]:hover [group-hover-scale="50"] {
    --sx-scale: .5;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [group]:hover [group-hover-scale="75"] {
    --sx-scale: .75;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [group]:hover [group-hover-scale="90"] {
    --sx-scale: .9;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [group]:hover [group-hover-scale="95"] {
    --sx-scale: .95;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [group]:hover [group-hover-scale="100"] {
    --sx-scale: 1;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [group]:hover [group-hover-scale="105"] {
    --sx-scale: 1.05;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [group]:hover [group-hover-scale="110"] {
    --sx-scale: 1.1;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [group]:hover [group-hover-scale="125"] {
    --sx-scale: 1.25;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [group]:hover [group-hover-scale="150"] {
    --sx-scale: 1.5;
    transform: translateX(var(--sx-translate-x, 0)) translateY(var(--sx-translate-y, 0)) rotate(var(--sx-rotate, 0deg)) scale(var(--sx-scale));
  }

  [group]:hover [group-hover-visibility="visible"] {
    visibility: visible;
  }

  [group]:hover [group-hover-visibility="invisible"] {
    visibility: hidden;
  }

  [group]:hover [group-hover-visibility="collapse"] {
    visibility: collapse;
  }

  [group]:focus [group-focus-visibility="visible"] {
    visibility: visible;
  }

  [group]:focus [group-focus-visibility="invisible"] {
    visibility: hidden;
  }

  [group]:focus [group-focus-visibility="collapse"] {
    visibility: collapse;
  }

  @media (min-width: 640px) {
    [sm-display="block"] {
      display: block;
    }

    [sm-display="inline-block"] {
      display: inline-block;
    }

    [sm-display="inline"] {
      display: inline;
    }

    [sm-display="flex"] {
      display: flex;
    }

    [sm-display="inline-flex"] {
      display: inline-flex;
    }

    [sm-display="grid"] {
      display: grid;
    }

    [sm-display="inline-grid"] {
      display: inline-grid;
    }

    [sm-display="hidden"] {
      display: none;
    }

    [sm-display="contents"] {
      display: contents;
    }

    [sm-position="static"] {
      position: static;
    }

    [sm-position="relative"] {
      position: relative;
    }

    [sm-position="absolute"] {
      position: absolute;
    }

    [sm-position="fixed"] {
      position: fixed;
    }

    [sm-position="sticky"] {
      position: sticky;
    }

    [sm-overflow="auto"] {
      overflow: auto;
    }

    [sm-overflow="hidden"] {
      overflow: hidden;
    }

    [sm-overflow="visible"] {
      overflow: visible;
    }

    [sm-overflow="scroll"] {
      overflow: scroll;
    }

    [sm-overflow="clip"] {
      overflow: clip;
    }

    [sm-overflow-x="auto"] {
      overflow-x: auto;
    }

    [sm-overflow-x="hidden"] {
      overflow-x: hidden;
    }

    [sm-overflow-x="visible"] {
      overflow-x: visible;
    }

    [sm-overflow-x="scroll"] {
      overflow-x: scroll;
    }

    [sm-overflow-x="clip"] {
      overflow-x: clip;
    }

    [sm-overflow-y="auto"] {
      overflow-y: auto;
    }

    [sm-overflow-y="hidden"] {
      overflow-y: hidden;
    }

    [sm-overflow-y="visible"] {
      overflow-y: visible;
    }

    [sm-overflow-y="scroll"] {
      overflow-y: scroll;
    }

    [sm-overflow-y="clip"] {
      overflow-y: clip;
    }

    [sm-flex-direction="row"] {
      flex-direction: row;
    }

    [sm-flex-direction="row-reverse"] {
      flex-direction: row-reverse;
    }

    [sm-flex-direction="col"] {
      flex-direction: column;
    }

    [sm-flex-direction="col-reverse"] {
      flex-direction: column-reverse;
    }

    [sm-flex-wrap="wrap"] {
      flex-wrap: wrap;
    }

    [sm-flex-wrap="nowrap"] {
      flex-wrap: nowrap;
    }

    [sm-flex-wrap="wrap-reverse"] {
      flex-wrap: wrap-reverse;
    }

    [sm-flex="1"] {
      flex: 1 1 0%;
    }

    [sm-flex="auto"] {
      flex: 1 1 auto;
    }

    [sm-flex="initial"] {
      flex: 0 1 auto;
    }

    [sm-flex="none"] {
      flex: none;
    }

    [sm-flex-grow="0"] {
      flex-grow: 0;
    }

    [sm-flex-grow="1"] {
      flex-grow: 1;
    }

    [sm-flex-shrink="0"] {
      flex-shrink: 0;
    }

    [sm-flex-shrink="1"] {
      flex-shrink: 1;
    }

    [sm-justify-content="start"] {
      justify-content: flex-start;
    }

    [sm-justify-content="end"] {
      justify-content: flex-end;
    }

    [sm-justify-content="center"] {
      justify-content: center;
    }

    [sm-justify-content="between"] {
      justify-content: space-between;
    }

    [sm-justify-content="around"] {
      justify-content: space-around;
    }

    [sm-justify-content="evenly"] {
      justify-content: space-evenly;
    }

    [sm-align-items="start"] {
      align-items: flex-start;
    }

    [sm-align-items="end"] {
      align-items: flex-end;
    }

    [sm-align-items="center"] {
      align-items: center;
    }

    [sm-align-items="baseline"] {
      align-items: baseline;
    }

    [sm-align-items="stretch"] {
      align-items: stretch;
    }

    [sm-align-self="auto"] {
      align-self: auto;
    }

    [sm-align-self="start"] {
      align-self: flex-start;
    }

    [sm-align-self="end"] {
      align-self: flex-end;
    }

    [sm-align-self="center"] {
      align-self: center;
    }

    [sm-align-self="stretch"] {
      align-self: stretch;
    }

    [sm-grid-cols="1"] {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    [sm-grid-cols="2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [sm-grid-cols="3"] {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    [sm-grid-cols="4"] {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    [sm-grid-cols="5"] {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    [sm-grid-cols="6"] {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    [sm-grid-cols="12"] {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    [sm-grid-cols="none"] {
      grid-template-columns: none;
    }

    [sm-grid-rows="1"] {
      grid-template-rows: repeat(1, minmax(0, 1fr));
    }

    [sm-grid-rows="2"] {
      grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    [sm-grid-rows="3"] {
      grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    [sm-grid-rows="4"] {
      grid-template-rows: repeat(4, minmax(0, 1fr));
    }

    [sm-grid-rows="5"] {
      grid-template-rows: repeat(5, minmax(0, 1fr));
    }

    [sm-grid-rows="6"] {
      grid-template-rows: repeat(6, minmax(0, 1fr));
    }

    [sm-grid-rows="none"] {
      grid-template-rows: none;
    }

    [sm-col-span="1"] {
      grid-column: span 1 / span 1;
    }

    [sm-col-span="2"] {
      grid-column: span 2 / span 2;
    }

    [sm-col-span="3"] {
      grid-column: span 3 / span 3;
    }

    [sm-col-span="4"] {
      grid-column: span 4 / span 4;
    }

    [sm-col-span="5"] {
      grid-column: span 5 / span 5;
    }

    [sm-col-span="6"] {
      grid-column: span 6 / span 6;
    }

    [sm-col-span="full"] {
      grid-column: 1 / -1;
    }

    [sm-row-span="1"] {
      grid-row: span 1 / span 1;
    }

    [sm-row-span="2"] {
      grid-row: span 2 / span 2;
    }

    [sm-row-span="3"] {
      grid-row: span 3 / span 3;
    }

    [sm-row-span="4"] {
      grid-row: span 4 / span 4;
    }

    [sm-row-span="5"] {
      grid-row: span 5 / span 5;
    }

    [sm-row-span="6"] {
      grid-row: span 6 / span 6;
    }

    [sm-row-span="full"] {
      grid-row: 1 / -1;
    }

    [sm-place-items="start"] {
      place-items: start;
    }

    [sm-place-items="end"] {
      place-items: end;
    }

    [sm-place-items="center"] {
      place-items: center;
    }

    [sm-place-items="stretch"] {
      place-items: stretch;
    }

    [sm-place-content="start"] {
      place-content: start;
    }

    [sm-place-content="end"] {
      place-content: end;
    }

    [sm-place-content="center"] {
      place-content: center;
    }

    [sm-place-content="between"] {
      place-content: space-between;
    }

    [sm-place-content="stretch"] {
      place-content: stretch;
    }

    [sm-z-index="0"] {
      z-index: 0;
    }

    [sm-z-index="10"] {
      z-index: 10;
    }

    [sm-z-index="20"] {
      z-index: 20;
    }

    [sm-z-index="30"] {
      z-index: 30;
    }

    [sm-z-index="40"] {
      z-index: 40;
    }

    [sm-z-index="50"] {
      z-index: 50;
    }

    [sm-z-index="auto"] {
      z-index: auto;
    }

    [sm-inset="0"] {
      inset: 0;
    }

    [sm-inset="auto"] {
      inset: auto;
    }

    [sm-inset="1/2"] {
      inset: 50%;
    }

    [sm-top="0"] {
      top: 0;
    }

    [sm-top="auto"] {
      top: auto;
    }

    [sm-top="1/2"] {
      top: 50%;
    }

    [sm-top="full"] {
      top: 100%;
    }

    [sm-right="0"] {
      right: 0;
    }

    [sm-right="auto"] {
      right: auto;
    }

    [sm-right="1/2"] {
      right: 50%;
    }

    [sm-right="full"] {
      right: 100%;
    }

    [sm-bottom="0"] {
      bottom: 0;
    }

    [sm-bottom="auto"] {
      bottom: auto;
    }

    [sm-bottom="1/2"] {
      bottom: 50%;
    }

    [sm-bottom="full"] {
      bottom: 100%;
    }

    [sm-left="0"] {
      left: 0;
    }

    [sm-left="auto"] {
      left: auto;
    }

    [sm-left="1/2"] {
      left: 50%;
    }

    [sm-left="full"] {
      left: 100%;
    }

    [sm-margin="0"] {
      margin: 0;
    }

    [sm-margin="2xs"] {
      margin: var(--sx-space-2xs);
    }

    [sm-margin="xs"] {
      margin: var(--sx-space-xs);
    }

    [sm-margin="sm"] {
      margin: var(--sx-space-sm);
    }

    [sm-margin="md"] {
      margin: var(--sx-space-md);
    }

    [sm-margin="lg"] {
      margin: var(--sx-space-lg);
    }

    [sm-margin="xl"] {
      margin: var(--sx-space-xl);
    }

    [sm-margin="2xl"] {
      margin: var(--sx-space-2xl);
    }

    [sm-margin="3xl"] {
      margin: var(--sx-space-3xl);
    }

    [sm-margin="auto"] {
      margin: auto;
    }

    [sm-margin-x="0"] {
      margin-inline: 0;
    }

    [sm-margin-x="2xs"] {
      margin-inline: var(--sx-space-2xs);
    }

    [sm-margin-x="xs"] {
      margin-inline: var(--sx-space-xs);
    }

    [sm-margin-x="sm"] {
      margin-inline: var(--sx-space-sm);
    }

    [sm-margin-x="md"] {
      margin-inline: var(--sx-space-md);
    }

    [sm-margin-x="lg"] {
      margin-inline: var(--sx-space-lg);
    }

    [sm-margin-x="xl"] {
      margin-inline: var(--sx-space-xl);
    }

    [sm-margin-x="2xl"] {
      margin-inline: var(--sx-space-2xl);
    }

    [sm-margin-x="3xl"] {
      margin-inline: var(--sx-space-3xl);
    }

    [sm-margin-x="auto"] {
      margin-inline: auto;
    }

    [sm-margin-y="0"] {
      margin-block: 0;
    }

    [sm-margin-y="2xs"] {
      margin-block: var(--sx-space-2xs);
    }

    [sm-margin-y="xs"] {
      margin-block: var(--sx-space-xs);
    }

    [sm-margin-y="sm"] {
      margin-block: var(--sx-space-sm);
    }

    [sm-margin-y="md"] {
      margin-block: var(--sx-space-md);
    }

    [sm-margin-y="lg"] {
      margin-block: var(--sx-space-lg);
    }

    [sm-margin-y="xl"] {
      margin-block: var(--sx-space-xl);
    }

    [sm-margin-y="2xl"] {
      margin-block: var(--sx-space-2xl);
    }

    [sm-margin-y="3xl"] {
      margin-block: var(--sx-space-3xl);
    }

    [sm-margin-y="auto"] {
      margin-block: auto;
    }

    [sm-margin-top="0"] {
      margin-top: 0;
    }

    [sm-margin-top="2xs"] {
      margin-top: var(--sx-space-2xs);
    }

    [sm-margin-top="xs"] {
      margin-top: var(--sx-space-xs);
    }

    [sm-margin-top="sm"] {
      margin-top: var(--sx-space-sm);
    }

    [sm-margin-top="md"] {
      margin-top: var(--sx-space-md);
    }

    [sm-margin-top="lg"] {
      margin-top: var(--sx-space-lg);
    }

    [sm-margin-top="xl"] {
      margin-top: var(--sx-space-xl);
    }

    [sm-margin-top="2xl"] {
      margin-top: var(--sx-space-2xl);
    }

    [sm-margin-top="3xl"] {
      margin-top: var(--sx-space-3xl);
    }

    [sm-margin-top="auto"] {
      margin-top: auto;
    }

    [sm-margin-right="0"] {
      margin-right: 0;
    }

    [sm-margin-right="2xs"] {
      margin-right: var(--sx-space-2xs);
    }

    [sm-margin-right="xs"] {
      margin-right: var(--sx-space-xs);
    }

    [sm-margin-right="sm"] {
      margin-right: var(--sx-space-sm);
    }

    [sm-margin-right="md"] {
      margin-right: var(--sx-space-md);
    }

    [sm-margin-right="lg"] {
      margin-right: var(--sx-space-lg);
    }

    [sm-margin-right="xl"] {
      margin-right: var(--sx-space-xl);
    }

    [sm-margin-right="2xl"] {
      margin-right: var(--sx-space-2xl);
    }

    [sm-margin-right="3xl"] {
      margin-right: var(--sx-space-3xl);
    }

    [sm-margin-right="auto"] {
      margin-right: auto;
    }

    [sm-margin-bottom="0"] {
      margin-bottom: 0;
    }

    [sm-margin-bottom="2xs"] {
      margin-bottom: var(--sx-space-2xs);
    }

    [sm-margin-bottom="xs"] {
      margin-bottom: var(--sx-space-xs);
    }

    [sm-margin-bottom="sm"] {
      margin-bottom: var(--sx-space-sm);
    }

    [sm-margin-bottom="md"] {
      margin-bottom: var(--sx-space-md);
    }

    [sm-margin-bottom="lg"] {
      margin-bottom: var(--sx-space-lg);
    }

    [sm-margin-bottom="xl"] {
      margin-bottom: var(--sx-space-xl);
    }

    [sm-margin-bottom="2xl"] {
      margin-bottom: var(--sx-space-2xl);
    }

    [sm-margin-bottom="3xl"] {
      margin-bottom: var(--sx-space-3xl);
    }

    [sm-margin-bottom="auto"] {
      margin-bottom: auto;
    }

    [sm-margin-left="0"] {
      margin-left: 0;
    }

    [sm-margin-left="2xs"] {
      margin-left: var(--sx-space-2xs);
    }

    [sm-margin-left="xs"] {
      margin-left: var(--sx-space-xs);
    }

    [sm-margin-left="sm"] {
      margin-left: var(--sx-space-sm);
    }

    [sm-margin-left="md"] {
      margin-left: var(--sx-space-md);
    }

    [sm-margin-left="lg"] {
      margin-left: var(--sx-space-lg);
    }

    [sm-margin-left="xl"] {
      margin-left: var(--sx-space-xl);
    }

    [sm-margin-left="2xl"] {
      margin-left: var(--sx-space-2xl);
    }

    [sm-margin-left="3xl"] {
      margin-left: var(--sx-space-3xl);
    }

    [sm-margin-left="auto"] {
      margin-left: auto;
    }

    [sm-pad="0"] {
      padding: 0;
    }

    [sm-pad="2xs"] {
      padding: var(--sx-space-2xs);
    }

    [sm-pad="xs"] {
      padding: var(--sx-space-xs);
    }

    [sm-pad="sm"] {
      padding: var(--sx-space-sm);
    }

    [sm-pad="md"] {
      padding: var(--sx-space-md);
    }

    [sm-pad="lg"] {
      padding: var(--sx-space-lg);
    }

    [sm-pad="xl"] {
      padding: var(--sx-space-xl);
    }

    [sm-pad="2xl"] {
      padding: var(--sx-space-2xl);
    }

    [sm-pad="3xl"] {
      padding: var(--sx-space-3xl);
    }

    [sm-pad="auto"] {
      padding: auto;
    }

    [sm-pad-x="0"] {
      padding-inline: 0;
    }

    [sm-pad-x="2xs"] {
      padding-inline: var(--sx-space-2xs);
    }

    [sm-pad-x="xs"] {
      padding-inline: var(--sx-space-xs);
    }

    [sm-pad-x="sm"] {
      padding-inline: var(--sx-space-sm);
    }

    [sm-pad-x="md"] {
      padding-inline: var(--sx-space-md);
    }

    [sm-pad-x="lg"] {
      padding-inline: var(--sx-space-lg);
    }

    [sm-pad-x="xl"] {
      padding-inline: var(--sx-space-xl);
    }

    [sm-pad-x="2xl"] {
      padding-inline: var(--sx-space-2xl);
    }

    [sm-pad-x="3xl"] {
      padding-inline: var(--sx-space-3xl);
    }

    [sm-pad-x="auto"] {
      padding-inline: auto;
    }

    [sm-pad-y="0"] {
      padding-block: 0;
    }

    [sm-pad-y="2xs"] {
      padding-block: var(--sx-space-2xs);
    }

    [sm-pad-y="xs"] {
      padding-block: var(--sx-space-xs);
    }

    [sm-pad-y="sm"] {
      padding-block: var(--sx-space-sm);
    }

    [sm-pad-y="md"] {
      padding-block: var(--sx-space-md);
    }

    [sm-pad-y="lg"] {
      padding-block: var(--sx-space-lg);
    }

    [sm-pad-y="xl"] {
      padding-block: var(--sx-space-xl);
    }

    [sm-pad-y="2xl"] {
      padding-block: var(--sx-space-2xl);
    }

    [sm-pad-y="3xl"] {
      padding-block: var(--sx-space-3xl);
    }

    [sm-pad-y="auto"] {
      padding-block: auto;
    }

    [sm-pad-top="0"] {
      padding-top: 0;
    }

    [sm-pad-top="2xs"] {
      padding-top: var(--sx-space-2xs);
    }

    [sm-pad-top="xs"] {
      padding-top: var(--sx-space-xs);
    }

    [sm-pad-top="sm"] {
      padding-top: var(--sx-space-sm);
    }

    [sm-pad-top="md"] {
      padding-top: var(--sx-space-md);
    }

    [sm-pad-top="lg"] {
      padding-top: var(--sx-space-lg);
    }

    [sm-pad-top="xl"] {
      padding-top: var(--sx-space-xl);
    }

    [sm-pad-top="2xl"] {
      padding-top: var(--sx-space-2xl);
    }

    [sm-pad-top="3xl"] {
      padding-top: var(--sx-space-3xl);
    }

    [sm-pad-top="auto"] {
      padding-top: auto;
    }

    [sm-pad-right="0"] {
      padding-right: 0;
    }

    [sm-pad-right="2xs"] {
      padding-right: var(--sx-space-2xs);
    }

    [sm-pad-right="xs"] {
      padding-right: var(--sx-space-xs);
    }

    [sm-pad-right="sm"] {
      padding-right: var(--sx-space-sm);
    }

    [sm-pad-right="md"] {
      padding-right: var(--sx-space-md);
    }

    [sm-pad-right="lg"] {
      padding-right: var(--sx-space-lg);
    }

    [sm-pad-right="xl"] {
      padding-right: var(--sx-space-xl);
    }

    [sm-pad-right="2xl"] {
      padding-right: var(--sx-space-2xl);
    }

    [sm-pad-right="3xl"] {
      padding-right: var(--sx-space-3xl);
    }

    [sm-pad-right="auto"] {
      padding-right: auto;
    }

    [sm-pad-bottom="0"] {
      padding-bottom: 0;
    }

    [sm-pad-bottom="2xs"] {
      padding-bottom: var(--sx-space-2xs);
    }

    [sm-pad-bottom="xs"] {
      padding-bottom: var(--sx-space-xs);
    }

    [sm-pad-bottom="sm"] {
      padding-bottom: var(--sx-space-sm);
    }

    [sm-pad-bottom="md"] {
      padding-bottom: var(--sx-space-md);
    }

    [sm-pad-bottom="lg"] {
      padding-bottom: var(--sx-space-lg);
    }

    [sm-pad-bottom="xl"] {
      padding-bottom: var(--sx-space-xl);
    }

    [sm-pad-bottom="2xl"] {
      padding-bottom: var(--sx-space-2xl);
    }

    [sm-pad-bottom="3xl"] {
      padding-bottom: var(--sx-space-3xl);
    }

    [sm-pad-bottom="auto"] {
      padding-bottom: auto;
    }

    [sm-pad-left="0"] {
      padding-left: 0;
    }

    [sm-pad-left="2xs"] {
      padding-left: var(--sx-space-2xs);
    }

    [sm-pad-left="xs"] {
      padding-left: var(--sx-space-xs);
    }

    [sm-pad-left="sm"] {
      padding-left: var(--sx-space-sm);
    }

    [sm-pad-left="md"] {
      padding-left: var(--sx-space-md);
    }

    [sm-pad-left="lg"] {
      padding-left: var(--sx-space-lg);
    }

    [sm-pad-left="xl"] {
      padding-left: var(--sx-space-xl);
    }

    [sm-pad-left="2xl"] {
      padding-left: var(--sx-space-2xl);
    }

    [sm-pad-left="3xl"] {
      padding-left: var(--sx-space-3xl);
    }

    [sm-pad-left="auto"] {
      padding-left: auto;
    }

    [sm-gap="0"] {
      gap: 0;
    }

    [sm-gap="2xs"] {
      gap: var(--sx-space-2xs);
    }

    [sm-gap="xs"] {
      gap: var(--sx-space-xs);
    }

    [sm-gap="sm"] {
      gap: var(--sx-space-sm);
    }

    [sm-gap="md"] {
      gap: var(--sx-space-md);
    }

    [sm-gap="lg"] {
      gap: var(--sx-space-lg);
    }

    [sm-gap="xl"] {
      gap: var(--sx-space-xl);
    }

    [sm-gap="2xl"] {
      gap: var(--sx-space-2xl);
    }

    [sm-gap="3xl"] {
      gap: var(--sx-space-3xl);
    }

    [sm-gap="auto"] {
      gap: auto;
    }

    [sm-gap-x="0"] {
      column-gap: 0;
    }

    [sm-gap-x="2xs"] {
      column-gap: var(--sx-space-2xs);
    }

    [sm-gap-x="xs"] {
      column-gap: var(--sx-space-xs);
    }

    [sm-gap-x="sm"] {
      column-gap: var(--sx-space-sm);
    }

    [sm-gap-x="md"] {
      column-gap: var(--sx-space-md);
    }

    [sm-gap-x="lg"] {
      column-gap: var(--sx-space-lg);
    }

    [sm-gap-x="xl"] {
      column-gap: var(--sx-space-xl);
    }

    [sm-gap-x="2xl"] {
      column-gap: var(--sx-space-2xl);
    }

    [sm-gap-x="3xl"] {
      column-gap: var(--sx-space-3xl);
    }

    [sm-gap-x="auto"] {
      column-gap: auto;
    }

    [sm-gap-y="0"] {
      row-gap: 0;
    }

    [sm-gap-y="2xs"] {
      row-gap: var(--sx-space-2xs);
    }

    [sm-gap-y="xs"] {
      row-gap: var(--sx-space-xs);
    }

    [sm-gap-y="sm"] {
      row-gap: var(--sx-space-sm);
    }

    [sm-gap-y="md"] {
      row-gap: var(--sx-space-md);
    }

    [sm-gap-y="lg"] {
      row-gap: var(--sx-space-lg);
    }

    [sm-gap-y="xl"] {
      row-gap: var(--sx-space-xl);
    }

    [sm-gap-y="2xl"] {
      row-gap: var(--sx-space-2xl);
    }

    [sm-gap-y="3xl"] {
      row-gap: var(--sx-space-3xl);
    }

    [sm-gap-y="auto"] {
      row-gap: auto;
    }

    [sm-width="0"] {
      width: 0;
    }

    [sm-width="auto"] {
      width: auto;
    }

    [sm-width="full"] {
      width: 100%;
    }

    [sm-width="min"] {
      width: min-content;
    }

    [sm-width="max"] {
      width: max-content;
    }

    [sm-width="fit"] {
      width: fit-content;
    }

    [sm-width="1/2"] {
      width: 50%;
    }

    [sm-width="1/3"] {
      width: 33.333333%;
    }

    [sm-width="2/3"] {
      width: 66.666667%;
    }

    [sm-width="1/4"] {
      width: 25%;
    }

    [sm-width="3/4"] {
      width: 75%;
    }

    [sm-width="1/5"] {
      width: 20%;
    }

    [sm-width="2/5"] {
      width: 40%;
    }

    [sm-width="3/5"] {
      width: 60%;
    }

    [sm-width="4/5"] {
      width: 80%;
    }

    [sm-width="xs"] {
      width: var(--sx-space-xs);
    }

    [sm-width="sm"] {
      width: var(--sx-space-sm);
    }

    [sm-width="md"] {
      width: var(--sx-space-md);
    }

    [sm-width="lg"] {
      width: var(--sx-space-lg);
    }

    [sm-width="xl"] {
      width: var(--sx-space-xl);
    }

    [sm-width="2xl"] {
      width: var(--sx-space-2xl);
    }

    [sm-width="3xl"] {
      width: var(--sx-space-3xl);
    }

    [sm-width="screen"] {
      width: 100vw;
    }

    [sm-height="0"] {
      height: 0;
    }

    [sm-height="auto"] {
      height: auto;
    }

    [sm-height="full"] {
      height: 100%;
    }

    [sm-height="min"] {
      height: min-content;
    }

    [sm-height="max"] {
      height: max-content;
    }

    [sm-height="fit"] {
      height: fit-content;
    }

    [sm-height="1/2"] {
      height: 50%;
    }

    [sm-height="1/3"] {
      height: 33.333333%;
    }

    [sm-height="2/3"] {
      height: 66.666667%;
    }

    [sm-height="1/4"] {
      height: 25%;
    }

    [sm-height="3/4"] {
      height: 75%;
    }

    [sm-height="1/5"] {
      height: 20%;
    }

    [sm-height="2/5"] {
      height: 40%;
    }

    [sm-height="3/5"] {
      height: 60%;
    }

    [sm-height="4/5"] {
      height: 80%;
    }

    [sm-height="xs"] {
      height: var(--sx-space-xs);
    }

    [sm-height="sm"] {
      height: var(--sx-space-sm);
    }

    [sm-height="md"] {
      height: var(--sx-space-md);
    }

    [sm-height="lg"] {
      height: var(--sx-space-lg);
    }

    [sm-height="xl"] {
      height: var(--sx-space-xl);
    }

    [sm-height="2xl"] {
      height: var(--sx-space-2xl);
    }

    [sm-height="3xl"] {
      height: var(--sx-space-3xl);
    }

    [sm-height="screen"] {
      height: 100vh;
    }

    [sm-min-w="0"] {
      min-width: 0;
    }

    [sm-min-w="none"] {
      min-width: none;
    }

    [sm-min-w="full"] {
      min-width: 100%;
    }

    [sm-min-w="min"] {
      min-width: min-content;
    }

    [sm-min-w="max"] {
      min-width: max-content;
    }

    [sm-min-w="fit"] {
      min-width: fit-content;
    }

    [sm-min-w="xs"] {
      min-width: 20rem;
    }

    [sm-min-w="sm"] {
      min-width: 24rem;
    }

    [sm-min-w="md"] {
      min-width: 28rem;
    }

    [sm-min-w="lg"] {
      min-width: 32rem;
    }

    [sm-min-w="xl"] {
      min-width: 36rem;
    }

    [sm-min-w="2xl"] {
      min-width: 42rem;
    }

    [sm-min-w="3xl"] {
      min-width: 48rem;
    }

    [sm-min-w="4xl"] {
      min-width: 56rem;
    }

    [sm-min-w="5xl"] {
      min-width: 64rem;
    }

    [sm-min-w="6xl"] {
      min-width: 72rem;
    }

    [sm-min-w="7xl"] {
      min-width: 80rem;
    }

    [sm-min-w="prose"] {
      min-width: 65ch;
    }

    [sm-min-w="screen"] {
      min-width: 100vw;
    }

    [sm-max-w="0"] {
      max-width: 0;
    }

    [sm-max-w="none"] {
      max-width: none;
    }

    [sm-max-w="full"] {
      max-width: 100%;
    }

    [sm-max-w="min"] {
      max-width: min-content;
    }

    [sm-max-w="max"] {
      max-width: max-content;
    }

    [sm-max-w="fit"] {
      max-width: fit-content;
    }

    [sm-max-w="xs"] {
      max-width: 20rem;
    }

    [sm-max-w="sm"] {
      max-width: 24rem;
    }

    [sm-max-w="md"] {
      max-width: 28rem;
    }

    [sm-max-w="lg"] {
      max-width: 32rem;
    }

    [sm-max-w="xl"] {
      max-width: 36rem;
    }

    [sm-max-w="2xl"] {
      max-width: 42rem;
    }

    [sm-max-w="3xl"] {
      max-width: 48rem;
    }

    [sm-max-w="4xl"] {
      max-width: 56rem;
    }

    [sm-max-w="5xl"] {
      max-width: 64rem;
    }

    [sm-max-w="6xl"] {
      max-width: 72rem;
    }

    [sm-max-w="7xl"] {
      max-width: 80rem;
    }

    [sm-max-w="prose"] {
      max-width: 65ch;
    }

    [sm-max-w="screen"] {
      max-width: 100vw;
    }

    [sm-min-h="0"] {
      min-height: 0;
    }

    [sm-min-h="none"] {
      min-height: none;
    }

    [sm-min-h="full"] {
      min-height: 100%;
    }

    [sm-min-h="min"] {
      min-height: min-content;
    }

    [sm-min-h="max"] {
      min-height: max-content;
    }

    [sm-min-h="fit"] {
      min-height: fit-content;
    }

    [sm-min-h="xs"] {
      min-height: 20rem;
    }

    [sm-min-h="sm"] {
      min-height: 24rem;
    }

    [sm-min-h="md"] {
      min-height: 28rem;
    }

    [sm-min-h="lg"] {
      min-height: 32rem;
    }

    [sm-min-h="xl"] {
      min-height: 36rem;
    }

    [sm-min-h="2xl"] {
      min-height: 42rem;
    }

    [sm-min-h="3xl"] {
      min-height: 48rem;
    }

    [sm-min-h="4xl"] {
      min-height: 56rem;
    }

    [sm-min-h="5xl"] {
      min-height: 64rem;
    }

    [sm-min-h="6xl"] {
      min-height: 72rem;
    }

    [sm-min-h="7xl"] {
      min-height: 80rem;
    }

    [sm-min-h="prose"] {
      min-height: 65ch;
    }

    [sm-min-h="screen"] {
      min-height: 100vh;
    }

    [sm-max-h="0"] {
      max-height: 0;
    }

    [sm-max-h="none"] {
      max-height: none;
    }

    [sm-max-h="full"] {
      max-height: 100%;
    }

    [sm-max-h="min"] {
      max-height: min-content;
    }

    [sm-max-h="max"] {
      max-height: max-content;
    }

    [sm-max-h="fit"] {
      max-height: fit-content;
    }

    [sm-max-h="xs"] {
      max-height: 20rem;
    }

    [sm-max-h="sm"] {
      max-height: 24rem;
    }

    [sm-max-h="md"] {
      max-height: 28rem;
    }

    [sm-max-h="lg"] {
      max-height: 32rem;
    }

    [sm-max-h="xl"] {
      max-height: 36rem;
    }

    [sm-max-h="2xl"] {
      max-height: 42rem;
    }

    [sm-max-h="3xl"] {
      max-height: 48rem;
    }

    [sm-max-h="4xl"] {
      max-height: 56rem;
    }

    [sm-max-h="5xl"] {
      max-height: 64rem;
    }

    [sm-max-h="6xl"] {
      max-height: 72rem;
    }

    [sm-max-h="7xl"] {
      max-height: 80rem;
    }

    [sm-max-h="prose"] {
      max-height: 65ch;
    }

    [sm-max-h="screen"] {
      max-height: 100vh;
    }

    [sm-border="0"] {
      border-width: 0;
      border-style: none;
    }

    [sm-border="1"] {
      border-width: 1px;
      border-style: solid;
    }

    [sm-border="2"] {
      border-width: 2px;
      border-style: solid;
    }

    [sm-border="4"] {
      border-width: 4px;
      border-style: solid;
    }

    [sm-border="8"] {
      border-width: 8px;
      border-style: solid;
    }

    [sm-border-t="0"] {
      border-top-width: 0;
      border-top-style: none;
    }

    [sm-border-t="1"] {
      border-top-width: 1px;
      border-top-style: solid;
    }

    [sm-border-t="2"] {
      border-top-width: 2px;
      border-top-style: solid;
    }

    [sm-border-t="4"] {
      border-top-width: 4px;
      border-top-style: solid;
    }

    [sm-border-t="8"] {
      border-top-width: 8px;
      border-top-style: solid;
    }

    [sm-border-r="0"] {
      border-right-width: 0;
      border-right-style: none;
    }

    [sm-border-r="1"] {
      border-right-width: 1px;
      border-right-style: solid;
    }

    [sm-border-r="2"] {
      border-right-width: 2px;
      border-right-style: solid;
    }

    [sm-border-r="4"] {
      border-right-width: 4px;
      border-right-style: solid;
    }

    [sm-border-r="8"] {
      border-right-width: 8px;
      border-right-style: solid;
    }

    [sm-border-b="0"] {
      border-bottom-width: 0;
      border-bottom-style: none;
    }

    [sm-border-b="1"] {
      border-bottom-width: 1px;
      border-bottom-style: solid;
    }

    [sm-border-b="2"] {
      border-bottom-width: 2px;
      border-bottom-style: solid;
    }

    [sm-border-b="4"] {
      border-bottom-width: 4px;
      border-bottom-style: solid;
    }

    [sm-border-b="8"] {
      border-bottom-width: 8px;
      border-bottom-style: solid;
    }

    [sm-border-l="0"] {
      border-left-width: 0;
      border-left-style: none;
    }

    [sm-border-l="1"] {
      border-left-width: 1px;
      border-left-style: solid;
    }

    [sm-border-l="2"] {
      border-left-width: 2px;
      border-left-style: solid;
    }

    [sm-border-l="4"] {
      border-left-width: 4px;
      border-left-style: solid;
    }

    [sm-border-l="8"] {
      border-left-width: 8px;
      border-left-style: solid;
    }

    [sm-border-style="solid"] {
      border-style: solid;
    }

    [sm-border-style="dashed"] {
      border-style: dashed;
    }

    [sm-border-style="dotted"] {
      border-style: dotted;
    }

    [sm-border-style="double"] {
      border-style: double;
    }

    [sm-border-style="none"] {
      border-style: none;
    }

    [sm-border-style="hidden"] {
      border-style: hidden;
    }

    [sm-outline="0"] {
      outline-width: 0;
    }

    [sm-outline="1"] {
      outline-width: 1px;
    }

    [sm-outline="2"] {
      outline-width: 2px;
    }

    [sm-outline="4"] {
      outline-width: 4px;
    }

    [sm-outline="none"] {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }

    [sm-ring="0"] {
      box-shadow: none;
    }

    [sm-ring="1"] {
      box-shadow: 0 0 0 1px var(--sx-surface-ring);
    }

    [sm-ring="2"] {
      box-shadow: 0 0 0 2px var(--sx-surface-ring);
    }

    [sm-ring="4"] {
      box-shadow: 0 0 0 4px var(--sx-surface-ring);
    }

    [sm-text-align="left"] {
      text-align: left;
    }

    [sm-text-align="center"] {
      text-align: center;
    }

    [sm-text-align="right"] {
      text-align: right;
    }

    [sm-text-align="justify"] {
      text-align: justify;
    }

    [sm-text-decoration="underline"] {
      text-decoration-line: underline;
    }

    [sm-text-decoration="overline"] {
      text-decoration-line: overline;
    }

    [sm-text-decoration="line-through"] {
      text-decoration-line: line-through;
    }

    [sm-text-decoration="none"] {
      text-decoration-line: none;
    }

    [sm-text-transform="uppercase"] {
      text-transform: uppercase;
    }

    [sm-text-transform="lowercase"] {
      text-transform: lowercase;
    }

    [sm-text-transform="capitalize"] {
      text-transform: capitalize;
    }

    [sm-text-transform="none"] {
      text-transform: none;
    }

    [sm-text-overflow="truncate"] {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    [sm-text-overflow="ellipsis"] {
      text-overflow: ellipsis;
    }

    [sm-text-overflow="clip"] {
      text-overflow: clip;
    }

    [sm-whitespace="normal"] {
      white-space: normal;
    }

    [sm-whitespace="nowrap"] {
      white-space: nowrap;
    }

    [sm-whitespace="pre"] {
      white-space: pre;
    }

    [sm-whitespace="pre-line"] {
      white-space: pre-line;
    }

    [sm-whitespace="pre-wrap"] {
      white-space: pre-wrap;
    }

    [sm-whitespace="break-spaces"] {
      white-space: break-spaces;
    }

    [sm-word-break="normal"] {
      overflow-wrap: normal;
      word-break: normal;
    }

    [sm-word-break="words"] {
      overflow-wrap: break-word;
    }

    [sm-word-break="all"] {
      word-break: break-all;
    }

    [sm-word-break="keep"] {
      word-break: keep-all;
    }

    [sm-tracking="tighter"] {
      letter-spacing: -0.05em;
    }

    [sm-tracking="tight"] {
      letter-spacing: -0.025em;
    }

    [sm-tracking="normal"] {
      letter-spacing: 0em;
    }

    [sm-tracking="wide"] {
      letter-spacing: 0.025em;
    }

    [sm-tracking="wider"] {
      letter-spacing: 0.05em;
    }

    [sm-tracking="widest"] {
      letter-spacing: 0.1em;
    }

    [sm-tracking="custom"] {
      letter-spacing: var(--sx-tracking);
    }

    [sm-leading="none"] {
      line-height: 1;
    }

    [sm-leading="tight"] {
      line-height: 1.25;
    }

    [sm-leading="snug"] {
      line-height: 1.375;
    }

    [sm-leading="normal"] {
      line-height: 1.5;
    }

    [sm-leading="relaxed"] {
      line-height: 1.625;
    }

    [sm-leading="loose"] {
      line-height: 2;
    }

    [sm-leading="custom"] {
      line-height: var(--sx-leading);
    }

    [sm-font-style="italic"] {
      font-style: italic;
    }

    [sm-font-style="normal"] {
      font-style: normal;
    }

    [sm-font-variant="tabular-nums"] {
      font-variant-numeric: tabular-nums;
    }

    [sm-font-variant="proportional-nums"] {
      font-variant-numeric: proportional-nums;
    }

    [sm-font-variant="oldstyle-nums"] {
      font-variant-numeric: oldstyle-nums;
    }

    [sm-font-variant="lining-nums"] {
      font-variant-numeric: lining-nums;
    }

    [sm-font-variant="small-caps"] {
      font-variant-caps: small-caps;
    }

    [sm-font-variant="normal"] {
      font-variant: normal;
    }

    [sm-list-style="none"] {
      list-style-type: none;
    }

    [sm-list-style="disc"] {
      list-style-type: disc;
    }

    [sm-list-style="decimal"] {
      list-style-type: decimal;
    }

    [sm-list-style="inside"] {
      list-style-position: inside;
    }

    [sm-list-style="outside"] {
      list-style-position: outside;
    }

    [sm-opacity="0"] {
      opacity: 0;
    }

    [sm-opacity="5"] {
      opacity: 0.05;
    }

    [sm-opacity="10"] {
      opacity: 0.1;
    }

    [sm-opacity="20"] {
      opacity: 0.2;
    }

    [sm-opacity="25"] {
      opacity: 0.25;
    }

    [sm-opacity="30"] {
      opacity: 0.3;
    }

    [sm-opacity="40"] {
      opacity: 0.4;
    }

    [sm-opacity="50"] {
      opacity: 0.5;
    }

    [sm-opacity="60"] {
      opacity: 0.6;
    }

    [sm-opacity="70"] {
      opacity: 0.7;
    }

    [sm-opacity="75"] {
      opacity: 0.75;
    }

    [sm-opacity="80"] {
      opacity: 0.8;
    }

    [sm-opacity="90"] {
      opacity: 0.9;
    }

    [sm-opacity="95"] {
      opacity: 0.95;
    }

    [sm-opacity="100"] {
      opacity: 1;
    }

    [sm-shadow="none"] {
      box-shadow: none;
    }

    [sm-shadow="sm"] {
      box-shadow: var(--sx-shadow-sm);
    }

    [sm-shadow="md"] {
      box-shadow: var(--sx-shadow-md);
    }

    [sm-shadow="lg"] {
      box-shadow: var(--sx-shadow-lg);
    }

    [sm-mix-blend="normal"] {
      mix-blend-mode: normal;
    }

    [sm-mix-blend="multiply"] {
      mix-blend-mode: multiply;
    }

    [sm-mix-blend="screen"] {
      mix-blend-mode: screen;
    }

    [sm-mix-blend="overlay"] {
      mix-blend-mode: overlay;
    }

    [sm-backdrop-blur="none"] {
      backdrop-filter: none;
    }

    [sm-backdrop-blur="sm"] {
      backdrop-filter: blur(4px);
    }

    [sm-backdrop-blur="md"] {
      backdrop-filter: blur(12px);
    }

    [sm-backdrop-blur="lg"] {
      backdrop-filter: blur(16px);
    }

    [sm-backdrop-blur="xl"] {
      backdrop-filter: blur(24px);
    }
  }

  @media (min-width: 768px) {
    [md-display="block"] {
      display: block;
    }

    [md-display="inline-block"] {
      display: inline-block;
    }

    [md-display="inline"] {
      display: inline;
    }

    [md-display="flex"] {
      display: flex;
    }

    [md-display="inline-flex"] {
      display: inline-flex;
    }

    [md-display="grid"] {
      display: grid;
    }

    [md-display="inline-grid"] {
      display: inline-grid;
    }

    [md-display="hidden"] {
      display: none;
    }

    [md-display="contents"] {
      display: contents;
    }

    [md-position="static"] {
      position: static;
    }

    [md-position="relative"] {
      position: relative;
    }

    [md-position="absolute"] {
      position: absolute;
    }

    [md-position="fixed"] {
      position: fixed;
    }

    [md-position="sticky"] {
      position: sticky;
    }

    [md-overflow="auto"] {
      overflow: auto;
    }

    [md-overflow="hidden"] {
      overflow: hidden;
    }

    [md-overflow="visible"] {
      overflow: visible;
    }

    [md-overflow="scroll"] {
      overflow: scroll;
    }

    [md-overflow="clip"] {
      overflow: clip;
    }

    [md-overflow-x="auto"] {
      overflow-x: auto;
    }

    [md-overflow-x="hidden"] {
      overflow-x: hidden;
    }

    [md-overflow-x="visible"] {
      overflow-x: visible;
    }

    [md-overflow-x="scroll"] {
      overflow-x: scroll;
    }

    [md-overflow-x="clip"] {
      overflow-x: clip;
    }

    [md-overflow-y="auto"] {
      overflow-y: auto;
    }

    [md-overflow-y="hidden"] {
      overflow-y: hidden;
    }

    [md-overflow-y="visible"] {
      overflow-y: visible;
    }

    [md-overflow-y="scroll"] {
      overflow-y: scroll;
    }

    [md-overflow-y="clip"] {
      overflow-y: clip;
    }

    [md-flex-direction="row"] {
      flex-direction: row;
    }

    [md-flex-direction="row-reverse"] {
      flex-direction: row-reverse;
    }

    [md-flex-direction="col"] {
      flex-direction: column;
    }

    [md-flex-direction="col-reverse"] {
      flex-direction: column-reverse;
    }

    [md-flex-wrap="wrap"] {
      flex-wrap: wrap;
    }

    [md-flex-wrap="nowrap"] {
      flex-wrap: nowrap;
    }

    [md-flex-wrap="wrap-reverse"] {
      flex-wrap: wrap-reverse;
    }

    [md-flex="1"] {
      flex: 1 1 0%;
    }

    [md-flex="auto"] {
      flex: 1 1 auto;
    }

    [md-flex="initial"] {
      flex: 0 1 auto;
    }

    [md-flex="none"] {
      flex: none;
    }

    [md-flex-grow="0"] {
      flex-grow: 0;
    }

    [md-flex-grow="1"] {
      flex-grow: 1;
    }

    [md-flex-shrink="0"] {
      flex-shrink: 0;
    }

    [md-flex-shrink="1"] {
      flex-shrink: 1;
    }

    [md-justify-content="start"] {
      justify-content: flex-start;
    }

    [md-justify-content="end"] {
      justify-content: flex-end;
    }

    [md-justify-content="center"] {
      justify-content: center;
    }

    [md-justify-content="between"] {
      justify-content: space-between;
    }

    [md-justify-content="around"] {
      justify-content: space-around;
    }

    [md-justify-content="evenly"] {
      justify-content: space-evenly;
    }

    [md-align-items="start"] {
      align-items: flex-start;
    }

    [md-align-items="end"] {
      align-items: flex-end;
    }

    [md-align-items="center"] {
      align-items: center;
    }

    [md-align-items="baseline"] {
      align-items: baseline;
    }

    [md-align-items="stretch"] {
      align-items: stretch;
    }

    [md-align-self="auto"] {
      align-self: auto;
    }

    [md-align-self="start"] {
      align-self: flex-start;
    }

    [md-align-self="end"] {
      align-self: flex-end;
    }

    [md-align-self="center"] {
      align-self: center;
    }

    [md-align-self="stretch"] {
      align-self: stretch;
    }

    [md-grid-cols="1"] {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    [md-grid-cols="2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [md-grid-cols="3"] {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    [md-grid-cols="4"] {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    [md-grid-cols="5"] {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    [md-grid-cols="6"] {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    [md-grid-cols="12"] {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    [md-grid-cols="none"] {
      grid-template-columns: none;
    }

    [md-grid-rows="1"] {
      grid-template-rows: repeat(1, minmax(0, 1fr));
    }

    [md-grid-rows="2"] {
      grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    [md-grid-rows="3"] {
      grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    [md-grid-rows="4"] {
      grid-template-rows: repeat(4, minmax(0, 1fr));
    }

    [md-grid-rows="5"] {
      grid-template-rows: repeat(5, minmax(0, 1fr));
    }

    [md-grid-rows="6"] {
      grid-template-rows: repeat(6, minmax(0, 1fr));
    }

    [md-grid-rows="none"] {
      grid-template-rows: none;
    }

    [md-col-span="1"] {
      grid-column: span 1 / span 1;
    }

    [md-col-span="2"] {
      grid-column: span 2 / span 2;
    }

    [md-col-span="3"] {
      grid-column: span 3 / span 3;
    }

    [md-col-span="4"] {
      grid-column: span 4 / span 4;
    }

    [md-col-span="5"] {
      grid-column: span 5 / span 5;
    }

    [md-col-span="6"] {
      grid-column: span 6 / span 6;
    }

    [md-col-span="full"] {
      grid-column: 1 / -1;
    }

    [md-row-span="1"] {
      grid-row: span 1 / span 1;
    }

    [md-row-span="2"] {
      grid-row: span 2 / span 2;
    }

    [md-row-span="3"] {
      grid-row: span 3 / span 3;
    }

    [md-row-span="4"] {
      grid-row: span 4 / span 4;
    }

    [md-row-span="5"] {
      grid-row: span 5 / span 5;
    }

    [md-row-span="6"] {
      grid-row: span 6 / span 6;
    }

    [md-row-span="full"] {
      grid-row: 1 / -1;
    }

    [md-place-items="start"] {
      place-items: start;
    }

    [md-place-items="end"] {
      place-items: end;
    }

    [md-place-items="center"] {
      place-items: center;
    }

    [md-place-items="stretch"] {
      place-items: stretch;
    }

    [md-place-content="start"] {
      place-content: start;
    }

    [md-place-content="end"] {
      place-content: end;
    }

    [md-place-content="center"] {
      place-content: center;
    }

    [md-place-content="between"] {
      place-content: space-between;
    }

    [md-place-content="stretch"] {
      place-content: stretch;
    }

    [md-z-index="0"] {
      z-index: 0;
    }

    [md-z-index="10"] {
      z-index: 10;
    }

    [md-z-index="20"] {
      z-index: 20;
    }

    [md-z-index="30"] {
      z-index: 30;
    }

    [md-z-index="40"] {
      z-index: 40;
    }

    [md-z-index="50"] {
      z-index: 50;
    }

    [md-z-index="auto"] {
      z-index: auto;
    }

    [md-inset="0"] {
      inset: 0;
    }

    [md-inset="auto"] {
      inset: auto;
    }

    [md-inset="1/2"] {
      inset: 50%;
    }

    [md-top="0"] {
      top: 0;
    }

    [md-top="auto"] {
      top: auto;
    }

    [md-top="1/2"] {
      top: 50%;
    }

    [md-top="full"] {
      top: 100%;
    }

    [md-right="0"] {
      right: 0;
    }

    [md-right="auto"] {
      right: auto;
    }

    [md-right="1/2"] {
      right: 50%;
    }

    [md-right="full"] {
      right: 100%;
    }

    [md-bottom="0"] {
      bottom: 0;
    }

    [md-bottom="auto"] {
      bottom: auto;
    }

    [md-bottom="1/2"] {
      bottom: 50%;
    }

    [md-bottom="full"] {
      bottom: 100%;
    }

    [md-left="0"] {
      left: 0;
    }

    [md-left="auto"] {
      left: auto;
    }

    [md-left="1/2"] {
      left: 50%;
    }

    [md-left="full"] {
      left: 100%;
    }

    [md-margin="0"] {
      margin: 0;
    }

    [md-margin="2xs"] {
      margin: var(--sx-space-2xs);
    }

    [md-margin="xs"] {
      margin: var(--sx-space-xs);
    }

    [md-margin="sm"] {
      margin: var(--sx-space-sm);
    }

    [md-margin="md"] {
      margin: var(--sx-space-md);
    }

    [md-margin="lg"] {
      margin: var(--sx-space-lg);
    }

    [md-margin="xl"] {
      margin: var(--sx-space-xl);
    }

    [md-margin="2xl"] {
      margin: var(--sx-space-2xl);
    }

    [md-margin="3xl"] {
      margin: var(--sx-space-3xl);
    }

    [md-margin="auto"] {
      margin: auto;
    }

    [md-margin-x="0"] {
      margin-inline: 0;
    }

    [md-margin-x="2xs"] {
      margin-inline: var(--sx-space-2xs);
    }

    [md-margin-x="xs"] {
      margin-inline: var(--sx-space-xs);
    }

    [md-margin-x="sm"] {
      margin-inline: var(--sx-space-sm);
    }

    [md-margin-x="md"] {
      margin-inline: var(--sx-space-md);
    }

    [md-margin-x="lg"] {
      margin-inline: var(--sx-space-lg);
    }

    [md-margin-x="xl"] {
      margin-inline: var(--sx-space-xl);
    }

    [md-margin-x="2xl"] {
      margin-inline: var(--sx-space-2xl);
    }

    [md-margin-x="3xl"] {
      margin-inline: var(--sx-space-3xl);
    }

    [md-margin-x="auto"] {
      margin-inline: auto;
    }

    [md-margin-y="0"] {
      margin-block: 0;
    }

    [md-margin-y="2xs"] {
      margin-block: var(--sx-space-2xs);
    }

    [md-margin-y="xs"] {
      margin-block: var(--sx-space-xs);
    }

    [md-margin-y="sm"] {
      margin-block: var(--sx-space-sm);
    }

    [md-margin-y="md"] {
      margin-block: var(--sx-space-md);
    }

    [md-margin-y="lg"] {
      margin-block: var(--sx-space-lg);
    }

    [md-margin-y="xl"] {
      margin-block: var(--sx-space-xl);
    }

    [md-margin-y="2xl"] {
      margin-block: var(--sx-space-2xl);
    }

    [md-margin-y="3xl"] {
      margin-block: var(--sx-space-3xl);
    }

    [md-margin-y="auto"] {
      margin-block: auto;
    }

    [md-margin-top="0"] {
      margin-top: 0;
    }

    [md-margin-top="2xs"] {
      margin-top: var(--sx-space-2xs);
    }

    [md-margin-top="xs"] {
      margin-top: var(--sx-space-xs);
    }

    [md-margin-top="sm"] {
      margin-top: var(--sx-space-sm);
    }

    [md-margin-top="md"] {
      margin-top: var(--sx-space-md);
    }

    [md-margin-top="lg"] {
      margin-top: var(--sx-space-lg);
    }

    [md-margin-top="xl"] {
      margin-top: var(--sx-space-xl);
    }

    [md-margin-top="2xl"] {
      margin-top: var(--sx-space-2xl);
    }

    [md-margin-top="3xl"] {
      margin-top: var(--sx-space-3xl);
    }

    [md-margin-top="auto"] {
      margin-top: auto;
    }

    [md-margin-right="0"] {
      margin-right: 0;
    }

    [md-margin-right="2xs"] {
      margin-right: var(--sx-space-2xs);
    }

    [md-margin-right="xs"] {
      margin-right: var(--sx-space-xs);
    }

    [md-margin-right="sm"] {
      margin-right: var(--sx-space-sm);
    }

    [md-margin-right="md"] {
      margin-right: var(--sx-space-md);
    }

    [md-margin-right="lg"] {
      margin-right: var(--sx-space-lg);
    }

    [md-margin-right="xl"] {
      margin-right: var(--sx-space-xl);
    }

    [md-margin-right="2xl"] {
      margin-right: var(--sx-space-2xl);
    }

    [md-margin-right="3xl"] {
      margin-right: var(--sx-space-3xl);
    }

    [md-margin-right="auto"] {
      margin-right: auto;
    }

    [md-margin-bottom="0"] {
      margin-bottom: 0;
    }

    [md-margin-bottom="2xs"] {
      margin-bottom: var(--sx-space-2xs);
    }

    [md-margin-bottom="xs"] {
      margin-bottom: var(--sx-space-xs);
    }

    [md-margin-bottom="sm"] {
      margin-bottom: var(--sx-space-sm);
    }

    [md-margin-bottom="md"] {
      margin-bottom: var(--sx-space-md);
    }

    [md-margin-bottom="lg"] {
      margin-bottom: var(--sx-space-lg);
    }

    [md-margin-bottom="xl"] {
      margin-bottom: var(--sx-space-xl);
    }

    [md-margin-bottom="2xl"] {
      margin-bottom: var(--sx-space-2xl);
    }

    [md-margin-bottom="3xl"] {
      margin-bottom: var(--sx-space-3xl);
    }

    [md-margin-bottom="auto"] {
      margin-bottom: auto;
    }

    [md-margin-left="0"] {
      margin-left: 0;
    }

    [md-margin-left="2xs"] {
      margin-left: var(--sx-space-2xs);
    }

    [md-margin-left="xs"] {
      margin-left: var(--sx-space-xs);
    }

    [md-margin-left="sm"] {
      margin-left: var(--sx-space-sm);
    }

    [md-margin-left="md"] {
      margin-left: var(--sx-space-md);
    }

    [md-margin-left="lg"] {
      margin-left: var(--sx-space-lg);
    }

    [md-margin-left="xl"] {
      margin-left: var(--sx-space-xl);
    }

    [md-margin-left="2xl"] {
      margin-left: var(--sx-space-2xl);
    }

    [md-margin-left="3xl"] {
      margin-left: var(--sx-space-3xl);
    }

    [md-margin-left="auto"] {
      margin-left: auto;
    }

    [md-pad="0"] {
      padding: 0;
    }

    [md-pad="2xs"] {
      padding: var(--sx-space-2xs);
    }

    [md-pad="xs"] {
      padding: var(--sx-space-xs);
    }

    [md-pad="sm"] {
      padding: var(--sx-space-sm);
    }

    [md-pad="md"] {
      padding: var(--sx-space-md);
    }

    [md-pad="lg"] {
      padding: var(--sx-space-lg);
    }

    [md-pad="xl"] {
      padding: var(--sx-space-xl);
    }

    [md-pad="2xl"] {
      padding: var(--sx-space-2xl);
    }

    [md-pad="3xl"] {
      padding: var(--sx-space-3xl);
    }

    [md-pad="auto"] {
      padding: auto;
    }

    [md-pad-x="0"] {
      padding-inline: 0;
    }

    [md-pad-x="2xs"] {
      padding-inline: var(--sx-space-2xs);
    }

    [md-pad-x="xs"] {
      padding-inline: var(--sx-space-xs);
    }

    [md-pad-x="sm"] {
      padding-inline: var(--sx-space-sm);
    }

    [md-pad-x="md"] {
      padding-inline: var(--sx-space-md);
    }

    [md-pad-x="lg"] {
      padding-inline: var(--sx-space-lg);
    }

    [md-pad-x="xl"] {
      padding-inline: var(--sx-space-xl);
    }

    [md-pad-x="2xl"] {
      padding-inline: var(--sx-space-2xl);
    }

    [md-pad-x="3xl"] {
      padding-inline: var(--sx-space-3xl);
    }

    [md-pad-x="auto"] {
      padding-inline: auto;
    }

    [md-pad-y="0"] {
      padding-block: 0;
    }

    [md-pad-y="2xs"] {
      padding-block: var(--sx-space-2xs);
    }

    [md-pad-y="xs"] {
      padding-block: var(--sx-space-xs);
    }

    [md-pad-y="sm"] {
      padding-block: var(--sx-space-sm);
    }

    [md-pad-y="md"] {
      padding-block: var(--sx-space-md);
    }

    [md-pad-y="lg"] {
      padding-block: var(--sx-space-lg);
    }

    [md-pad-y="xl"] {
      padding-block: var(--sx-space-xl);
    }

    [md-pad-y="2xl"] {
      padding-block: var(--sx-space-2xl);
    }

    [md-pad-y="3xl"] {
      padding-block: var(--sx-space-3xl);
    }

    [md-pad-y="auto"] {
      padding-block: auto;
    }

    [md-pad-top="0"] {
      padding-top: 0;
    }

    [md-pad-top="2xs"] {
      padding-top: var(--sx-space-2xs);
    }

    [md-pad-top="xs"] {
      padding-top: var(--sx-space-xs);
    }

    [md-pad-top="sm"] {
      padding-top: var(--sx-space-sm);
    }

    [md-pad-top="md"] {
      padding-top: var(--sx-space-md);
    }

    [md-pad-top="lg"] {
      padding-top: var(--sx-space-lg);
    }

    [md-pad-top="xl"] {
      padding-top: var(--sx-space-xl);
    }

    [md-pad-top="2xl"] {
      padding-top: var(--sx-space-2xl);
    }

    [md-pad-top="3xl"] {
      padding-top: var(--sx-space-3xl);
    }

    [md-pad-top="auto"] {
      padding-top: auto;
    }

    [md-pad-right="0"] {
      padding-right: 0;
    }

    [md-pad-right="2xs"] {
      padding-right: var(--sx-space-2xs);
    }

    [md-pad-right="xs"] {
      padding-right: var(--sx-space-xs);
    }

    [md-pad-right="sm"] {
      padding-right: var(--sx-space-sm);
    }

    [md-pad-right="md"] {
      padding-right: var(--sx-space-md);
    }

    [md-pad-right="lg"] {
      padding-right: var(--sx-space-lg);
    }

    [md-pad-right="xl"] {
      padding-right: var(--sx-space-xl);
    }

    [md-pad-right="2xl"] {
      padding-right: var(--sx-space-2xl);
    }

    [md-pad-right="3xl"] {
      padding-right: var(--sx-space-3xl);
    }

    [md-pad-right="auto"] {
      padding-right: auto;
    }

    [md-pad-bottom="0"] {
      padding-bottom: 0;
    }

    [md-pad-bottom="2xs"] {
      padding-bottom: var(--sx-space-2xs);
    }

    [md-pad-bottom="xs"] {
      padding-bottom: var(--sx-space-xs);
    }

    [md-pad-bottom="sm"] {
      padding-bottom: var(--sx-space-sm);
    }

    [md-pad-bottom="md"] {
      padding-bottom: var(--sx-space-md);
    }

    [md-pad-bottom="lg"] {
      padding-bottom: var(--sx-space-lg);
    }

    [md-pad-bottom="xl"] {
      padding-bottom: var(--sx-space-xl);
    }

    [md-pad-bottom="2xl"] {
      padding-bottom: var(--sx-space-2xl);
    }

    [md-pad-bottom="3xl"] {
      padding-bottom: var(--sx-space-3xl);
    }

    [md-pad-bottom="auto"] {
      padding-bottom: auto;
    }

    [md-pad-left="0"] {
      padding-left: 0;
    }

    [md-pad-left="2xs"] {
      padding-left: var(--sx-space-2xs);
    }

    [md-pad-left="xs"] {
      padding-left: var(--sx-space-xs);
    }

    [md-pad-left="sm"] {
      padding-left: var(--sx-space-sm);
    }

    [md-pad-left="md"] {
      padding-left: var(--sx-space-md);
    }

    [md-pad-left="lg"] {
      padding-left: var(--sx-space-lg);
    }

    [md-pad-left="xl"] {
      padding-left: var(--sx-space-xl);
    }

    [md-pad-left="2xl"] {
      padding-left: var(--sx-space-2xl);
    }

    [md-pad-left="3xl"] {
      padding-left: var(--sx-space-3xl);
    }

    [md-pad-left="auto"] {
      padding-left: auto;
    }

    [md-gap="0"] {
      gap: 0;
    }

    [md-gap="2xs"] {
      gap: var(--sx-space-2xs);
    }

    [md-gap="xs"] {
      gap: var(--sx-space-xs);
    }

    [md-gap="sm"] {
      gap: var(--sx-space-sm);
    }

    [md-gap="md"] {
      gap: var(--sx-space-md);
    }

    [md-gap="lg"] {
      gap: var(--sx-space-lg);
    }

    [md-gap="xl"] {
      gap: var(--sx-space-xl);
    }

    [md-gap="2xl"] {
      gap: var(--sx-space-2xl);
    }

    [md-gap="3xl"] {
      gap: var(--sx-space-3xl);
    }

    [md-gap="auto"] {
      gap: auto;
    }

    [md-gap-x="0"] {
      column-gap: 0;
    }

    [md-gap-x="2xs"] {
      column-gap: var(--sx-space-2xs);
    }

    [md-gap-x="xs"] {
      column-gap: var(--sx-space-xs);
    }

    [md-gap-x="sm"] {
      column-gap: var(--sx-space-sm);
    }

    [md-gap-x="md"] {
      column-gap: var(--sx-space-md);
    }

    [md-gap-x="lg"] {
      column-gap: var(--sx-space-lg);
    }

    [md-gap-x="xl"] {
      column-gap: var(--sx-space-xl);
    }

    [md-gap-x="2xl"] {
      column-gap: var(--sx-space-2xl);
    }

    [md-gap-x="3xl"] {
      column-gap: var(--sx-space-3xl);
    }

    [md-gap-x="auto"] {
      column-gap: auto;
    }

    [md-gap-y="0"] {
      row-gap: 0;
    }

    [md-gap-y="2xs"] {
      row-gap: var(--sx-space-2xs);
    }

    [md-gap-y="xs"] {
      row-gap: var(--sx-space-xs);
    }

    [md-gap-y="sm"] {
      row-gap: var(--sx-space-sm);
    }

    [md-gap-y="md"] {
      row-gap: var(--sx-space-md);
    }

    [md-gap-y="lg"] {
      row-gap: var(--sx-space-lg);
    }

    [md-gap-y="xl"] {
      row-gap: var(--sx-space-xl);
    }

    [md-gap-y="2xl"] {
      row-gap: var(--sx-space-2xl);
    }

    [md-gap-y="3xl"] {
      row-gap: var(--sx-space-3xl);
    }

    [md-gap-y="auto"] {
      row-gap: auto;
    }

    [md-width="0"] {
      width: 0;
    }

    [md-width="auto"] {
      width: auto;
    }

    [md-width="full"] {
      width: 100%;
    }

    [md-width="min"] {
      width: min-content;
    }

    [md-width="max"] {
      width: max-content;
    }

    [md-width="fit"] {
      width: fit-content;
    }

    [md-width="1/2"] {
      width: 50%;
    }

    [md-width="1/3"] {
      width: 33.333333%;
    }

    [md-width="2/3"] {
      width: 66.666667%;
    }

    [md-width="1/4"] {
      width: 25%;
    }

    [md-width="3/4"] {
      width: 75%;
    }

    [md-width="1/5"] {
      width: 20%;
    }

    [md-width="2/5"] {
      width: 40%;
    }

    [md-width="3/5"] {
      width: 60%;
    }

    [md-width="4/5"] {
      width: 80%;
    }

    [md-width="xs"] {
      width: var(--sx-space-xs);
    }

    [md-width="sm"] {
      width: var(--sx-space-sm);
    }

    [md-width="md"] {
      width: var(--sx-space-md);
    }

    [md-width="lg"] {
      width: var(--sx-space-lg);
    }

    [md-width="xl"] {
      width: var(--sx-space-xl);
    }

    [md-width="2xl"] {
      width: var(--sx-space-2xl);
    }

    [md-width="3xl"] {
      width: var(--sx-space-3xl);
    }

    [md-width="screen"] {
      width: 100vw;
    }

    [md-height="0"] {
      height: 0;
    }

    [md-height="auto"] {
      height: auto;
    }

    [md-height="full"] {
      height: 100%;
    }

    [md-height="min"] {
      height: min-content;
    }

    [md-height="max"] {
      height: max-content;
    }

    [md-height="fit"] {
      height: fit-content;
    }

    [md-height="1/2"] {
      height: 50%;
    }

    [md-height="1/3"] {
      height: 33.333333%;
    }

    [md-height="2/3"] {
      height: 66.666667%;
    }

    [md-height="1/4"] {
      height: 25%;
    }

    [md-height="3/4"] {
      height: 75%;
    }

    [md-height="1/5"] {
      height: 20%;
    }

    [md-height="2/5"] {
      height: 40%;
    }

    [md-height="3/5"] {
      height: 60%;
    }

    [md-height="4/5"] {
      height: 80%;
    }

    [md-height="xs"] {
      height: var(--sx-space-xs);
    }

    [md-height="sm"] {
      height: var(--sx-space-sm);
    }

    [md-height="md"] {
      height: var(--sx-space-md);
    }

    [md-height="lg"] {
      height: var(--sx-space-lg);
    }

    [md-height="xl"] {
      height: var(--sx-space-xl);
    }

    [md-height="2xl"] {
      height: var(--sx-space-2xl);
    }

    [md-height="3xl"] {
      height: var(--sx-space-3xl);
    }

    [md-height="screen"] {
      height: 100vh;
    }

    [md-min-w="0"] {
      min-width: 0;
    }

    [md-min-w="none"] {
      min-width: none;
    }

    [md-min-w="full"] {
      min-width: 100%;
    }

    [md-min-w="min"] {
      min-width: min-content;
    }

    [md-min-w="max"] {
      min-width: max-content;
    }

    [md-min-w="fit"] {
      min-width: fit-content;
    }

    [md-min-w="xs"] {
      min-width: 20rem;
    }

    [md-min-w="sm"] {
      min-width: 24rem;
    }

    [md-min-w="md"] {
      min-width: 28rem;
    }

    [md-min-w="lg"] {
      min-width: 32rem;
    }

    [md-min-w="xl"] {
      min-width: 36rem;
    }

    [md-min-w="2xl"] {
      min-width: 42rem;
    }

    [md-min-w="3xl"] {
      min-width: 48rem;
    }

    [md-min-w="4xl"] {
      min-width: 56rem;
    }

    [md-min-w="5xl"] {
      min-width: 64rem;
    }

    [md-min-w="6xl"] {
      min-width: 72rem;
    }

    [md-min-w="7xl"] {
      min-width: 80rem;
    }

    [md-min-w="prose"] {
      min-width: 65ch;
    }

    [md-min-w="screen"] {
      min-width: 100vw;
    }

    [md-max-w="0"] {
      max-width: 0;
    }

    [md-max-w="none"] {
      max-width: none;
    }

    [md-max-w="full"] {
      max-width: 100%;
    }

    [md-max-w="min"] {
      max-width: min-content;
    }

    [md-max-w="max"] {
      max-width: max-content;
    }

    [md-max-w="fit"] {
      max-width: fit-content;
    }

    [md-max-w="xs"] {
      max-width: 20rem;
    }

    [md-max-w="sm"] {
      max-width: 24rem;
    }

    [md-max-w="md"] {
      max-width: 28rem;
    }

    [md-max-w="lg"] {
      max-width: 32rem;
    }

    [md-max-w="xl"] {
      max-width: 36rem;
    }

    [md-max-w="2xl"] {
      max-width: 42rem;
    }

    [md-max-w="3xl"] {
      max-width: 48rem;
    }

    [md-max-w="4xl"] {
      max-width: 56rem;
    }

    [md-max-w="5xl"] {
      max-width: 64rem;
    }

    [md-max-w="6xl"] {
      max-width: 72rem;
    }

    [md-max-w="7xl"] {
      max-width: 80rem;
    }

    [md-max-w="prose"] {
      max-width: 65ch;
    }

    [md-max-w="screen"] {
      max-width: 100vw;
    }

    [md-min-h="0"] {
      min-height: 0;
    }

    [md-min-h="none"] {
      min-height: none;
    }

    [md-min-h="full"] {
      min-height: 100%;
    }

    [md-min-h="min"] {
      min-height: min-content;
    }

    [md-min-h="max"] {
      min-height: max-content;
    }

    [md-min-h="fit"] {
      min-height: fit-content;
    }

    [md-min-h="xs"] {
      min-height: 20rem;
    }

    [md-min-h="sm"] {
      min-height: 24rem;
    }

    [md-min-h="md"] {
      min-height: 28rem;
    }

    [md-min-h="lg"] {
      min-height: 32rem;
    }

    [md-min-h="xl"] {
      min-height: 36rem;
    }

    [md-min-h="2xl"] {
      min-height: 42rem;
    }

    [md-min-h="3xl"] {
      min-height: 48rem;
    }

    [md-min-h="4xl"] {
      min-height: 56rem;
    }

    [md-min-h="5xl"] {
      min-height: 64rem;
    }

    [md-min-h="6xl"] {
      min-height: 72rem;
    }

    [md-min-h="7xl"] {
      min-height: 80rem;
    }

    [md-min-h="prose"] {
      min-height: 65ch;
    }

    [md-min-h="screen"] {
      min-height: 100vh;
    }

    [md-max-h="0"] {
      max-height: 0;
    }

    [md-max-h="none"] {
      max-height: none;
    }

    [md-max-h="full"] {
      max-height: 100%;
    }

    [md-max-h="min"] {
      max-height: min-content;
    }

    [md-max-h="max"] {
      max-height: max-content;
    }

    [md-max-h="fit"] {
      max-height: fit-content;
    }

    [md-max-h="xs"] {
      max-height: 20rem;
    }

    [md-max-h="sm"] {
      max-height: 24rem;
    }

    [md-max-h="md"] {
      max-height: 28rem;
    }

    [md-max-h="lg"] {
      max-height: 32rem;
    }

    [md-max-h="xl"] {
      max-height: 36rem;
    }

    [md-max-h="2xl"] {
      max-height: 42rem;
    }

    [md-max-h="3xl"] {
      max-height: 48rem;
    }

    [md-max-h="4xl"] {
      max-height: 56rem;
    }

    [md-max-h="5xl"] {
      max-height: 64rem;
    }

    [md-max-h="6xl"] {
      max-height: 72rem;
    }

    [md-max-h="7xl"] {
      max-height: 80rem;
    }

    [md-max-h="prose"] {
      max-height: 65ch;
    }

    [md-max-h="screen"] {
      max-height: 100vh;
    }

    [md-border="0"] {
      border-width: 0;
      border-style: none;
    }

    [md-border="1"] {
      border-width: 1px;
      border-style: solid;
    }

    [md-border="2"] {
      border-width: 2px;
      border-style: solid;
    }

    [md-border="4"] {
      border-width: 4px;
      border-style: solid;
    }

    [md-border="8"] {
      border-width: 8px;
      border-style: solid;
    }

    [md-border-t="0"] {
      border-top-width: 0;
      border-top-style: none;
    }

    [md-border-t="1"] {
      border-top-width: 1px;
      border-top-style: solid;
    }

    [md-border-t="2"] {
      border-top-width: 2px;
      border-top-style: solid;
    }

    [md-border-t="4"] {
      border-top-width: 4px;
      border-top-style: solid;
    }

    [md-border-t="8"] {
      border-top-width: 8px;
      border-top-style: solid;
    }

    [md-border-r="0"] {
      border-right-width: 0;
      border-right-style: none;
    }

    [md-border-r="1"] {
      border-right-width: 1px;
      border-right-style: solid;
    }

    [md-border-r="2"] {
      border-right-width: 2px;
      border-right-style: solid;
    }

    [md-border-r="4"] {
      border-right-width: 4px;
      border-right-style: solid;
    }

    [md-border-r="8"] {
      border-right-width: 8px;
      border-right-style: solid;
    }

    [md-border-b="0"] {
      border-bottom-width: 0;
      border-bottom-style: none;
    }

    [md-border-b="1"] {
      border-bottom-width: 1px;
      border-bottom-style: solid;
    }

    [md-border-b="2"] {
      border-bottom-width: 2px;
      border-bottom-style: solid;
    }

    [md-border-b="4"] {
      border-bottom-width: 4px;
      border-bottom-style: solid;
    }

    [md-border-b="8"] {
      border-bottom-width: 8px;
      border-bottom-style: solid;
    }

    [md-border-l="0"] {
      border-left-width: 0;
      border-left-style: none;
    }

    [md-border-l="1"] {
      border-left-width: 1px;
      border-left-style: solid;
    }

    [md-border-l="2"] {
      border-left-width: 2px;
      border-left-style: solid;
    }

    [md-border-l="4"] {
      border-left-width: 4px;
      border-left-style: solid;
    }

    [md-border-l="8"] {
      border-left-width: 8px;
      border-left-style: solid;
    }

    [md-border-style="solid"] {
      border-style: solid;
    }

    [md-border-style="dashed"] {
      border-style: dashed;
    }

    [md-border-style="dotted"] {
      border-style: dotted;
    }

    [md-border-style="double"] {
      border-style: double;
    }

    [md-border-style="none"] {
      border-style: none;
    }

    [md-border-style="hidden"] {
      border-style: hidden;
    }

    [md-outline="0"] {
      outline-width: 0;
    }

    [md-outline="1"] {
      outline-width: 1px;
    }

    [md-outline="2"] {
      outline-width: 2px;
    }

    [md-outline="4"] {
      outline-width: 4px;
    }

    [md-outline="none"] {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }

    [md-ring="0"] {
      box-shadow: none;
    }

    [md-ring="1"] {
      box-shadow: 0 0 0 1px var(--sx-surface-ring);
    }

    [md-ring="2"] {
      box-shadow: 0 0 0 2px var(--sx-surface-ring);
    }

    [md-ring="4"] {
      box-shadow: 0 0 0 4px var(--sx-surface-ring);
    }

    [md-text-align="left"] {
      text-align: left;
    }

    [md-text-align="center"] {
      text-align: center;
    }

    [md-text-align="right"] {
      text-align: right;
    }

    [md-text-align="justify"] {
      text-align: justify;
    }

    [md-text-decoration="underline"] {
      text-decoration-line: underline;
    }

    [md-text-decoration="overline"] {
      text-decoration-line: overline;
    }

    [md-text-decoration="line-through"] {
      text-decoration-line: line-through;
    }

    [md-text-decoration="none"] {
      text-decoration-line: none;
    }

    [md-text-transform="uppercase"] {
      text-transform: uppercase;
    }

    [md-text-transform="lowercase"] {
      text-transform: lowercase;
    }

    [md-text-transform="capitalize"] {
      text-transform: capitalize;
    }

    [md-text-transform="none"] {
      text-transform: none;
    }

    [md-text-overflow="truncate"] {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    [md-text-overflow="ellipsis"] {
      text-overflow: ellipsis;
    }

    [md-text-overflow="clip"] {
      text-overflow: clip;
    }

    [md-whitespace="normal"] {
      white-space: normal;
    }

    [md-whitespace="nowrap"] {
      white-space: nowrap;
    }

    [md-whitespace="pre"] {
      white-space: pre;
    }

    [md-whitespace="pre-line"] {
      white-space: pre-line;
    }

    [md-whitespace="pre-wrap"] {
      white-space: pre-wrap;
    }

    [md-whitespace="break-spaces"] {
      white-space: break-spaces;
    }

    [md-word-break="normal"] {
      overflow-wrap: normal;
      word-break: normal;
    }

    [md-word-break="words"] {
      overflow-wrap: break-word;
    }

    [md-word-break="all"] {
      word-break: break-all;
    }

    [md-word-break="keep"] {
      word-break: keep-all;
    }

    [md-tracking="tighter"] {
      letter-spacing: -0.05em;
    }

    [md-tracking="tight"] {
      letter-spacing: -0.025em;
    }

    [md-tracking="normal"] {
      letter-spacing: 0em;
    }

    [md-tracking="wide"] {
      letter-spacing: 0.025em;
    }

    [md-tracking="wider"] {
      letter-spacing: 0.05em;
    }

    [md-tracking="widest"] {
      letter-spacing: 0.1em;
    }

    [md-tracking="custom"] {
      letter-spacing: var(--sx-tracking);
    }

    [md-leading="none"] {
      line-height: 1;
    }

    [md-leading="tight"] {
      line-height: 1.25;
    }

    [md-leading="snug"] {
      line-height: 1.375;
    }

    [md-leading="normal"] {
      line-height: 1.5;
    }

    [md-leading="relaxed"] {
      line-height: 1.625;
    }

    [md-leading="loose"] {
      line-height: 2;
    }

    [md-leading="custom"] {
      line-height: var(--sx-leading);
    }

    [md-font-style="italic"] {
      font-style: italic;
    }

    [md-font-style="normal"] {
      font-style: normal;
    }

    [md-font-variant="tabular-nums"] {
      font-variant-numeric: tabular-nums;
    }

    [md-font-variant="proportional-nums"] {
      font-variant-numeric: proportional-nums;
    }

    [md-font-variant="oldstyle-nums"] {
      font-variant-numeric: oldstyle-nums;
    }

    [md-font-variant="lining-nums"] {
      font-variant-numeric: lining-nums;
    }

    [md-font-variant="small-caps"] {
      font-variant-caps: small-caps;
    }

    [md-font-variant="normal"] {
      font-variant: normal;
    }

    [md-list-style="none"] {
      list-style-type: none;
    }

    [md-list-style="disc"] {
      list-style-type: disc;
    }

    [md-list-style="decimal"] {
      list-style-type: decimal;
    }

    [md-list-style="inside"] {
      list-style-position: inside;
    }

    [md-list-style="outside"] {
      list-style-position: outside;
    }

    [md-opacity="0"] {
      opacity: 0;
    }

    [md-opacity="5"] {
      opacity: 0.05;
    }

    [md-opacity="10"] {
      opacity: 0.1;
    }

    [md-opacity="20"] {
      opacity: 0.2;
    }

    [md-opacity="25"] {
      opacity: 0.25;
    }

    [md-opacity="30"] {
      opacity: 0.3;
    }

    [md-opacity="40"] {
      opacity: 0.4;
    }

    [md-opacity="50"] {
      opacity: 0.5;
    }

    [md-opacity="60"] {
      opacity: 0.6;
    }

    [md-opacity="70"] {
      opacity: 0.7;
    }

    [md-opacity="75"] {
      opacity: 0.75;
    }

    [md-opacity="80"] {
      opacity: 0.8;
    }

    [md-opacity="90"] {
      opacity: 0.9;
    }

    [md-opacity="95"] {
      opacity: 0.95;
    }

    [md-opacity="100"] {
      opacity: 1;
    }

    [md-shadow="none"] {
      box-shadow: none;
    }

    [md-shadow="sm"] {
      box-shadow: var(--sx-shadow-sm);
    }

    [md-shadow="md"] {
      box-shadow: var(--sx-shadow-md);
    }

    [md-shadow="lg"] {
      box-shadow: var(--sx-shadow-lg);
    }

    [md-mix-blend="normal"] {
      mix-blend-mode: normal;
    }

    [md-mix-blend="multiply"] {
      mix-blend-mode: multiply;
    }

    [md-mix-blend="screen"] {
      mix-blend-mode: screen;
    }

    [md-mix-blend="overlay"] {
      mix-blend-mode: overlay;
    }

    [md-backdrop-blur="none"] {
      backdrop-filter: none;
    }

    [md-backdrop-blur="sm"] {
      backdrop-filter: blur(4px);
    }

    [md-backdrop-blur="md"] {
      backdrop-filter: blur(12px);
    }

    [md-backdrop-blur="lg"] {
      backdrop-filter: blur(16px);
    }

    [md-backdrop-blur="xl"] {
      backdrop-filter: blur(24px);
    }
  }

  @media (min-width: 1024px) {
    [lg-display="block"] {
      display: block;
    }

    [lg-display="inline-block"] {
      display: inline-block;
    }

    [lg-display="inline"] {
      display: inline;
    }

    [lg-display="flex"] {
      display: flex;
    }

    [lg-display="inline-flex"] {
      display: inline-flex;
    }

    [lg-display="grid"] {
      display: grid;
    }

    [lg-display="inline-grid"] {
      display: inline-grid;
    }

    [lg-display="hidden"] {
      display: none;
    }

    [lg-display="contents"] {
      display: contents;
    }

    [lg-position="static"] {
      position: static;
    }

    [lg-position="relative"] {
      position: relative;
    }

    [lg-position="absolute"] {
      position: absolute;
    }

    [lg-position="fixed"] {
      position: fixed;
    }

    [lg-position="sticky"] {
      position: sticky;
    }

    [lg-overflow="auto"] {
      overflow: auto;
    }

    [lg-overflow="hidden"] {
      overflow: hidden;
    }

    [lg-overflow="visible"] {
      overflow: visible;
    }

    [lg-overflow="scroll"] {
      overflow: scroll;
    }

    [lg-overflow="clip"] {
      overflow: clip;
    }

    [lg-overflow-x="auto"] {
      overflow-x: auto;
    }

    [lg-overflow-x="hidden"] {
      overflow-x: hidden;
    }

    [lg-overflow-x="visible"] {
      overflow-x: visible;
    }

    [lg-overflow-x="scroll"] {
      overflow-x: scroll;
    }

    [lg-overflow-x="clip"] {
      overflow-x: clip;
    }

    [lg-overflow-y="auto"] {
      overflow-y: auto;
    }

    [lg-overflow-y="hidden"] {
      overflow-y: hidden;
    }

    [lg-overflow-y="visible"] {
      overflow-y: visible;
    }

    [lg-overflow-y="scroll"] {
      overflow-y: scroll;
    }

    [lg-overflow-y="clip"] {
      overflow-y: clip;
    }

    [lg-flex-direction="row"] {
      flex-direction: row;
    }

    [lg-flex-direction="row-reverse"] {
      flex-direction: row-reverse;
    }

    [lg-flex-direction="col"] {
      flex-direction: column;
    }

    [lg-flex-direction="col-reverse"] {
      flex-direction: column-reverse;
    }

    [lg-flex-wrap="wrap"] {
      flex-wrap: wrap;
    }

    [lg-flex-wrap="nowrap"] {
      flex-wrap: nowrap;
    }

    [lg-flex-wrap="wrap-reverse"] {
      flex-wrap: wrap-reverse;
    }

    [lg-flex="1"] {
      flex: 1 1 0%;
    }

    [lg-flex="auto"] {
      flex: 1 1 auto;
    }

    [lg-flex="initial"] {
      flex: 0 1 auto;
    }

    [lg-flex="none"] {
      flex: none;
    }

    [lg-flex-grow="0"] {
      flex-grow: 0;
    }

    [lg-flex-grow="1"] {
      flex-grow: 1;
    }

    [lg-flex-shrink="0"] {
      flex-shrink: 0;
    }

    [lg-flex-shrink="1"] {
      flex-shrink: 1;
    }

    [lg-justify-content="start"] {
      justify-content: flex-start;
    }

    [lg-justify-content="end"] {
      justify-content: flex-end;
    }

    [lg-justify-content="center"] {
      justify-content: center;
    }

    [lg-justify-content="between"] {
      justify-content: space-between;
    }

    [lg-justify-content="around"] {
      justify-content: space-around;
    }

    [lg-justify-content="evenly"] {
      justify-content: space-evenly;
    }

    [lg-align-items="start"] {
      align-items: flex-start;
    }

    [lg-align-items="end"] {
      align-items: flex-end;
    }

    [lg-align-items="center"] {
      align-items: center;
    }

    [lg-align-items="baseline"] {
      align-items: baseline;
    }

    [lg-align-items="stretch"] {
      align-items: stretch;
    }

    [lg-align-self="auto"] {
      align-self: auto;
    }

    [lg-align-self="start"] {
      align-self: flex-start;
    }

    [lg-align-self="end"] {
      align-self: flex-end;
    }

    [lg-align-self="center"] {
      align-self: center;
    }

    [lg-align-self="stretch"] {
      align-self: stretch;
    }

    [lg-grid-cols="1"] {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    [lg-grid-cols="2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [lg-grid-cols="3"] {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    [lg-grid-cols="4"] {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    [lg-grid-cols="5"] {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    [lg-grid-cols="6"] {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    [lg-grid-cols="12"] {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    [lg-grid-cols="none"] {
      grid-template-columns: none;
    }

    [lg-grid-rows="1"] {
      grid-template-rows: repeat(1, minmax(0, 1fr));
    }

    [lg-grid-rows="2"] {
      grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    [lg-grid-rows="3"] {
      grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    [lg-grid-rows="4"] {
      grid-template-rows: repeat(4, minmax(0, 1fr));
    }

    [lg-grid-rows="5"] {
      grid-template-rows: repeat(5, minmax(0, 1fr));
    }

    [lg-grid-rows="6"] {
      grid-template-rows: repeat(6, minmax(0, 1fr));
    }

    [lg-grid-rows="none"] {
      grid-template-rows: none;
    }

    [lg-col-span="1"] {
      grid-column: span 1 / span 1;
    }

    [lg-col-span="2"] {
      grid-column: span 2 / span 2;
    }

    [lg-col-span="3"] {
      grid-column: span 3 / span 3;
    }

    [lg-col-span="4"] {
      grid-column: span 4 / span 4;
    }

    [lg-col-span="5"] {
      grid-column: span 5 / span 5;
    }

    [lg-col-span="6"] {
      grid-column: span 6 / span 6;
    }

    [lg-col-span="full"] {
      grid-column: 1 / -1;
    }

    [lg-row-span="1"] {
      grid-row: span 1 / span 1;
    }

    [lg-row-span="2"] {
      grid-row: span 2 / span 2;
    }

    [lg-row-span="3"] {
      grid-row: span 3 / span 3;
    }

    [lg-row-span="4"] {
      grid-row: span 4 / span 4;
    }

    [lg-row-span="5"] {
      grid-row: span 5 / span 5;
    }

    [lg-row-span="6"] {
      grid-row: span 6 / span 6;
    }

    [lg-row-span="full"] {
      grid-row: 1 / -1;
    }

    [lg-place-items="start"] {
      place-items: start;
    }

    [lg-place-items="end"] {
      place-items: end;
    }

    [lg-place-items="center"] {
      place-items: center;
    }

    [lg-place-items="stretch"] {
      place-items: stretch;
    }

    [lg-place-content="start"] {
      place-content: start;
    }

    [lg-place-content="end"] {
      place-content: end;
    }

    [lg-place-content="center"] {
      place-content: center;
    }

    [lg-place-content="between"] {
      place-content: space-between;
    }

    [lg-place-content="stretch"] {
      place-content: stretch;
    }

    [lg-z-index="0"] {
      z-index: 0;
    }

    [lg-z-index="10"] {
      z-index: 10;
    }

    [lg-z-index="20"] {
      z-index: 20;
    }

    [lg-z-index="30"] {
      z-index: 30;
    }

    [lg-z-index="40"] {
      z-index: 40;
    }

    [lg-z-index="50"] {
      z-index: 50;
    }

    [lg-z-index="auto"] {
      z-index: auto;
    }

    [lg-inset="0"] {
      inset: 0;
    }

    [lg-inset="auto"] {
      inset: auto;
    }

    [lg-inset="1/2"] {
      inset: 50%;
    }

    [lg-top="0"] {
      top: 0;
    }

    [lg-top="auto"] {
      top: auto;
    }

    [lg-top="1/2"] {
      top: 50%;
    }

    [lg-top="full"] {
      top: 100%;
    }

    [lg-right="0"] {
      right: 0;
    }

    [lg-right="auto"] {
      right: auto;
    }

    [lg-right="1/2"] {
      right: 50%;
    }

    [lg-right="full"] {
      right: 100%;
    }

    [lg-bottom="0"] {
      bottom: 0;
    }

    [lg-bottom="auto"] {
      bottom: auto;
    }

    [lg-bottom="1/2"] {
      bottom: 50%;
    }

    [lg-bottom="full"] {
      bottom: 100%;
    }

    [lg-left="0"] {
      left: 0;
    }

    [lg-left="auto"] {
      left: auto;
    }

    [lg-left="1/2"] {
      left: 50%;
    }

    [lg-left="full"] {
      left: 100%;
    }

    [lg-margin="0"] {
      margin: 0;
    }

    [lg-margin="2xs"] {
      margin: var(--sx-space-2xs);
    }

    [lg-margin="xs"] {
      margin: var(--sx-space-xs);
    }

    [lg-margin="sm"] {
      margin: var(--sx-space-sm);
    }

    [lg-margin="md"] {
      margin: var(--sx-space-md);
    }

    [lg-margin="lg"] {
      margin: var(--sx-space-lg);
    }

    [lg-margin="xl"] {
      margin: var(--sx-space-xl);
    }

    [lg-margin="2xl"] {
      margin: var(--sx-space-2xl);
    }

    [lg-margin="3xl"] {
      margin: var(--sx-space-3xl);
    }

    [lg-margin="auto"] {
      margin: auto;
    }

    [lg-margin-x="0"] {
      margin-inline: 0;
    }

    [lg-margin-x="2xs"] {
      margin-inline: var(--sx-space-2xs);
    }

    [lg-margin-x="xs"] {
      margin-inline: var(--sx-space-xs);
    }

    [lg-margin-x="sm"] {
      margin-inline: var(--sx-space-sm);
    }

    [lg-margin-x="md"] {
      margin-inline: var(--sx-space-md);
    }

    [lg-margin-x="lg"] {
      margin-inline: var(--sx-space-lg);
    }

    [lg-margin-x="xl"] {
      margin-inline: var(--sx-space-xl);
    }

    [lg-margin-x="2xl"] {
      margin-inline: var(--sx-space-2xl);
    }

    [lg-margin-x="3xl"] {
      margin-inline: var(--sx-space-3xl);
    }

    [lg-margin-x="auto"] {
      margin-inline: auto;
    }

    [lg-margin-y="0"] {
      margin-block: 0;
    }

    [lg-margin-y="2xs"] {
      margin-block: var(--sx-space-2xs);
    }

    [lg-margin-y="xs"] {
      margin-block: var(--sx-space-xs);
    }

    [lg-margin-y="sm"] {
      margin-block: var(--sx-space-sm);
    }

    [lg-margin-y="md"] {
      margin-block: var(--sx-space-md);
    }

    [lg-margin-y="lg"] {
      margin-block: var(--sx-space-lg);
    }

    [lg-margin-y="xl"] {
      margin-block: var(--sx-space-xl);
    }

    [lg-margin-y="2xl"] {
      margin-block: var(--sx-space-2xl);
    }

    [lg-margin-y="3xl"] {
      margin-block: var(--sx-space-3xl);
    }

    [lg-margin-y="auto"] {
      margin-block: auto;
    }

    [lg-margin-top="0"] {
      margin-top: 0;
    }

    [lg-margin-top="2xs"] {
      margin-top: var(--sx-space-2xs);
    }

    [lg-margin-top="xs"] {
      margin-top: var(--sx-space-xs);
    }

    [lg-margin-top="sm"] {
      margin-top: var(--sx-space-sm);
    }

    [lg-margin-top="md"] {
      margin-top: var(--sx-space-md);
    }

    [lg-margin-top="lg"] {
      margin-top: var(--sx-space-lg);
    }

    [lg-margin-top="xl"] {
      margin-top: var(--sx-space-xl);
    }

    [lg-margin-top="2xl"] {
      margin-top: var(--sx-space-2xl);
    }

    [lg-margin-top="3xl"] {
      margin-top: var(--sx-space-3xl);
    }

    [lg-margin-top="auto"] {
      margin-top: auto;
    }

    [lg-margin-right="0"] {
      margin-right: 0;
    }

    [lg-margin-right="2xs"] {
      margin-right: var(--sx-space-2xs);
    }

    [lg-margin-right="xs"] {
      margin-right: var(--sx-space-xs);
    }

    [lg-margin-right="sm"] {
      margin-right: var(--sx-space-sm);
    }

    [lg-margin-right="md"] {
      margin-right: var(--sx-space-md);
    }

    [lg-margin-right="lg"] {
      margin-right: var(--sx-space-lg);
    }

    [lg-margin-right="xl"] {
      margin-right: var(--sx-space-xl);
    }

    [lg-margin-right="2xl"] {
      margin-right: var(--sx-space-2xl);
    }

    [lg-margin-right="3xl"] {
      margin-right: var(--sx-space-3xl);
    }

    [lg-margin-right="auto"] {
      margin-right: auto;
    }

    [lg-margin-bottom="0"] {
      margin-bottom: 0;
    }

    [lg-margin-bottom="2xs"] {
      margin-bottom: var(--sx-space-2xs);
    }

    [lg-margin-bottom="xs"] {
      margin-bottom: var(--sx-space-xs);
    }

    [lg-margin-bottom="sm"] {
      margin-bottom: var(--sx-space-sm);
    }

    [lg-margin-bottom="md"] {
      margin-bottom: var(--sx-space-md);
    }

    [lg-margin-bottom="lg"] {
      margin-bottom: var(--sx-space-lg);
    }

    [lg-margin-bottom="xl"] {
      margin-bottom: var(--sx-space-xl);
    }

    [lg-margin-bottom="2xl"] {
      margin-bottom: var(--sx-space-2xl);
    }

    [lg-margin-bottom="3xl"] {
      margin-bottom: var(--sx-space-3xl);
    }

    [lg-margin-bottom="auto"] {
      margin-bottom: auto;
    }

    [lg-margin-left="0"] {
      margin-left: 0;
    }

    [lg-margin-left="2xs"] {
      margin-left: var(--sx-space-2xs);
    }

    [lg-margin-left="xs"] {
      margin-left: var(--sx-space-xs);
    }

    [lg-margin-left="sm"] {
      margin-left: var(--sx-space-sm);
    }

    [lg-margin-left="md"] {
      margin-left: var(--sx-space-md);
    }

    [lg-margin-left="lg"] {
      margin-left: var(--sx-space-lg);
    }

    [lg-margin-left="xl"] {
      margin-left: var(--sx-space-xl);
    }

    [lg-margin-left="2xl"] {
      margin-left: var(--sx-space-2xl);
    }

    [lg-margin-left="3xl"] {
      margin-left: var(--sx-space-3xl);
    }

    [lg-margin-left="auto"] {
      margin-left: auto;
    }

    [lg-pad="0"] {
      padding: 0;
    }

    [lg-pad="2xs"] {
      padding: var(--sx-space-2xs);
    }

    [lg-pad="xs"] {
      padding: var(--sx-space-xs);
    }

    [lg-pad="sm"] {
      padding: var(--sx-space-sm);
    }

    [lg-pad="md"] {
      padding: var(--sx-space-md);
    }

    [lg-pad="lg"] {
      padding: var(--sx-space-lg);
    }

    [lg-pad="xl"] {
      padding: var(--sx-space-xl);
    }

    [lg-pad="2xl"] {
      padding: var(--sx-space-2xl);
    }

    [lg-pad="3xl"] {
      padding: var(--sx-space-3xl);
    }

    [lg-pad="auto"] {
      padding: auto;
    }

    [lg-pad-x="0"] {
      padding-inline: 0;
    }

    [lg-pad-x="2xs"] {
      padding-inline: var(--sx-space-2xs);
    }

    [lg-pad-x="xs"] {
      padding-inline: var(--sx-space-xs);
    }

    [lg-pad-x="sm"] {
      padding-inline: var(--sx-space-sm);
    }

    [lg-pad-x="md"] {
      padding-inline: var(--sx-space-md);
    }

    [lg-pad-x="lg"] {
      padding-inline: var(--sx-space-lg);
    }

    [lg-pad-x="xl"] {
      padding-inline: var(--sx-space-xl);
    }

    [lg-pad-x="2xl"] {
      padding-inline: var(--sx-space-2xl);
    }

    [lg-pad-x="3xl"] {
      padding-inline: var(--sx-space-3xl);
    }

    [lg-pad-x="auto"] {
      padding-inline: auto;
    }

    [lg-pad-y="0"] {
      padding-block: 0;
    }

    [lg-pad-y="2xs"] {
      padding-block: var(--sx-space-2xs);
    }

    [lg-pad-y="xs"] {
      padding-block: var(--sx-space-xs);
    }

    [lg-pad-y="sm"] {
      padding-block: var(--sx-space-sm);
    }

    [lg-pad-y="md"] {
      padding-block: var(--sx-space-md);
    }

    [lg-pad-y="lg"] {
      padding-block: var(--sx-space-lg);
    }

    [lg-pad-y="xl"] {
      padding-block: var(--sx-space-xl);
    }

    [lg-pad-y="2xl"] {
      padding-block: var(--sx-space-2xl);
    }

    [lg-pad-y="3xl"] {
      padding-block: var(--sx-space-3xl);
    }

    [lg-pad-y="auto"] {
      padding-block: auto;
    }

    [lg-pad-top="0"] {
      padding-top: 0;
    }

    [lg-pad-top="2xs"] {
      padding-top: var(--sx-space-2xs);
    }

    [lg-pad-top="xs"] {
      padding-top: var(--sx-space-xs);
    }

    [lg-pad-top="sm"] {
      padding-top: var(--sx-space-sm);
    }

    [lg-pad-top="md"] {
      padding-top: var(--sx-space-md);
    }

    [lg-pad-top="lg"] {
      padding-top: var(--sx-space-lg);
    }

    [lg-pad-top="xl"] {
      padding-top: var(--sx-space-xl);
    }

    [lg-pad-top="2xl"] {
      padding-top: var(--sx-space-2xl);
    }

    [lg-pad-top="3xl"] {
      padding-top: var(--sx-space-3xl);
    }

    [lg-pad-top="auto"] {
      padding-top: auto;
    }

    [lg-pad-right="0"] {
      padding-right: 0;
    }

    [lg-pad-right="2xs"] {
      padding-right: var(--sx-space-2xs);
    }

    [lg-pad-right="xs"] {
      padding-right: var(--sx-space-xs);
    }

    [lg-pad-right="sm"] {
      padding-right: var(--sx-space-sm);
    }

    [lg-pad-right="md"] {
      padding-right: var(--sx-space-md);
    }

    [lg-pad-right="lg"] {
      padding-right: var(--sx-space-lg);
    }

    [lg-pad-right="xl"] {
      padding-right: var(--sx-space-xl);
    }

    [lg-pad-right="2xl"] {
      padding-right: var(--sx-space-2xl);
    }

    [lg-pad-right="3xl"] {
      padding-right: var(--sx-space-3xl);
    }

    [lg-pad-right="auto"] {
      padding-right: auto;
    }

    [lg-pad-bottom="0"] {
      padding-bottom: 0;
    }

    [lg-pad-bottom="2xs"] {
      padding-bottom: var(--sx-space-2xs);
    }

    [lg-pad-bottom="xs"] {
      padding-bottom: var(--sx-space-xs);
    }

    [lg-pad-bottom="sm"] {
      padding-bottom: var(--sx-space-sm);
    }

    [lg-pad-bottom="md"] {
      padding-bottom: var(--sx-space-md);
    }

    [lg-pad-bottom="lg"] {
      padding-bottom: var(--sx-space-lg);
    }

    [lg-pad-bottom="xl"] {
      padding-bottom: var(--sx-space-xl);
    }

    [lg-pad-bottom="2xl"] {
      padding-bottom: var(--sx-space-2xl);
    }

    [lg-pad-bottom="3xl"] {
      padding-bottom: var(--sx-space-3xl);
    }

    [lg-pad-bottom="auto"] {
      padding-bottom: auto;
    }

    [lg-pad-left="0"] {
      padding-left: 0;
    }

    [lg-pad-left="2xs"] {
      padding-left: var(--sx-space-2xs);
    }

    [lg-pad-left="xs"] {
      padding-left: var(--sx-space-xs);
    }

    [lg-pad-left="sm"] {
      padding-left: var(--sx-space-sm);
    }

    [lg-pad-left="md"] {
      padding-left: var(--sx-space-md);
    }

    [lg-pad-left="lg"] {
      padding-left: var(--sx-space-lg);
    }

    [lg-pad-left="xl"] {
      padding-left: var(--sx-space-xl);
    }

    [lg-pad-left="2xl"] {
      padding-left: var(--sx-space-2xl);
    }

    [lg-pad-left="3xl"] {
      padding-left: var(--sx-space-3xl);
    }

    [lg-pad-left="auto"] {
      padding-left: auto;
    }

    [lg-gap="0"] {
      gap: 0;
    }

    [lg-gap="2xs"] {
      gap: var(--sx-space-2xs);
    }

    [lg-gap="xs"] {
      gap: var(--sx-space-xs);
    }

    [lg-gap="sm"] {
      gap: var(--sx-space-sm);
    }

    [lg-gap="md"] {
      gap: var(--sx-space-md);
    }

    [lg-gap="lg"] {
      gap: var(--sx-space-lg);
    }

    [lg-gap="xl"] {
      gap: var(--sx-space-xl);
    }

    [lg-gap="2xl"] {
      gap: var(--sx-space-2xl);
    }

    [lg-gap="3xl"] {
      gap: var(--sx-space-3xl);
    }

    [lg-gap="auto"] {
      gap: auto;
    }

    [lg-gap-x="0"] {
      column-gap: 0;
    }

    [lg-gap-x="2xs"] {
      column-gap: var(--sx-space-2xs);
    }

    [lg-gap-x="xs"] {
      column-gap: var(--sx-space-xs);
    }

    [lg-gap-x="sm"] {
      column-gap: var(--sx-space-sm);
    }

    [lg-gap-x="md"] {
      column-gap: var(--sx-space-md);
    }

    [lg-gap-x="lg"] {
      column-gap: var(--sx-space-lg);
    }

    [lg-gap-x="xl"] {
      column-gap: var(--sx-space-xl);
    }

    [lg-gap-x="2xl"] {
      column-gap: var(--sx-space-2xl);
    }

    [lg-gap-x="3xl"] {
      column-gap: var(--sx-space-3xl);
    }

    [lg-gap-x="auto"] {
      column-gap: auto;
    }

    [lg-gap-y="0"] {
      row-gap: 0;
    }

    [lg-gap-y="2xs"] {
      row-gap: var(--sx-space-2xs);
    }

    [lg-gap-y="xs"] {
      row-gap: var(--sx-space-xs);
    }

    [lg-gap-y="sm"] {
      row-gap: var(--sx-space-sm);
    }

    [lg-gap-y="md"] {
      row-gap: var(--sx-space-md);
    }

    [lg-gap-y="lg"] {
      row-gap: var(--sx-space-lg);
    }

    [lg-gap-y="xl"] {
      row-gap: var(--sx-space-xl);
    }

    [lg-gap-y="2xl"] {
      row-gap: var(--sx-space-2xl);
    }

    [lg-gap-y="3xl"] {
      row-gap: var(--sx-space-3xl);
    }

    [lg-gap-y="auto"] {
      row-gap: auto;
    }

    [lg-width="0"] {
      width: 0;
    }

    [lg-width="auto"] {
      width: auto;
    }

    [lg-width="full"] {
      width: 100%;
    }

    [lg-width="min"] {
      width: min-content;
    }

    [lg-width="max"] {
      width: max-content;
    }

    [lg-width="fit"] {
      width: fit-content;
    }

    [lg-width="1/2"] {
      width: 50%;
    }

    [lg-width="1/3"] {
      width: 33.333333%;
    }

    [lg-width="2/3"] {
      width: 66.666667%;
    }

    [lg-width="1/4"] {
      width: 25%;
    }

    [lg-width="3/4"] {
      width: 75%;
    }

    [lg-width="1/5"] {
      width: 20%;
    }

    [lg-width="2/5"] {
      width: 40%;
    }

    [lg-width="3/5"] {
      width: 60%;
    }

    [lg-width="4/5"] {
      width: 80%;
    }

    [lg-width="xs"] {
      width: var(--sx-space-xs);
    }

    [lg-width="sm"] {
      width: var(--sx-space-sm);
    }

    [lg-width="md"] {
      width: var(--sx-space-md);
    }

    [lg-width="lg"] {
      width: var(--sx-space-lg);
    }

    [lg-width="xl"] {
      width: var(--sx-space-xl);
    }

    [lg-width="2xl"] {
      width: var(--sx-space-2xl);
    }

    [lg-width="3xl"] {
      width: var(--sx-space-3xl);
    }

    [lg-width="screen"] {
      width: 100vw;
    }

    [lg-height="0"] {
      height: 0;
    }

    [lg-height="auto"] {
      height: auto;
    }

    [lg-height="full"] {
      height: 100%;
    }

    [lg-height="min"] {
      height: min-content;
    }

    [lg-height="max"] {
      height: max-content;
    }

    [lg-height="fit"] {
      height: fit-content;
    }

    [lg-height="1/2"] {
      height: 50%;
    }

    [lg-height="1/3"] {
      height: 33.333333%;
    }

    [lg-height="2/3"] {
      height: 66.666667%;
    }

    [lg-height="1/4"] {
      height: 25%;
    }

    [lg-height="3/4"] {
      height: 75%;
    }

    [lg-height="1/5"] {
      height: 20%;
    }

    [lg-height="2/5"] {
      height: 40%;
    }

    [lg-height="3/5"] {
      height: 60%;
    }

    [lg-height="4/5"] {
      height: 80%;
    }

    [lg-height="xs"] {
      height: var(--sx-space-xs);
    }

    [lg-height="sm"] {
      height: var(--sx-space-sm);
    }

    [lg-height="md"] {
      height: var(--sx-space-md);
    }

    [lg-height="lg"] {
      height: var(--sx-space-lg);
    }

    [lg-height="xl"] {
      height: var(--sx-space-xl);
    }

    [lg-height="2xl"] {
      height: var(--sx-space-2xl);
    }

    [lg-height="3xl"] {
      height: var(--sx-space-3xl);
    }

    [lg-height="screen"] {
      height: 100vh;
    }

    [lg-min-w="0"] {
      min-width: 0;
    }

    [lg-min-w="none"] {
      min-width: none;
    }

    [lg-min-w="full"] {
      min-width: 100%;
    }

    [lg-min-w="min"] {
      min-width: min-content;
    }

    [lg-min-w="max"] {
      min-width: max-content;
    }

    [lg-min-w="fit"] {
      min-width: fit-content;
    }

    [lg-min-w="xs"] {
      min-width: 20rem;
    }

    [lg-min-w="sm"] {
      min-width: 24rem;
    }

    [lg-min-w="md"] {
      min-width: 28rem;
    }

    [lg-min-w="lg"] {
      min-width: 32rem;
    }

    [lg-min-w="xl"] {
      min-width: 36rem;
    }

    [lg-min-w="2xl"] {
      min-width: 42rem;
    }

    [lg-min-w="3xl"] {
      min-width: 48rem;
    }

    [lg-min-w="4xl"] {
      min-width: 56rem;
    }

    [lg-min-w="5xl"] {
      min-width: 64rem;
    }

    [lg-min-w="6xl"] {
      min-width: 72rem;
    }

    [lg-min-w="7xl"] {
      min-width: 80rem;
    }

    [lg-min-w="prose"] {
      min-width: 65ch;
    }

    [lg-min-w="screen"] {
      min-width: 100vw;
    }

    [lg-max-w="0"] {
      max-width: 0;
    }

    [lg-max-w="none"] {
      max-width: none;
    }

    [lg-max-w="full"] {
      max-width: 100%;
    }

    [lg-max-w="min"] {
      max-width: min-content;
    }

    [lg-max-w="max"] {
      max-width: max-content;
    }

    [lg-max-w="fit"] {
      max-width: fit-content;
    }

    [lg-max-w="xs"] {
      max-width: 20rem;
    }

    [lg-max-w="sm"] {
      max-width: 24rem;
    }

    [lg-max-w="md"] {
      max-width: 28rem;
    }

    [lg-max-w="lg"] {
      max-width: 32rem;
    }

    [lg-max-w="xl"] {
      max-width: 36rem;
    }

    [lg-max-w="2xl"] {
      max-width: 42rem;
    }

    [lg-max-w="3xl"] {
      max-width: 48rem;
    }

    [lg-max-w="4xl"] {
      max-width: 56rem;
    }

    [lg-max-w="5xl"] {
      max-width: 64rem;
    }

    [lg-max-w="6xl"] {
      max-width: 72rem;
    }

    [lg-max-w="7xl"] {
      max-width: 80rem;
    }

    [lg-max-w="prose"] {
      max-width: 65ch;
    }

    [lg-max-w="screen"] {
      max-width: 100vw;
    }

    [lg-min-h="0"] {
      min-height: 0;
    }

    [lg-min-h="none"] {
      min-height: none;
    }

    [lg-min-h="full"] {
      min-height: 100%;
    }

    [lg-min-h="min"] {
      min-height: min-content;
    }

    [lg-min-h="max"] {
      min-height: max-content;
    }

    [lg-min-h="fit"] {
      min-height: fit-content;
    }

    [lg-min-h="xs"] {
      min-height: 20rem;
    }

    [lg-min-h="sm"] {
      min-height: 24rem;
    }

    [lg-min-h="md"] {
      min-height: 28rem;
    }

    [lg-min-h="lg"] {
      min-height: 32rem;
    }

    [lg-min-h="xl"] {
      min-height: 36rem;
    }

    [lg-min-h="2xl"] {
      min-height: 42rem;
    }

    [lg-min-h="3xl"] {
      min-height: 48rem;
    }

    [lg-min-h="4xl"] {
      min-height: 56rem;
    }

    [lg-min-h="5xl"] {
      min-height: 64rem;
    }

    [lg-min-h="6xl"] {
      min-height: 72rem;
    }

    [lg-min-h="7xl"] {
      min-height: 80rem;
    }

    [lg-min-h="prose"] {
      min-height: 65ch;
    }

    [lg-min-h="screen"] {
      min-height: 100vh;
    }

    [lg-max-h="0"] {
      max-height: 0;
    }

    [lg-max-h="none"] {
      max-height: none;
    }

    [lg-max-h="full"] {
      max-height: 100%;
    }

    [lg-max-h="min"] {
      max-height: min-content;
    }

    [lg-max-h="max"] {
      max-height: max-content;
    }

    [lg-max-h="fit"] {
      max-height: fit-content;
    }

    [lg-max-h="xs"] {
      max-height: 20rem;
    }

    [lg-max-h="sm"] {
      max-height: 24rem;
    }

    [lg-max-h="md"] {
      max-height: 28rem;
    }

    [lg-max-h="lg"] {
      max-height: 32rem;
    }

    [lg-max-h="xl"] {
      max-height: 36rem;
    }

    [lg-max-h="2xl"] {
      max-height: 42rem;
    }

    [lg-max-h="3xl"] {
      max-height: 48rem;
    }

    [lg-max-h="4xl"] {
      max-height: 56rem;
    }

    [lg-max-h="5xl"] {
      max-height: 64rem;
    }

    [lg-max-h="6xl"] {
      max-height: 72rem;
    }

    [lg-max-h="7xl"] {
      max-height: 80rem;
    }

    [lg-max-h="prose"] {
      max-height: 65ch;
    }

    [lg-max-h="screen"] {
      max-height: 100vh;
    }

    [lg-border="0"] {
      border-width: 0;
      border-style: none;
    }

    [lg-border="1"] {
      border-width: 1px;
      border-style: solid;
    }

    [lg-border="2"] {
      border-width: 2px;
      border-style: solid;
    }

    [lg-border="4"] {
      border-width: 4px;
      border-style: solid;
    }

    [lg-border="8"] {
      border-width: 8px;
      border-style: solid;
    }

    [lg-border-t="0"] {
      border-top-width: 0;
      border-top-style: none;
    }

    [lg-border-t="1"] {
      border-top-width: 1px;
      border-top-style: solid;
    }

    [lg-border-t="2"] {
      border-top-width: 2px;
      border-top-style: solid;
    }

    [lg-border-t="4"] {
      border-top-width: 4px;
      border-top-style: solid;
    }

    [lg-border-t="8"] {
      border-top-width: 8px;
      border-top-style: solid;
    }

    [lg-border-r="0"] {
      border-right-width: 0;
      border-right-style: none;
    }

    [lg-border-r="1"] {
      border-right-width: 1px;
      border-right-style: solid;
    }

    [lg-border-r="2"] {
      border-right-width: 2px;
      border-right-style: solid;
    }

    [lg-border-r="4"] {
      border-right-width: 4px;
      border-right-style: solid;
    }

    [lg-border-r="8"] {
      border-right-width: 8px;
      border-right-style: solid;
    }

    [lg-border-b="0"] {
      border-bottom-width: 0;
      border-bottom-style: none;
    }

    [lg-border-b="1"] {
      border-bottom-width: 1px;
      border-bottom-style: solid;
    }

    [lg-border-b="2"] {
      border-bottom-width: 2px;
      border-bottom-style: solid;
    }

    [lg-border-b="4"] {
      border-bottom-width: 4px;
      border-bottom-style: solid;
    }

    [lg-border-b="8"] {
      border-bottom-width: 8px;
      border-bottom-style: solid;
    }

    [lg-border-l="0"] {
      border-left-width: 0;
      border-left-style: none;
    }

    [lg-border-l="1"] {
      border-left-width: 1px;
      border-left-style: solid;
    }

    [lg-border-l="2"] {
      border-left-width: 2px;
      border-left-style: solid;
    }

    [lg-border-l="4"] {
      border-left-width: 4px;
      border-left-style: solid;
    }

    [lg-border-l="8"] {
      border-left-width: 8px;
      border-left-style: solid;
    }

    [lg-border-style="solid"] {
      border-style: solid;
    }

    [lg-border-style="dashed"] {
      border-style: dashed;
    }

    [lg-border-style="dotted"] {
      border-style: dotted;
    }

    [lg-border-style="double"] {
      border-style: double;
    }

    [lg-border-style="none"] {
      border-style: none;
    }

    [lg-border-style="hidden"] {
      border-style: hidden;
    }

    [lg-outline="0"] {
      outline-width: 0;
    }

    [lg-outline="1"] {
      outline-width: 1px;
    }

    [lg-outline="2"] {
      outline-width: 2px;
    }

    [lg-outline="4"] {
      outline-width: 4px;
    }

    [lg-outline="none"] {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }

    [lg-ring="0"] {
      box-shadow: none;
    }

    [lg-ring="1"] {
      box-shadow: 0 0 0 1px var(--sx-surface-ring);
    }

    [lg-ring="2"] {
      box-shadow: 0 0 0 2px var(--sx-surface-ring);
    }

    [lg-ring="4"] {
      box-shadow: 0 0 0 4px var(--sx-surface-ring);
    }

    [lg-text-align="left"] {
      text-align: left;
    }

    [lg-text-align="center"] {
      text-align: center;
    }

    [lg-text-align="right"] {
      text-align: right;
    }

    [lg-text-align="justify"] {
      text-align: justify;
    }

    [lg-text-decoration="underline"] {
      text-decoration-line: underline;
    }

    [lg-text-decoration="overline"] {
      text-decoration-line: overline;
    }

    [lg-text-decoration="line-through"] {
      text-decoration-line: line-through;
    }

    [lg-text-decoration="none"] {
      text-decoration-line: none;
    }

    [lg-text-transform="uppercase"] {
      text-transform: uppercase;
    }

    [lg-text-transform="lowercase"] {
      text-transform: lowercase;
    }

    [lg-text-transform="capitalize"] {
      text-transform: capitalize;
    }

    [lg-text-transform="none"] {
      text-transform: none;
    }

    [lg-text-overflow="truncate"] {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    [lg-text-overflow="ellipsis"] {
      text-overflow: ellipsis;
    }

    [lg-text-overflow="clip"] {
      text-overflow: clip;
    }

    [lg-whitespace="normal"] {
      white-space: normal;
    }

    [lg-whitespace="nowrap"] {
      white-space: nowrap;
    }

    [lg-whitespace="pre"] {
      white-space: pre;
    }

    [lg-whitespace="pre-line"] {
      white-space: pre-line;
    }

    [lg-whitespace="pre-wrap"] {
      white-space: pre-wrap;
    }

    [lg-whitespace="break-spaces"] {
      white-space: break-spaces;
    }

    [lg-word-break="normal"] {
      overflow-wrap: normal;
      word-break: normal;
    }

    [lg-word-break="words"] {
      overflow-wrap: break-word;
    }

    [lg-word-break="all"] {
      word-break: break-all;
    }

    [lg-word-break="keep"] {
      word-break: keep-all;
    }

    [lg-tracking="tighter"] {
      letter-spacing: -0.05em;
    }

    [lg-tracking="tight"] {
      letter-spacing: -0.025em;
    }

    [lg-tracking="normal"] {
      letter-spacing: 0em;
    }

    [lg-tracking="wide"] {
      letter-spacing: 0.025em;
    }

    [lg-tracking="wider"] {
      letter-spacing: 0.05em;
    }

    [lg-tracking="widest"] {
      letter-spacing: 0.1em;
    }

    [lg-tracking="custom"] {
      letter-spacing: var(--sx-tracking);
    }

    [lg-leading="none"] {
      line-height: 1;
    }

    [lg-leading="tight"] {
      line-height: 1.25;
    }

    [lg-leading="snug"] {
      line-height: 1.375;
    }

    [lg-leading="normal"] {
      line-height: 1.5;
    }

    [lg-leading="relaxed"] {
      line-height: 1.625;
    }

    [lg-leading="loose"] {
      line-height: 2;
    }

    [lg-leading="custom"] {
      line-height: var(--sx-leading);
    }

    [lg-font-style="italic"] {
      font-style: italic;
    }

    [lg-font-style="normal"] {
      font-style: normal;
    }

    [lg-font-variant="tabular-nums"] {
      font-variant-numeric: tabular-nums;
    }

    [lg-font-variant="proportional-nums"] {
      font-variant-numeric: proportional-nums;
    }

    [lg-font-variant="oldstyle-nums"] {
      font-variant-numeric: oldstyle-nums;
    }

    [lg-font-variant="lining-nums"] {
      font-variant-numeric: lining-nums;
    }

    [lg-font-variant="small-caps"] {
      font-variant-caps: small-caps;
    }

    [lg-font-variant="normal"] {
      font-variant: normal;
    }

    [lg-list-style="none"] {
      list-style-type: none;
    }

    [lg-list-style="disc"] {
      list-style-type: disc;
    }

    [lg-list-style="decimal"] {
      list-style-type: decimal;
    }

    [lg-list-style="inside"] {
      list-style-position: inside;
    }

    [lg-list-style="outside"] {
      list-style-position: outside;
    }

    [lg-opacity="0"] {
      opacity: 0;
    }

    [lg-opacity="5"] {
      opacity: 0.05;
    }

    [lg-opacity="10"] {
      opacity: 0.1;
    }

    [lg-opacity="20"] {
      opacity: 0.2;
    }

    [lg-opacity="25"] {
      opacity: 0.25;
    }

    [lg-opacity="30"] {
      opacity: 0.3;
    }

    [lg-opacity="40"] {
      opacity: 0.4;
    }

    [lg-opacity="50"] {
      opacity: 0.5;
    }

    [lg-opacity="60"] {
      opacity: 0.6;
    }

    [lg-opacity="70"] {
      opacity: 0.7;
    }

    [lg-opacity="75"] {
      opacity: 0.75;
    }

    [lg-opacity="80"] {
      opacity: 0.8;
    }

    [lg-opacity="90"] {
      opacity: 0.9;
    }

    [lg-opacity="95"] {
      opacity: 0.95;
    }

    [lg-opacity="100"] {
      opacity: 1;
    }

    [lg-shadow="none"] {
      box-shadow: none;
    }

    [lg-shadow="sm"] {
      box-shadow: var(--sx-shadow-sm);
    }

    [lg-shadow="md"] {
      box-shadow: var(--sx-shadow-md);
    }

    [lg-shadow="lg"] {
      box-shadow: var(--sx-shadow-lg);
    }

    [lg-mix-blend="normal"] {
      mix-blend-mode: normal;
    }

    [lg-mix-blend="multiply"] {
      mix-blend-mode: multiply;
    }

    [lg-mix-blend="screen"] {
      mix-blend-mode: screen;
    }

    [lg-mix-blend="overlay"] {
      mix-blend-mode: overlay;
    }

    [lg-backdrop-blur="none"] {
      backdrop-filter: none;
    }

    [lg-backdrop-blur="sm"] {
      backdrop-filter: blur(4px);
    }

    [lg-backdrop-blur="md"] {
      backdrop-filter: blur(12px);
    }

    [lg-backdrop-blur="lg"] {
      backdrop-filter: blur(16px);
    }

    [lg-backdrop-blur="xl"] {
      backdrop-filter: blur(24px);
    }
  }

  @media (min-width: 1280px) {
    [xl-display="block"] {
      display: block;
    }

    [xl-display="inline-block"] {
      display: inline-block;
    }

    [xl-display="inline"] {
      display: inline;
    }

    [xl-display="flex"] {
      display: flex;
    }

    [xl-display="inline-flex"] {
      display: inline-flex;
    }

    [xl-display="grid"] {
      display: grid;
    }

    [xl-display="inline-grid"] {
      display: inline-grid;
    }

    [xl-display="hidden"] {
      display: none;
    }

    [xl-display="contents"] {
      display: contents;
    }

    [xl-position="static"] {
      position: static;
    }

    [xl-position="relative"] {
      position: relative;
    }

    [xl-position="absolute"] {
      position: absolute;
    }

    [xl-position="fixed"] {
      position: fixed;
    }

    [xl-position="sticky"] {
      position: sticky;
    }

    [xl-overflow="auto"] {
      overflow: auto;
    }

    [xl-overflow="hidden"] {
      overflow: hidden;
    }

    [xl-overflow="visible"] {
      overflow: visible;
    }

    [xl-overflow="scroll"] {
      overflow: scroll;
    }

    [xl-overflow="clip"] {
      overflow: clip;
    }

    [xl-overflow-x="auto"] {
      overflow-x: auto;
    }

    [xl-overflow-x="hidden"] {
      overflow-x: hidden;
    }

    [xl-overflow-x="visible"] {
      overflow-x: visible;
    }

    [xl-overflow-x="scroll"] {
      overflow-x: scroll;
    }

    [xl-overflow-x="clip"] {
      overflow-x: clip;
    }

    [xl-overflow-y="auto"] {
      overflow-y: auto;
    }

    [xl-overflow-y="hidden"] {
      overflow-y: hidden;
    }

    [xl-overflow-y="visible"] {
      overflow-y: visible;
    }

    [xl-overflow-y="scroll"] {
      overflow-y: scroll;
    }

    [xl-overflow-y="clip"] {
      overflow-y: clip;
    }

    [xl-flex-direction="row"] {
      flex-direction: row;
    }

    [xl-flex-direction="row-reverse"] {
      flex-direction: row-reverse;
    }

    [xl-flex-direction="col"] {
      flex-direction: column;
    }

    [xl-flex-direction="col-reverse"] {
      flex-direction: column-reverse;
    }

    [xl-flex-wrap="wrap"] {
      flex-wrap: wrap;
    }

    [xl-flex-wrap="nowrap"] {
      flex-wrap: nowrap;
    }

    [xl-flex-wrap="wrap-reverse"] {
      flex-wrap: wrap-reverse;
    }

    [xl-flex="1"] {
      flex: 1 1 0%;
    }

    [xl-flex="auto"] {
      flex: 1 1 auto;
    }

    [xl-flex="initial"] {
      flex: 0 1 auto;
    }

    [xl-flex="none"] {
      flex: none;
    }

    [xl-flex-grow="0"] {
      flex-grow: 0;
    }

    [xl-flex-grow="1"] {
      flex-grow: 1;
    }

    [xl-flex-shrink="0"] {
      flex-shrink: 0;
    }

    [xl-flex-shrink="1"] {
      flex-shrink: 1;
    }

    [xl-justify-content="start"] {
      justify-content: flex-start;
    }

    [xl-justify-content="end"] {
      justify-content: flex-end;
    }

    [xl-justify-content="center"] {
      justify-content: center;
    }

    [xl-justify-content="between"] {
      justify-content: space-between;
    }

    [xl-justify-content="around"] {
      justify-content: space-around;
    }

    [xl-justify-content="evenly"] {
      justify-content: space-evenly;
    }

    [xl-align-items="start"] {
      align-items: flex-start;
    }

    [xl-align-items="end"] {
      align-items: flex-end;
    }

    [xl-align-items="center"] {
      align-items: center;
    }

    [xl-align-items="baseline"] {
      align-items: baseline;
    }

    [xl-align-items="stretch"] {
      align-items: stretch;
    }

    [xl-align-self="auto"] {
      align-self: auto;
    }

    [xl-align-self="start"] {
      align-self: flex-start;
    }

    [xl-align-self="end"] {
      align-self: flex-end;
    }

    [xl-align-self="center"] {
      align-self: center;
    }

    [xl-align-self="stretch"] {
      align-self: stretch;
    }

    [xl-grid-cols="1"] {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    [xl-grid-cols="2"] {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    [xl-grid-cols="3"] {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    [xl-grid-cols="4"] {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    [xl-grid-cols="5"] {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    [xl-grid-cols="6"] {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    [xl-grid-cols="12"] {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    [xl-grid-cols="none"] {
      grid-template-columns: none;
    }

    [xl-grid-rows="1"] {
      grid-template-rows: repeat(1, minmax(0, 1fr));
    }

    [xl-grid-rows="2"] {
      grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    [xl-grid-rows="3"] {
      grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    [xl-grid-rows="4"] {
      grid-template-rows: repeat(4, minmax(0, 1fr));
    }

    [xl-grid-rows="5"] {
      grid-template-rows: repeat(5, minmax(0, 1fr));
    }

    [xl-grid-rows="6"] {
      grid-template-rows: repeat(6, minmax(0, 1fr));
    }

    [xl-grid-rows="none"] {
      grid-template-rows: none;
    }

    [xl-col-span="1"] {
      grid-column: span 1 / span 1;
    }

    [xl-col-span="2"] {
      grid-column: span 2 / span 2;
    }

    [xl-col-span="3"] {
      grid-column: span 3 / span 3;
    }

    [xl-col-span="4"] {
      grid-column: span 4 / span 4;
    }

    [xl-col-span="5"] {
      grid-column: span 5 / span 5;
    }

    [xl-col-span="6"] {
      grid-column: span 6 / span 6;
    }

    [xl-col-span="full"] {
      grid-column: 1 / -1;
    }

    [xl-row-span="1"] {
      grid-row: span 1 / span 1;
    }

    [xl-row-span="2"] {
      grid-row: span 2 / span 2;
    }

    [xl-row-span="3"] {
      grid-row: span 3 / span 3;
    }

    [xl-row-span="4"] {
      grid-row: span 4 / span 4;
    }

    [xl-row-span="5"] {
      grid-row: span 5 / span 5;
    }

    [xl-row-span="6"] {
      grid-row: span 6 / span 6;
    }

    [xl-row-span="full"] {
      grid-row: 1 / -1;
    }

    [xl-place-items="start"] {
      place-items: start;
    }

    [xl-place-items="end"] {
      place-items: end;
    }

    [xl-place-items="center"] {
      place-items: center;
    }

    [xl-place-items="stretch"] {
      place-items: stretch;
    }

    [xl-place-content="start"] {
      place-content: start;
    }

    [xl-place-content="end"] {
      place-content: end;
    }

    [xl-place-content="center"] {
      place-content: center;
    }

    [xl-place-content="between"] {
      place-content: space-between;
    }

    [xl-place-content="stretch"] {
      place-content: stretch;
    }

    [xl-z-index="0"] {
      z-index: 0;
    }

    [xl-z-index="10"] {
      z-index: 10;
    }

    [xl-z-index="20"] {
      z-index: 20;
    }

    [xl-z-index="30"] {
      z-index: 30;
    }

    [xl-z-index="40"] {
      z-index: 40;
    }

    [xl-z-index="50"] {
      z-index: 50;
    }

    [xl-z-index="auto"] {
      z-index: auto;
    }

    [xl-inset="0"] {
      inset: 0;
    }

    [xl-inset="auto"] {
      inset: auto;
    }

    [xl-inset="1/2"] {
      inset: 50%;
    }

    [xl-top="0"] {
      top: 0;
    }

    [xl-top="auto"] {
      top: auto;
    }

    [xl-top="1/2"] {
      top: 50%;
    }

    [xl-top="full"] {
      top: 100%;
    }

    [xl-right="0"] {
      right: 0;
    }

    [xl-right="auto"] {
      right: auto;
    }

    [xl-right="1/2"] {
      right: 50%;
    }

    [xl-right="full"] {
      right: 100%;
    }

    [xl-bottom="0"] {
      bottom: 0;
    }

    [xl-bottom="auto"] {
      bottom: auto;
    }

    [xl-bottom="1/2"] {
      bottom: 50%;
    }

    [xl-bottom="full"] {
      bottom: 100%;
    }

    [xl-left="0"] {
      left: 0;
    }

    [xl-left="auto"] {
      left: auto;
    }

    [xl-left="1/2"] {
      left: 50%;
    }

    [xl-left="full"] {
      left: 100%;
    }

    [xl-margin="0"] {
      margin: 0;
    }

    [xl-margin="2xs"] {
      margin: var(--sx-space-2xs);
    }

    [xl-margin="xs"] {
      margin: var(--sx-space-xs);
    }

    [xl-margin="sm"] {
      margin: var(--sx-space-sm);
    }

    [xl-margin="md"] {
      margin: var(--sx-space-md);
    }

    [xl-margin="lg"] {
      margin: var(--sx-space-lg);
    }

    [xl-margin="xl"] {
      margin: var(--sx-space-xl);
    }

    [xl-margin="2xl"] {
      margin: var(--sx-space-2xl);
    }

    [xl-margin="3xl"] {
      margin: var(--sx-space-3xl);
    }

    [xl-margin="auto"] {
      margin: auto;
    }

    [xl-margin-x="0"] {
      margin-inline: 0;
    }

    [xl-margin-x="2xs"] {
      margin-inline: var(--sx-space-2xs);
    }

    [xl-margin-x="xs"] {
      margin-inline: var(--sx-space-xs);
    }

    [xl-margin-x="sm"] {
      margin-inline: var(--sx-space-sm);
    }

    [xl-margin-x="md"] {
      margin-inline: var(--sx-space-md);
    }

    [xl-margin-x="lg"] {
      margin-inline: var(--sx-space-lg);
    }

    [xl-margin-x="xl"] {
      margin-inline: var(--sx-space-xl);
    }

    [xl-margin-x="2xl"] {
      margin-inline: var(--sx-space-2xl);
    }

    [xl-margin-x="3xl"] {
      margin-inline: var(--sx-space-3xl);
    }

    [xl-margin-x="auto"] {
      margin-inline: auto;
    }

    [xl-margin-y="0"] {
      margin-block: 0;
    }

    [xl-margin-y="2xs"] {
      margin-block: var(--sx-space-2xs);
    }

    [xl-margin-y="xs"] {
      margin-block: var(--sx-space-xs);
    }

    [xl-margin-y="sm"] {
      margin-block: var(--sx-space-sm);
    }

    [xl-margin-y="md"] {
      margin-block: var(--sx-space-md);
    }

    [xl-margin-y="lg"] {
      margin-block: var(--sx-space-lg);
    }

    [xl-margin-y="xl"] {
      margin-block: var(--sx-space-xl);
    }

    [xl-margin-y="2xl"] {
      margin-block: var(--sx-space-2xl);
    }

    [xl-margin-y="3xl"] {
      margin-block: var(--sx-space-3xl);
    }

    [xl-margin-y="auto"] {
      margin-block: auto;
    }

    [xl-margin-top="0"] {
      margin-top: 0;
    }

    [xl-margin-top="2xs"] {
      margin-top: var(--sx-space-2xs);
    }

    [xl-margin-top="xs"] {
      margin-top: var(--sx-space-xs);
    }

    [xl-margin-top="sm"] {
      margin-top: var(--sx-space-sm);
    }

    [xl-margin-top="md"] {
      margin-top: var(--sx-space-md);
    }

    [xl-margin-top="lg"] {
      margin-top: var(--sx-space-lg);
    }

    [xl-margin-top="xl"] {
      margin-top: var(--sx-space-xl);
    }

    [xl-margin-top="2xl"] {
      margin-top: var(--sx-space-2xl);
    }

    [xl-margin-top="3xl"] {
      margin-top: var(--sx-space-3xl);
    }

    [xl-margin-top="auto"] {
      margin-top: auto;
    }

    [xl-margin-right="0"] {
      margin-right: 0;
    }

    [xl-margin-right="2xs"] {
      margin-right: var(--sx-space-2xs);
    }

    [xl-margin-right="xs"] {
      margin-right: var(--sx-space-xs);
    }

    [xl-margin-right="sm"] {
      margin-right: var(--sx-space-sm);
    }

    [xl-margin-right="md"] {
      margin-right: var(--sx-space-md);
    }

    [xl-margin-right="lg"] {
      margin-right: var(--sx-space-lg);
    }

    [xl-margin-right="xl"] {
      margin-right: var(--sx-space-xl);
    }

    [xl-margin-right="2xl"] {
      margin-right: var(--sx-space-2xl);
    }

    [xl-margin-right="3xl"] {
      margin-right: var(--sx-space-3xl);
    }

    [xl-margin-right="auto"] {
      margin-right: auto;
    }

    [xl-margin-bottom="0"] {
      margin-bottom: 0;
    }

    [xl-margin-bottom="2xs"] {
      margin-bottom: var(--sx-space-2xs);
    }

    [xl-margin-bottom="xs"] {
      margin-bottom: var(--sx-space-xs);
    }

    [xl-margin-bottom="sm"] {
      margin-bottom: var(--sx-space-sm);
    }

    [xl-margin-bottom="md"] {
      margin-bottom: var(--sx-space-md);
    }

    [xl-margin-bottom="lg"] {
      margin-bottom: var(--sx-space-lg);
    }

    [xl-margin-bottom="xl"] {
      margin-bottom: var(--sx-space-xl);
    }

    [xl-margin-bottom="2xl"] {
      margin-bottom: var(--sx-space-2xl);
    }

    [xl-margin-bottom="3xl"] {
      margin-bottom: var(--sx-space-3xl);
    }

    [xl-margin-bottom="auto"] {
      margin-bottom: auto;
    }

    [xl-margin-left="0"] {
      margin-left: 0;
    }

    [xl-margin-left="2xs"] {
      margin-left: var(--sx-space-2xs);
    }

    [xl-margin-left="xs"] {
      margin-left: var(--sx-space-xs);
    }

    [xl-margin-left="sm"] {
      margin-left: var(--sx-space-sm);
    }

    [xl-margin-left="md"] {
      margin-left: var(--sx-space-md);
    }

    [xl-margin-left="lg"] {
      margin-left: var(--sx-space-lg);
    }

    [xl-margin-left="xl"] {
      margin-left: var(--sx-space-xl);
    }

    [xl-margin-left="2xl"] {
      margin-left: var(--sx-space-2xl);
    }

    [xl-margin-left="3xl"] {
      margin-left: var(--sx-space-3xl);
    }

    [xl-margin-left="auto"] {
      margin-left: auto;
    }

    [xl-pad="0"] {
      padding: 0;
    }

    [xl-pad="2xs"] {
      padding: var(--sx-space-2xs);
    }

    [xl-pad="xs"] {
      padding: var(--sx-space-xs);
    }

    [xl-pad="sm"] {
      padding: var(--sx-space-sm);
    }

    [xl-pad="md"] {
      padding: var(--sx-space-md);
    }

    [xl-pad="lg"] {
      padding: var(--sx-space-lg);
    }

    [xl-pad="xl"] {
      padding: var(--sx-space-xl);
    }

    [xl-pad="2xl"] {
      padding: var(--sx-space-2xl);
    }

    [xl-pad="3xl"] {
      padding: var(--sx-space-3xl);
    }

    [xl-pad="auto"] {
      padding: auto;
    }

    [xl-pad-x="0"] {
      padding-inline: 0;
    }

    [xl-pad-x="2xs"] {
      padding-inline: var(--sx-space-2xs);
    }

    [xl-pad-x="xs"] {
      padding-inline: var(--sx-space-xs);
    }

    [xl-pad-x="sm"] {
      padding-inline: var(--sx-space-sm);
    }

    [xl-pad-x="md"] {
      padding-inline: var(--sx-space-md);
    }

    [xl-pad-x="lg"] {
      padding-inline: var(--sx-space-lg);
    }

    [xl-pad-x="xl"] {
      padding-inline: var(--sx-space-xl);
    }

    [xl-pad-x="2xl"] {
      padding-inline: var(--sx-space-2xl);
    }

    [xl-pad-x="3xl"] {
      padding-inline: var(--sx-space-3xl);
    }

    [xl-pad-x="auto"] {
      padding-inline: auto;
    }

    [xl-pad-y="0"] {
      padding-block: 0;
    }

    [xl-pad-y="2xs"] {
      padding-block: var(--sx-space-2xs);
    }

    [xl-pad-y="xs"] {
      padding-block: var(--sx-space-xs);
    }

    [xl-pad-y="sm"] {
      padding-block: var(--sx-space-sm);
    }

    [xl-pad-y="md"] {
      padding-block: var(--sx-space-md);
    }

    [xl-pad-y="lg"] {
      padding-block: var(--sx-space-lg);
    }

    [xl-pad-y="xl"] {
      padding-block: var(--sx-space-xl);
    }

    [xl-pad-y="2xl"] {
      padding-block: var(--sx-space-2xl);
    }

    [xl-pad-y="3xl"] {
      padding-block: var(--sx-space-3xl);
    }

    [xl-pad-y="auto"] {
      padding-block: auto;
    }

    [xl-pad-top="0"] {
      padding-top: 0;
    }

    [xl-pad-top="2xs"] {
      padding-top: var(--sx-space-2xs);
    }

    [xl-pad-top="xs"] {
      padding-top: var(--sx-space-xs);
    }

    [xl-pad-top="sm"] {
      padding-top: var(--sx-space-sm);
    }

    [xl-pad-top="md"] {
      padding-top: var(--sx-space-md);
    }

    [xl-pad-top="lg"] {
      padding-top: var(--sx-space-lg);
    }

    [xl-pad-top="xl"] {
      padding-top: var(--sx-space-xl);
    }

    [xl-pad-top="2xl"] {
      padding-top: var(--sx-space-2xl);
    }

    [xl-pad-top="3xl"] {
      padding-top: var(--sx-space-3xl);
    }

    [xl-pad-top="auto"] {
      padding-top: auto;
    }

    [xl-pad-right="0"] {
      padding-right: 0;
    }

    [xl-pad-right="2xs"] {
      padding-right: var(--sx-space-2xs);
    }

    [xl-pad-right="xs"] {
      padding-right: var(--sx-space-xs);
    }

    [xl-pad-right="sm"] {
      padding-right: var(--sx-space-sm);
    }

    [xl-pad-right="md"] {
      padding-right: var(--sx-space-md);
    }

    [xl-pad-right="lg"] {
      padding-right: var(--sx-space-lg);
    }

    [xl-pad-right="xl"] {
      padding-right: var(--sx-space-xl);
    }

    [xl-pad-right="2xl"] {
      padding-right: var(--sx-space-2xl);
    }

    [xl-pad-right="3xl"] {
      padding-right: var(--sx-space-3xl);
    }

    [xl-pad-right="auto"] {
      padding-right: auto;
    }

    [xl-pad-bottom="0"] {
      padding-bottom: 0;
    }

    [xl-pad-bottom="2xs"] {
      padding-bottom: var(--sx-space-2xs);
    }

    [xl-pad-bottom="xs"] {
      padding-bottom: var(--sx-space-xs);
    }

    [xl-pad-bottom="sm"] {
      padding-bottom: var(--sx-space-sm);
    }

    [xl-pad-bottom="md"] {
      padding-bottom: var(--sx-space-md);
    }

    [xl-pad-bottom="lg"] {
      padding-bottom: var(--sx-space-lg);
    }

    [xl-pad-bottom="xl"] {
      padding-bottom: var(--sx-space-xl);
    }

    [xl-pad-bottom="2xl"] {
      padding-bottom: var(--sx-space-2xl);
    }

    [xl-pad-bottom="3xl"] {
      padding-bottom: var(--sx-space-3xl);
    }

    [xl-pad-bottom="auto"] {
      padding-bottom: auto;
    }

    [xl-pad-left="0"] {
      padding-left: 0;
    }

    [xl-pad-left="2xs"] {
      padding-left: var(--sx-space-2xs);
    }

    [xl-pad-left="xs"] {
      padding-left: var(--sx-space-xs);
    }

    [xl-pad-left="sm"] {
      padding-left: var(--sx-space-sm);
    }

    [xl-pad-left="md"] {
      padding-left: var(--sx-space-md);
    }

    [xl-pad-left="lg"] {
      padding-left: var(--sx-space-lg);
    }

    [xl-pad-left="xl"] {
      padding-left: var(--sx-space-xl);
    }

    [xl-pad-left="2xl"] {
      padding-left: var(--sx-space-2xl);
    }

    [xl-pad-left="3xl"] {
      padding-left: var(--sx-space-3xl);
    }

    [xl-pad-left="auto"] {
      padding-left: auto;
    }

    [xl-gap="0"] {
      gap: 0;
    }

    [xl-gap="2xs"] {
      gap: var(--sx-space-2xs);
    }

    [xl-gap="xs"] {
      gap: var(--sx-space-xs);
    }

    [xl-gap="sm"] {
      gap: var(--sx-space-sm);
    }

    [xl-gap="md"] {
      gap: var(--sx-space-md);
    }

    [xl-gap="lg"] {
      gap: var(--sx-space-lg);
    }

    [xl-gap="xl"] {
      gap: var(--sx-space-xl);
    }

    [xl-gap="2xl"] {
      gap: var(--sx-space-2xl);
    }

    [xl-gap="3xl"] {
      gap: var(--sx-space-3xl);
    }

    [xl-gap="auto"] {
      gap: auto;
    }

    [xl-gap-x="0"] {
      column-gap: 0;
    }

    [xl-gap-x="2xs"] {
      column-gap: var(--sx-space-2xs);
    }

    [xl-gap-x="xs"] {
      column-gap: var(--sx-space-xs);
    }

    [xl-gap-x="sm"] {
      column-gap: var(--sx-space-sm);
    }

    [xl-gap-x="md"] {
      column-gap: var(--sx-space-md);
    }

    [xl-gap-x="lg"] {
      column-gap: var(--sx-space-lg);
    }

    [xl-gap-x="xl"] {
      column-gap: var(--sx-space-xl);
    }

    [xl-gap-x="2xl"] {
      column-gap: var(--sx-space-2xl);
    }

    [xl-gap-x="3xl"] {
      column-gap: var(--sx-space-3xl);
    }

    [xl-gap-x="auto"] {
      column-gap: auto;
    }

    [xl-gap-y="0"] {
      row-gap: 0;
    }

    [xl-gap-y="2xs"] {
      row-gap: var(--sx-space-2xs);
    }

    [xl-gap-y="xs"] {
      row-gap: var(--sx-space-xs);
    }

    [xl-gap-y="sm"] {
      row-gap: var(--sx-space-sm);
    }

    [xl-gap-y="md"] {
      row-gap: var(--sx-space-md);
    }

    [xl-gap-y="lg"] {
      row-gap: var(--sx-space-lg);
    }

    [xl-gap-y="xl"] {
      row-gap: var(--sx-space-xl);
    }

    [xl-gap-y="2xl"] {
      row-gap: var(--sx-space-2xl);
    }

    [xl-gap-y="3xl"] {
      row-gap: var(--sx-space-3xl);
    }

    [xl-gap-y="auto"] {
      row-gap: auto;
    }

    [xl-width="0"] {
      width: 0;
    }

    [xl-width="auto"] {
      width: auto;
    }

    [xl-width="full"] {
      width: 100%;
    }

    [xl-width="min"] {
      width: min-content;
    }

    [xl-width="max"] {
      width: max-content;
    }

    [xl-width="fit"] {
      width: fit-content;
    }

    [xl-width="1/2"] {
      width: 50%;
    }

    [xl-width="1/3"] {
      width: 33.333333%;
    }

    [xl-width="2/3"] {
      width: 66.666667%;
    }

    [xl-width="1/4"] {
      width: 25%;
    }

    [xl-width="3/4"] {
      width: 75%;
    }

    [xl-width="1/5"] {
      width: 20%;
    }

    [xl-width="2/5"] {
      width: 40%;
    }

    [xl-width="3/5"] {
      width: 60%;
    }

    [xl-width="4/5"] {
      width: 80%;
    }

    [xl-width="xs"] {
      width: var(--sx-space-xs);
    }

    [xl-width="sm"] {
      width: var(--sx-space-sm);
    }

    [xl-width="md"] {
      width: var(--sx-space-md);
    }

    [xl-width="lg"] {
      width: var(--sx-space-lg);
    }

    [xl-width="xl"] {
      width: var(--sx-space-xl);
    }

    [xl-width="2xl"] {
      width: var(--sx-space-2xl);
    }

    [xl-width="3xl"] {
      width: var(--sx-space-3xl);
    }

    [xl-width="screen"] {
      width: 100vw;
    }

    [xl-height="0"] {
      height: 0;
    }

    [xl-height="auto"] {
      height: auto;
    }

    [xl-height="full"] {
      height: 100%;
    }

    [xl-height="min"] {
      height: min-content;
    }

    [xl-height="max"] {
      height: max-content;
    }

    [xl-height="fit"] {
      height: fit-content;
    }

    [xl-height="1/2"] {
      height: 50%;
    }

    [xl-height="1/3"] {
      height: 33.333333%;
    }

    [xl-height="2/3"] {
      height: 66.666667%;
    }

    [xl-height="1/4"] {
      height: 25%;
    }

    [xl-height="3/4"] {
      height: 75%;
    }

    [xl-height="1/5"] {
      height: 20%;
    }

    [xl-height="2/5"] {
      height: 40%;
    }

    [xl-height="3/5"] {
      height: 60%;
    }

    [xl-height="4/5"] {
      height: 80%;
    }

    [xl-height="xs"] {
      height: var(--sx-space-xs);
    }

    [xl-height="sm"] {
      height: var(--sx-space-sm);
    }

    [xl-height="md"] {
      height: var(--sx-space-md);
    }

    [xl-height="lg"] {
      height: var(--sx-space-lg);
    }

    [xl-height="xl"] {
      height: var(--sx-space-xl);
    }

    [xl-height="2xl"] {
      height: var(--sx-space-2xl);
    }

    [xl-height="3xl"] {
      height: var(--sx-space-3xl);
    }

    [xl-height="screen"] {
      height: 100vh;
    }

    [xl-min-w="0"] {
      min-width: 0;
    }

    [xl-min-w="none"] {
      min-width: none;
    }

    [xl-min-w="full"] {
      min-width: 100%;
    }

    [xl-min-w="min"] {
      min-width: min-content;
    }

    [xl-min-w="max"] {
      min-width: max-content;
    }

    [xl-min-w="fit"] {
      min-width: fit-content;
    }

    [xl-min-w="xs"] {
      min-width: 20rem;
    }

    [xl-min-w="sm"] {
      min-width: 24rem;
    }

    [xl-min-w="md"] {
      min-width: 28rem;
    }

    [xl-min-w="lg"] {
      min-width: 32rem;
    }

    [xl-min-w="xl"] {
      min-width: 36rem;
    }

    [xl-min-w="2xl"] {
      min-width: 42rem;
    }

    [xl-min-w="3xl"] {
      min-width: 48rem;
    }

    [xl-min-w="4xl"] {
      min-width: 56rem;
    }

    [xl-min-w="5xl"] {
      min-width: 64rem;
    }

    [xl-min-w="6xl"] {
      min-width: 72rem;
    }

    [xl-min-w="7xl"] {
      min-width: 80rem;
    }

    [xl-min-w="prose"] {
      min-width: 65ch;
    }

    [xl-min-w="screen"] {
      min-width: 100vw;
    }

    [xl-max-w="0"] {
      max-width: 0;
    }

    [xl-max-w="none"] {
      max-width: none;
    }

    [xl-max-w="full"] {
      max-width: 100%;
    }

    [xl-max-w="min"] {
      max-width: min-content;
    }

    [xl-max-w="max"] {
      max-width: max-content;
    }

    [xl-max-w="fit"] {
      max-width: fit-content;
    }

    [xl-max-w="xs"] {
      max-width: 20rem;
    }

    [xl-max-w="sm"] {
      max-width: 24rem;
    }

    [xl-max-w="md"] {
      max-width: 28rem;
    }

    [xl-max-w="lg"] {
      max-width: 32rem;
    }

    [xl-max-w="xl"] {
      max-width: 36rem;
    }

    [xl-max-w="2xl"] {
      max-width: 42rem;
    }

    [xl-max-w="3xl"] {
      max-width: 48rem;
    }

    [xl-max-w="4xl"] {
      max-width: 56rem;
    }

    [xl-max-w="5xl"] {
      max-width: 64rem;
    }

    [xl-max-w="6xl"] {
      max-width: 72rem;
    }

    [xl-max-w="7xl"] {
      max-width: 80rem;
    }

    [xl-max-w="prose"] {
      max-width: 65ch;
    }

    [xl-max-w="screen"] {
      max-width: 100vw;
    }

    [xl-min-h="0"] {
      min-height: 0;
    }

    [xl-min-h="none"] {
      min-height: none;
    }

    [xl-min-h="full"] {
      min-height: 100%;
    }

    [xl-min-h="min"] {
      min-height: min-content;
    }

    [xl-min-h="max"] {
      min-height: max-content;
    }

    [xl-min-h="fit"] {
      min-height: fit-content;
    }

    [xl-min-h="xs"] {
      min-height: 20rem;
    }

    [xl-min-h="sm"] {
      min-height: 24rem;
    }

    [xl-min-h="md"] {
      min-height: 28rem;
    }

    [xl-min-h="lg"] {
      min-height: 32rem;
    }

    [xl-min-h="xl"] {
      min-height: 36rem;
    }

    [xl-min-h="2xl"] {
      min-height: 42rem;
    }

    [xl-min-h="3xl"] {
      min-height: 48rem;
    }

    [xl-min-h="4xl"] {
      min-height: 56rem;
    }

    [xl-min-h="5xl"] {
      min-height: 64rem;
    }

    [xl-min-h="6xl"] {
      min-height: 72rem;
    }

    [xl-min-h="7xl"] {
      min-height: 80rem;
    }

    [xl-min-h="prose"] {
      min-height: 65ch;
    }

    [xl-min-h="screen"] {
      min-height: 100vh;
    }

    [xl-max-h="0"] {
      max-height: 0;
    }

    [xl-max-h="none"] {
      max-height: none;
    }

    [xl-max-h="full"] {
      max-height: 100%;
    }

    [xl-max-h="min"] {
      max-height: min-content;
    }

    [xl-max-h="max"] {
      max-height: max-content;
    }

    [xl-max-h="fit"] {
      max-height: fit-content;
    }

    [xl-max-h="xs"] {
      max-height: 20rem;
    }

    [xl-max-h="sm"] {
      max-height: 24rem;
    }

    [xl-max-h="md"] {
      max-height: 28rem;
    }

    [xl-max-h="lg"] {
      max-height: 32rem;
    }

    [xl-max-h="xl"] {
      max-height: 36rem;
    }

    [xl-max-h="2xl"] {
      max-height: 42rem;
    }

    [xl-max-h="3xl"] {
      max-height: 48rem;
    }

    [xl-max-h="4xl"] {
      max-height: 56rem;
    }

    [xl-max-h="5xl"] {
      max-height: 64rem;
    }

    [xl-max-h="6xl"] {
      max-height: 72rem;
    }

    [xl-max-h="7xl"] {
      max-height: 80rem;
    }

    [xl-max-h="prose"] {
      max-height: 65ch;
    }

    [xl-max-h="screen"] {
      max-height: 100vh;
    }

    [xl-border="0"] {
      border-width: 0;
      border-style: none;
    }

    [xl-border="1"] {
      border-width: 1px;
      border-style: solid;
    }

    [xl-border="2"] {
      border-width: 2px;
      border-style: solid;
    }

    [xl-border="4"] {
      border-width: 4px;
      border-style: solid;
    }

    [xl-border="8"] {
      border-width: 8px;
      border-style: solid;
    }

    [xl-border-t="0"] {
      border-top-width: 0;
      border-top-style: none;
    }

    [xl-border-t="1"] {
      border-top-width: 1px;
      border-top-style: solid;
    }

    [xl-border-t="2"] {
      border-top-width: 2px;
      border-top-style: solid;
    }

    [xl-border-t="4"] {
      border-top-width: 4px;
      border-top-style: solid;
    }

    [xl-border-t="8"] {
      border-top-width: 8px;
      border-top-style: solid;
    }

    [xl-border-r="0"] {
      border-right-width: 0;
      border-right-style: none;
    }

    [xl-border-r="1"] {
      border-right-width: 1px;
      border-right-style: solid;
    }

    [xl-border-r="2"] {
      border-right-width: 2px;
      border-right-style: solid;
    }

    [xl-border-r="4"] {
      border-right-width: 4px;
      border-right-style: solid;
    }

    [xl-border-r="8"] {
      border-right-width: 8px;
      border-right-style: solid;
    }

    [xl-border-b="0"] {
      border-bottom-width: 0;
      border-bottom-style: none;
    }

    [xl-border-b="1"] {
      border-bottom-width: 1px;
      border-bottom-style: solid;
    }

    [xl-border-b="2"] {
      border-bottom-width: 2px;
      border-bottom-style: solid;
    }

    [xl-border-b="4"] {
      border-bottom-width: 4px;
      border-bottom-style: solid;
    }

    [xl-border-b="8"] {
      border-bottom-width: 8px;
      border-bottom-style: solid;
    }

    [xl-border-l="0"] {
      border-left-width: 0;
      border-left-style: none;
    }

    [xl-border-l="1"] {
      border-left-width: 1px;
      border-left-style: solid;
    }

    [xl-border-l="2"] {
      border-left-width: 2px;
      border-left-style: solid;
    }

    [xl-border-l="4"] {
      border-left-width: 4px;
      border-left-style: solid;
    }

    [xl-border-l="8"] {
      border-left-width: 8px;
      border-left-style: solid;
    }

    [xl-border-style="solid"] {
      border-style: solid;
    }

    [xl-border-style="dashed"] {
      border-style: dashed;
    }

    [xl-border-style="dotted"] {
      border-style: dotted;
    }

    [xl-border-style="double"] {
      border-style: double;
    }

    [xl-border-style="none"] {
      border-style: none;
    }

    [xl-border-style="hidden"] {
      border-style: hidden;
    }

    [xl-outline="0"] {
      outline-width: 0;
    }

    [xl-outline="1"] {
      outline-width: 1px;
    }

    [xl-outline="2"] {
      outline-width: 2px;
    }

    [xl-outline="4"] {
      outline-width: 4px;
    }

    [xl-outline="none"] {
      outline: 2px solid transparent;
      outline-offset: 2px;
    }

    [xl-ring="0"] {
      box-shadow: none;
    }

    [xl-ring="1"] {
      box-shadow: 0 0 0 1px var(--sx-surface-ring);
    }

    [xl-ring="2"] {
      box-shadow: 0 0 0 2px var(--sx-surface-ring);
    }

    [xl-ring="4"] {
      box-shadow: 0 0 0 4px var(--sx-surface-ring);
    }

    [xl-text-align="left"] {
      text-align: left;
    }

    [xl-text-align="center"] {
      text-align: center;
    }

    [xl-text-align="right"] {
      text-align: right;
    }

    [xl-text-align="justify"] {
      text-align: justify;
    }

    [xl-text-decoration="underline"] {
      text-decoration-line: underline;
    }

    [xl-text-decoration="overline"] {
      text-decoration-line: overline;
    }

    [xl-text-decoration="line-through"] {
      text-decoration-line: line-through;
    }

    [xl-text-decoration="none"] {
      text-decoration-line: none;
    }

    [xl-text-transform="uppercase"] {
      text-transform: uppercase;
    }

    [xl-text-transform="lowercase"] {
      text-transform: lowercase;
    }

    [xl-text-transform="capitalize"] {
      text-transform: capitalize;
    }

    [xl-text-transform="none"] {
      text-transform: none;
    }

    [xl-text-overflow="truncate"] {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    [xl-text-overflow="ellipsis"] {
      text-overflow: ellipsis;
    }

    [xl-text-overflow="clip"] {
      text-overflow: clip;
    }

    [xl-whitespace="normal"] {
      white-space: normal;
    }

    [xl-whitespace="nowrap"] {
      white-space: nowrap;
    }

    [xl-whitespace="pre"] {
      white-space: pre;
    }

    [xl-whitespace="pre-line"] {
      white-space: pre-line;
    }

    [xl-whitespace="pre-wrap"] {
      white-space: pre-wrap;
    }

    [xl-whitespace="break-spaces"] {
      white-space: break-spaces;
    }

    [xl-word-break="normal"] {
      overflow-wrap: normal;
      word-break: normal;
    }

    [xl-word-break="words"] {
      overflow-wrap: break-word;
    }

    [xl-word-break="all"] {
      word-break: break-all;
    }

    [xl-word-break="keep"] {
      word-break: keep-all;
    }

    [xl-tracking="tighter"] {
      letter-spacing: -0.05em;
    }

    [xl-tracking="tight"] {
      letter-spacing: -0.025em;
    }

    [xl-tracking="normal"] {
      letter-spacing: 0em;
    }

    [xl-tracking="wide"] {
      letter-spacing: 0.025em;
    }

    [xl-tracking="wider"] {
      letter-spacing: 0.05em;
    }

    [xl-tracking="widest"] {
      letter-spacing: 0.1em;
    }

    [xl-tracking="custom"] {
      letter-spacing: var(--sx-tracking);
    }

    [xl-leading="none"] {
      line-height: 1;
    }

    [xl-leading="tight"] {
      line-height: 1.25;
    }

    [xl-leading="snug"] {
      line-height: 1.375;
    }

    [xl-leading="normal"] {
      line-height: 1.5;
    }

    [xl-leading="relaxed"] {
      line-height: 1.625;
    }

    [xl-leading="loose"] {
      line-height: 2;
    }

    [xl-leading="custom"] {
      line-height: var(--sx-leading);
    }

    [xl-font-style="italic"] {
      font-style: italic;
    }

    [xl-font-style="normal"] {
      font-style: normal;
    }

    [xl-font-variant="tabular-nums"] {
      font-variant-numeric: tabular-nums;
    }

    [xl-font-variant="proportional-nums"] {
      font-variant-numeric: proportional-nums;
    }

    [xl-font-variant="oldstyle-nums"] {
      font-variant-numeric: oldstyle-nums;
    }

    [xl-font-variant="lining-nums"] {
      font-variant-numeric: lining-nums;
    }

    [xl-font-variant="small-caps"] {
      font-variant-caps: small-caps;
    }

    [xl-font-variant="normal"] {
      font-variant: normal;
    }

    [xl-list-style="none"] {
      list-style-type: none;
    }

    [xl-list-style="disc"] {
      list-style-type: disc;
    }

    [xl-list-style="decimal"] {
      list-style-type: decimal;
    }

    [xl-list-style="inside"] {
      list-style-position: inside;
    }

    [xl-list-style="outside"] {
      list-style-position: outside;
    }

    [xl-opacity="0"] {
      opacity: 0;
    }

    [xl-opacity="5"] {
      opacity: 0.05;
    }

    [xl-opacity="10"] {
      opacity: 0.1;
    }

    [xl-opacity="20"] {
      opacity: 0.2;
    }

    [xl-opacity="25"] {
      opacity: 0.25;
    }

    [xl-opacity="30"] {
      opacity: 0.3;
    }

    [xl-opacity="40"] {
      opacity: 0.4;
    }

    [xl-opacity="50"] {
      opacity: 0.5;
    }

    [xl-opacity="60"] {
      opacity: 0.6;
    }

    [xl-opacity="70"] {
      opacity: 0.7;
    }

    [xl-opacity="75"] {
      opacity: 0.75;
    }

    [xl-opacity="80"] {
      opacity: 0.8;
    }

    [xl-opacity="90"] {
      opacity: 0.9;
    }

    [xl-opacity="95"] {
      opacity: 0.95;
    }

    [xl-opacity="100"] {
      opacity: 1;
    }

    [xl-shadow="none"] {
      box-shadow: none;
    }

    [xl-shadow="sm"] {
      box-shadow: var(--sx-shadow-sm);
    }

    [xl-shadow="md"] {
      box-shadow: var(--sx-shadow-md);
    }

    [xl-shadow="lg"] {
      box-shadow: var(--sx-shadow-lg);
    }

    [xl-mix-blend="normal"] {
      mix-blend-mode: normal;
    }

    [xl-mix-blend="multiply"] {
      mix-blend-mode: multiply;
    }

    [xl-mix-blend="screen"] {
      mix-blend-mode: screen;
    }

    [xl-mix-blend="overlay"] {
      mix-blend-mode: overlay;
    }

    [xl-backdrop-blur="none"] {
      backdrop-filter: none;
    }

    [xl-backdrop-blur="sm"] {
      backdrop-filter: blur(4px);
    }

    [xl-backdrop-blur="md"] {
      backdrop-filter: blur(12px);
    }

    [xl-backdrop-blur="lg"] {
      backdrop-filter: blur(16px);
    }

    [xl-backdrop-blur="xl"] {
      backdrop-filter: blur(24px);
    }
  }
}