.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);
}