/* Copyright (c) Juan-Pablo Scaletti <juanpablo@jpscaletti.com> */
.jxui-button, button.jxui-button, .jxui-button, a.jxui-button[href] {
  align-items: center;
  appearance: button;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  flex-wrap: nowrap;
  font-family: inherit;
  justify-content: center;
  line-height: 1;
  min-inline-size: min-content;
  overflow: hidden;
  pointer-events: auto;
  position: relative;
  text-align: center;
  text-decoration: none !important;
  touch-action: manipulation;
  user-select: none;
  transition-duration: 100ms;
  transition-property: color,background-color,box-shadow,outline;
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  vertical-align: middle;
  white-space: nowrap;

  font-weight: var(--btn-font-weight, 600);
  border-radius: var(--btn-radius);
  color: var(--btn-fg);
  background-color: var(--btn-bg);
  border: none;
  outline-width: 1px;
  outline-style: solid;
  outline-color: color-mix(in srgb, var(--btn-border) 80%, transparent);
  outline-offset: 0;
  box-shadow: var(--btn-shadow);
}
.jxui-button * {
  user-select: none;
  pointer-events: none;
}

@media (hover: hover) {
  .jxui-button:is(:hover,:focus-visible):not([disabled],[data-disabled]) {
    background-color: var(--btn-bg-hover, var(--btn-bg));
    outline-color: var(--btn-border-hover, var(--btn-border));
    box-shadow: var(--btn-shadow-hover, var(--btn-shadow));
    text-decoration: none;
  }
}

.jxui-button:focus-visible:not([disabled],[data-disabled]) {
  isolation: isolate;
  outline-color: var(--btn-outline);
  outline-width: 4px;
}

.jxui-button:is(:active,[data-active]):not([disabled],[data-disabled]) {
  background-color: var(--btn-bg-active, var(--btn-bg));
  outline-color: var(--btn-border-active, var(--btn-border));
  box-shadow: var(--btn-shadow-active, var(--btn-shadow));
  translate: 0 1px;
  text-decoration: none;
  outline-width: 1px;
}

