.x-button{-webkit-user-select:none;user-select:none;vertical-align:top;font-family:var(--default-font-family);text-align:center;flex-shrink:0;justify-content:center;align-items:center;font-style:normal;display:inline-flex}.x-button:where([data-disabled],:disabled){--spinner-opacity: 1}.x-button:where([data-loading]){position:relative}.x-button:where(:not([data-variant=text])){height:var(--base-button-height)}.x-button:where([data-variant=text]){box-sizing:content-box;height:fit-content}.x-button:where([data-size="1"]){--base-button-height: var(--space-5);border-radius:max(var(--radius-1),var(--radius-pill))}.x-button:where([data-size="2"],:not([data-size])){--base-button-height: var(--space-6);border-radius:max(var(--radius-2),var(--radius-pill))}.x-button:where([data-size="3"]){--base-button-height: var(--space-7);border-radius:max(var(--radius-3),var(--radius-pill))}.x-button:where([data-size="4"]){--base-button-height: var(--space-8);border-radius:max(var(--radius-4),var(--radius-pill))}:where(:root){--base-button-solid-active-filter: brightness(.92) saturate(1.1);--base-button-solid-high-contrast-hover-filter: contrast(.88) saturate(1.1) brightness(1.1);--base-button-solid-high-contrast-active-filter: contrast(.82) saturate(1.2) brightness(1.16)}:is(.dark,.dark-theme),:is(.dark,.dark-theme) :where(:root:not(.light,.light-theme)){--base-button-solid-active-filter: brightness(1.08);--base-button-solid-high-contrast-hover-filter: contrast(.88) saturate(1.3) brightness(1.18);--base-button-solid-high-contrast-active-filter: brightness(.95) saturate(1.2)}.x-button:where(:not([data-variant]),[data-variant=solid]){background-color:var(--accent-9);color:var(--accent-contrast)}@media(hover:hover){.x-button:where(:not([data-variant]),[data-variant=solid]):where(:hover){background-color:var(--accent-10)}}.x-button:where(:not([data-variant]),[data-variant=solid]):where([data-state=open]){background-color:var(--accent-10)}.x-button:where(:not([data-variant]),[data-variant=solid]):where(:active:not([data-state=open])){background-color:var(--accent-10);filter:var(--base-button-solid-active-filter)}@media(pointer:coarse){.x-button:where(:not([data-variant]),[data-variant=solid]):where(:active:not([data-state=open])){outline:.5em solid var(--accent-a4);outline-offset:0}}.x-button:where(:not([data-variant]),[data-variant=solid]):where(:focus-visible){outline:2px solid var(--focus-8);outline-offset:2px}.x-button:where(:not([data-variant]),[data-variant=solid]):where([data-high-contrast]){background-color:var(--accent-12);color:var(--neutral-1)}@media(hover:hover){.x-button:where(:not([data-variant]),[data-variant=solid]):where([data-high-contrast]):where(:hover){background-color:var(--accent-12);filter:var(--base-button-solid-high-contrast-hover-filter)}}.x-button:where(:not([data-variant]),[data-variant=solid]):where([data-high-contrast]):where([data-state=open]){background-color:var(--accent-12);filter:var(--base-button-solid-high-contrast-hover-filter)}.x-button:where(:not([data-variant]),[data-variant=solid]):where([data-high-contrast]):where(:active:not([data-state=open])){background-color:var(--accent-12);filter:var(--base-button-solid-high-contrast-active-filter)}.x-button:where(:not([data-variant]),[data-variant=solid]):where([data-disabled],:disabled){color:var(--neutral-a8);background-color:var(--neutral-a3);filter:none;outline:none}.x-button:where([data-variant=soft],[data-variant=text],[data-variant=borderless]){color:var(--accent-a11)}.x-button:where([data-variant=soft],[data-variant=text],[data-variant=borderless]):where([data-high-contrast]){color:var(--accent-12)}.x-button:where([data-variant=soft],[data-variant=text],[data-variant=borderless]):where([data-disabled],:disabled){color:var(--neutral-a8);background-color:var(--neutral-a3)}.x-button:where([data-variant=soft]){background-color:var(--accent-a3)}.x-button:where([data-variant=soft]):where(:focus-visible){outline:2px solid var(--accent-8);outline-offset:-1px}@media(hover:hover){.x-button:where([data-variant=soft]):where(:hover){background-color:var(--accent-a4)}}.x-button:where([data-variant=soft]):where([data-state=open]){background-color:var(--accent-a4)}.x-button:where([data-variant=soft]):where(:active:not([data-state=open])){background-color:var(--accent-a5)}.x-button:where([data-variant=soft]):where([data-disabled],:disabled){color:var(--neutral-a8);background-color:var(--neutral-a3)}@media(hover:hover){.x-button:where([data-variant=text],[data-variant=borderless]):where(:hover){background-color:var(--accent-a3)}}.x-button:where([data-variant=text],[data-variant=borderless]):where(:focus-visible){outline:2px solid var(--focus-8);outline-offset:-1px}.x-button:where([data-variant=text],[data-variant=borderless]):where([data-state=open]){background-color:var(--accent-a3)}.x-button:where([data-variant=text],[data-variant=borderless]):where(:active:not([data-state=open])){background-color:var(--accent-a4)}.x-button:where([data-variant=text],[data-variant=borderless]):where([data-disabled],:disabled){color:var(--neutral-a8);background-color:#0000}.x-button:where([data-variant=outline]){box-shadow:inset 0 0 0 1px var(--accent-a8);color:var(--accent-a11)}@media(hover:hover){.x-button:where([data-variant=outline]):where(:hover){background-color:var(--accent-a2)}}.x-button:where([data-variant=outline]):where([data-state=open]){background-color:var(--accent-a2)}.x-button:where([data-variant=outline]):where(:active:not([data-state=open])){background-color:var(--accent-a3)}.x-button:where([data-variant=outline]):where(:focus-visible){outline:2px solid var(--focus-8);outline-offset:-1px}.x-button:where([data-variant=outline]):where([data-high-contrast]){box-shadow:inset 0 0 0 1px var(--accent-a7),inset 0 0 0 1px var(--neutral-a11);color:var(--accent-12)}.x-button:where([data-variant=outline]):where([data-disabled],:disabled){color:var(--neutral-a8);box-shadow:inset 0 0 0 1px var(--neutral-a7);background-color:#0000}.x-button:where([data-variant=surface]){background-color:var(--accent-surface);box-shadow:inset 0 0 0 1px var(--accent-a7);color:var(--accent-a11)}@media(hover:hover){.x-button:where([data-variant=surface]):where(:hover){box-shadow:inset 0 0 0 1px var(--accent-a8)}}.x-button:where([data-variant=surface]):where([data-state=open]){box-shadow:inset 0 0 0 1px var(--accent-a8)}.x-button:where([data-variant=surface]):where(:active:not([data-state=open])){background-color:var(--accent-a3);box-shadow:inset 0 0 0 1px var(--accent-a8)}.x-button:where([data-variant=surface]):where(:focus-visible){outline:2px solid var(--focus-8);outline-offset:-1px}.x-button:where([data-variant=surface]):where([data-high-contrast]){color:var(--accent-12)}.x-button:where([data-variant=surface]):where([data-disabled],:disabled){color:var(--neutral-a8);box-shadow:inset 0 0 0 1px var(--neutral-a6);background-color:var(--neutral-a2)}.x-button:where(:not([data-variant=text])) :where(svg){opacity:.9}.x-button:where([data-variant=text]){padding:var(--button-text-padding-y) var(--button-text-padding-x);--margin-top: 0px;--margin-right: 0px;--margin-bottom: 0px;--margin-left: 0px;--margin-top-override: calc(var(--margin-top) - var(--button-text-padding-y));--margin-right-override: calc(var(--margin-right) - var(--button-text-padding-x));--margin-bottom-override: calc(var(--margin-bottom) - var(--button-text-padding-y));--margin-left-override: calc(var(--margin-left) - var(--button-text-padding-x))}:where(.x-button:where([data-variant=text]))>*{--margin-top-override: initial;--margin-right-override: initial;--margin-bottom-override: initial;--margin-left-override: initial}.x-button:where([data-variant=text]){margin:var(--margin-top-override) var(--margin-right-override) var(--margin-bottom-override) var(--margin-left-override)}.x-button:where([data-size="1"]){gap:var(--space-1);font-size:var(--font-size-1);line-height:var(--line-height-1);letter-spacing:var(--letter-spacing-1)}.x-button:where([data-size="1"]):where(:not([data-variant=text])){padding-left:var(--space-2);padding-right:var(--space-2)}.x-button:where([data-size="1"]):where([data-variant=text]){gap:var(--space-1);--button-text-padding-x: var(--space-2);--button-text-padding-y: var(--space-1)}.x-button:where([data-size="2"],:not([data-size])){gap:var(--space-2);font-size:var(--font-size-2);line-height:var(--line-height-2);letter-spacing:var(--letter-spacing-2)}.x-button:where([data-size="2"],:not([data-size])):where(:not([data-variant=text])){padding-left:var(--space-3);padding-right:var(--space-3)}.x-button:where([data-size="2"],:not([data-size])):where([data-variant=text]){gap:var(--space-1);--button-text-padding-x: var(--space-2);--button-text-padding-y: var(--space-1)}.x-button:where([data-size="3"]){gap:var(--space-3);font-size:var(--font-size-3);line-height:var(--line-height-3);letter-spacing:var(--letter-spacing-3)}.x-button:where([data-size="3"]):where(:not([data-variant=text])){padding-left:var(--space-4);padding-right:var(--space-4)}.x-button:where([data-size="3"]):where([data-variant=text]){gap:var(--space-2);--button-text-padding-x: var(--space-3);--button-text-padding-y: calc(var(--space-1) * 1.5)}.x-button:where([data-size="4"]){gap:var(--space-3);font-size:var(--font-size-4);line-height:var(--line-height-4);letter-spacing:var(--letter-spacing-4)}.x-button:where([data-size="4"]):where(:not([data-variant=text])){padding-left:var(--space-5);padding-right:var(--space-5)}.x-button:where([data-size="4"]):where([data-variant=text]){gap:var(--space-2);--button-text-padding-x: var(--space-4);--button-text-padding-y: var(--space-2)}.x-button:where(:not([data-variant=text])){font-weight:var(--font-weight-medium)}.x-button:where([data-icon]):where(:not([data-variant=text])){aspect-ratio:1;padding-left:0;padding-right:0}.x-button:where([data-icon][data-variant=text]):where([data-size="1"]){--button-text-padding-x: var(--space-1);--button-text-padding-y: var(--space-1)}.x-button:where([data-icon][data-variant=text]):where([data-size="2"]){--button-text-padding-x: calc(var(--space-1) * 1.5);--button-text-padding-y: calc(var(--space-1) * 1.5)}.x-button:where([data-icon][data-variant=text]):where([data-size="3"]){--button-text-padding-x: var(--space-2);--button-text-padding-y: var(--space-2)}.x-button:where([data-icon][data-variant=text]):where([data-size="4"]){--button-text-padding-x: var(--space-3);--button-text-padding-y: var(--space-3)}