.jxui-button:is(:disabled,[disabled],[data-disabled]) {
  color: color-mix(in srgb, var(--ui-fg-base) 35%, #fff);
  outline-color: var(--ui-border-disabled);
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  outline: none;
}
.jxui-button[data-var]:is(:disabled,[disabled],[data-disabled]) {
  background-color: color-mix(in srgb, var(--btn-bg) 12%, #fff);
}
@supports (color: color-mix(in lab,red,red)) {
  .jxui-button:is(:disabled,[disabled],[data-disabled]) {
    color: color-mix(in oklab, var(--ui-fg-base) 35%, #fff);
  }
  .jxui-button[data-var]:is(:disabled,[disabled],[data-disabled]) {
    background-color: color-mix(in oklab, var(--btn-bg) 12%, #fff);
  }
}

.jxui-button[aria-busy="true"] {
  color: color-mix(in srgb, var(--ui-fg-base) 60%, #fff);
  cursor: progress;
  pointer-events: none;
  box-shadow: none;
  outline: none;
}

/**************** Variants ****************/

.jxui-button {
  --btn-radius: var(--ui-radius-lg);
  --btn-fg: var(--ui-fg-base);
  --btn-bg: var(--ui-bg-base-100);
  --btn-border: var(--ui-border-default);
  --btn-shadow: var(--ui-shadow-default);
  --btn-outline: var(--ui-outline);

  --btn-bg-hover: color-mix(in srgb, var(--btn-bg), #000 4%);
  --btn-bg-active: color-mix(in srgb, var(--btn-bg), #000 7%);
  --btn-border-active: color-mix(in srgb, var(--btn-bg), #000 14%);
  --btn-shadow-active: inset 1px 2px 4px rgba(30, 30, 30, 0.2), 1px 1px 2px rgba(0, 0, 0, 0.05)
}
@supports (color: color-mix(in lab,red,red)) {
  .jxui-button {
    --btn-bg-hover: color-mix(in oklab, var(--btn-bg), #000 5%);
    --btn-bg-active: color-mix(in oklab, var(--btn-bg), #000 7%);
    --btn-border-active: color-mix(in oklab, var(--btn-bg), #000 14%);
  }
}

.jxui-button[data-var="outline"] {
  --btn-fg: unset;
  --btn-bg: transparent;
  --btn-shadow: none;
}

.jxui-button[data-var="ghost"] {
  --btn-bg: unset;
  --btn-border: transparent;
  --btn-shadow: none;
}
.jxui-button[data-var="ghost"]:focus-visible:not([disabled],[data-disabled]) {
  --btn-border: var(--ui-border-default);
}

.jxui-button[data-var="text"] {
  --btn-fg: var(--ui-blue-600);
  --btn-bg: transparent;
  --btn-border: transparent;
  --btn-shadow: none;
  --btn-bg-hover: transparent;
  --btn-bg-active: transparent;
  --btn-border-active: transparent;
  --btn-shadow-active: none;
  text-underline-offset: 4px;
}
@media (hover: hover) {
  .jxui-button[data-var="text"]:is(:hover,:focus-visible):not([disabled],[data-disabled]) {
    text-decoration: underline !important;
  }
}
.jxui-button[data-var="text"]:is(:active,[data-active]):not([disabled],[data-disabled]) {
  text-decoration: none !important;
}
.jxui-button[data-var="text"]:focus-visible:not([disabled],[data-disabled]) {
  text-decoration: underline !important;
}


.jxui-button[data-var]:not([data-var="outline"],[data-var="ghost"],[data-var="text"]) {
  --btn-border: var(--btn-bg);
  --btn-outline: color-mix(in srgb, var(--btn-border) 50%, transparent);
}

.jxui-button[data-var="primary"] {
  --btn-fg: var(--ui-fg-primary);
  --btn-bg: var(--ui-bg-primary);
}
.jxui-button[data-var="success"] {
  --btn-fg: var(--ui-fg-success);
  --btn-bg: var(--ui-bg-success);
}
.jxui-button[data-var="warning"] {
  --btn-fg: var(--ui-fg-warning);
  --btn-bg: var(--ui-bg-warning);
}
.jxui-button[data-var="critical"] {
  --btn-fg: var(--ui-fg-critical);
  --btn-bg: var(--ui-bg-critical);
}
.jxui-button[data-var="option"] {
  --btn-fg: var(--ui-fg-option);
  --btn-bg: var(--ui-bg-option);
}
.jxui-button[data-var="accent"] {
  --btn-fg: var(--ui-fg-accent);;
  --btn-bg: var(--ui-bg-accent);
}

.jxui-button[data-var="outline-primary"] {
  --btn-bg: var(--ui-bg-primary);
}
.jxui-button[data-var="outline-success"] {
  --btn-bg: var(--ui-bg-success);
}
.jxui-button[data-var="outline-warning"] {
  --btn-bg: var(--ui-bg-warning);
}
.jxui-button[data-var="outline-critical"] {
  --btn-bg: var(--ui-bg-critical);
}
.jxui-button[data-var="outline-option"] {
  --btn-bg: var(--ui-bg-option);
}
.jxui-button[data-var="outline-accent"] {
  --btn-bg: var(--ui-bg-accent);
}

.jxui-button[data-var^="outline-"] {
  background-color: color-mix(in srgb, var(--btn-bg) 10%, transparent);
  --btn-bg-hover: color-mix(in srgb, var(--btn-bg) 20%, transparent);
  --btn-bg-active: color-mix(in srgb, var(--btn-bg) 30%, transparent);
}
@supports (color: color-mix(in lab,red,red)) {
  .jxui-button[data-var^="outline-"] {
    background-color: color-mix(in oklab, var(--btn-bg) 10%, transparent);
    --btn-bg-hover: color-mix(in oklab, var(--btn-bg) 20%, transparent);
    --btn-bg-active: color-mix(in oklab, var(--btn-bg) 30%, transparent);
  }
}

/**************** Sizes ****************/

.jxui-button {
  width: auto;
  flex-shrink: 0;
  flex-grow: 0;
}
.jxui-button[data-size="mini"] {
  font-size: var(--font-size, var(--ui-font-size-xs));
  gap: var(--4px);
  height: var(--28px);
  padding: 0 8px;
}
.jxui-button[data-size="small"] {
  font-size: var(--font-size, var(--ui-font-size-sm));
  gap: var(--6px);
  height: var(--32px);
  padding: 0 12px;
}
.jxui-button[data-size="medium"],
.jxui-button:not([data-size]) {
  font-size: var(--font-size, var(--ui-font-size-base));
  gap: var(--8px);
  height: var(--40px);
  padding: 0 16px;
}
.jxui-button[data-size="large"] {
  font-size: var(--font-size, var(--ui-font-size-lg));
  gap: var(--8px);
  height: var(--48px);
  padding: 0 20px;
}
.jxui-button[data-size="xlarge"] {
  font-size: var(--font-size, var(--ui-font-size-xl));
  gap: var(--10px);
  height: var(--64px);
  padding: 0 24px;
}

/**************** Shapes ****************/

.jxui-button:is([data-shape="square"],[data-shape="circle"]) {
  line-height: 1;
  padding: 0;
  aspect-ratio: 1;
}
.jxui-button:is([data-shape="square"],[data-shape="circle"]):is([data-size="mini"]) {
  width: var(--28px);
  font-size: var(--font-size, var(--ui-font-size-md));
}
.jxui-button:is([data-shape="square"],[data-shape="circle"]):is([data-size="small"]) {
  width: var(--32px);
  font-size: var(--font-size, var(--ui-font-size-lg));
}
.jxui-button:is([data-shape="square"],[data-shape="circle"]):is([data-size="medium"]),
.jxui-button:is([data-shape="square"],[data-shape="circle"]):not([data-size]) {
  width: var(--40px);
  font-size: var(--font-size, var(--ui-font-size-xl));
}
.jxui-button:is([data-shape="square"],[data-shape="circle"]):is([data-size="large"]) {
  width: var(--48px);
  font-size: var(--font-size, var(--ui-font-size-2xl));
}
.jxui-button:is([data-shape="square"],[data-shape="circle"]):is([data-size="xlarge"]) {
  width: var(--64px);
  font-size: var(--font-size, var(--ui-font-size-3xl));
}
.jxui-button[data-shape="circle"] {
  border-radius: 100%;
}
.jxui-button[data-shape="square"] {
  border-radius: var(--ui-radius-base);
}
.jxui-button[data-shape="block"] {
  width: 100%;
}

/**************** Content ****************/

.jxui-button-icon {
  line-height: 1;
  font-size: 1.125em;
}