button {
  --btn-size-xs: 0.6875rem;
  --btn-size-sm: 0.8125rem;
  --btn-size-md: 0.9375rem;
  --btn-size-lg: 1.125rem;
  --btn-size-xl: 1.375rem;
  --btn-size-2xl: 1.75rem;
  --btn-pill: 100vw;
  --btn-fs: var(--btn-size-md);
  --btn-height: calc(var(--btn-fs) * 2.75);
  --btn-bg: var(--color-primary);
  --btn-color: var(--color-text-inverse);
  --btn-width: max-content;
  font-size: var(--btn-fs);
  font-weight: var(--btn-fw, 500);
  height: var(--btn-height);
  place-items: var(--btn-place, center);
  padding-inline: var(--btn-padding-inline, calc(var(--btn-fs) * 1.5));
  padding-block: var(--btn-padding-block, calc(var(--btn-fs) * 0.5));
  border: var(--btn-border, none);
  border-radius: var(--btn-radius, 0.375rem);
  text-decoration: var(--btn-deco, none);
  color: var(--btn-color, currentColor);
  display: var(--btn-display, inline-flex);
  gap: var(--btn-gap, 0.2rem);
  white-space: var(--btn-whitespace, inherit);
  margin: var(--btn-spacing, 0);
  transition: var(--btn-transition, var(--tran-all, all 0.3s cubic-bezier(0.4, 0, 0.2, 1)));
  background-color: var(--btn-bg, var(--btn));
  outline: none;
  width: var(--btn-width);
  display: inline-flex;
  align-items: center;
  line-height: 0cap;
}
button[type] {
  background-color: var(--btn-bg, var(--color-primary));
  --btn-border: solid var(--btn-sg);
}
button[type=submit], button[style*=submit] {
  --btn-bg: var(--color-primary);
  --btn-color: var(--color-text-inverse);
}
button[disabled], button[aria-disabled=true] {
  cursor: var(--btn-cursor, not-allowed);
}
button[disabled]:is(:hover, :focus), button[aria-disabled=true]:is(:hover, :focus) {
  transform: none;
}
button:is(:hover, :focus) {
  filter: var(--btn-hover-filter, brightness(0.85));
  transform: var(--btn-hover-transform, scale(1.03));
  outline: var(--btn-hover-outline, thin);
  outline-offset: var(--line-offset, 1px);
}
button:is(:hover, :focus)[aria-disabled=true] {
  transform: none;
  opacity: var(--btn-opacity, 0.5);
  filter: none;
}
button:focus-visible {
  outline: var(--btn-focus-outline, 2px solid currentColor);
  outline-offset: var(--btn-focus-outline-offset, 1px);
}
button[type=reset] {
  --btn-bg: transparent;
  --btn-color: var(--color-text-secondary);
  --btn-border: var(--color-border) thin solid;
}
button[type=submit] {
  --btn-bg: var(--color-primary);
  --btn-color: var(--color-text-inverse);
  --btn-border: none;
}
button[data-fp-btn~=pill], button[data-btn~=pill], button[data-style~=pill], button.btn-pill {
  border-radius: var(--btn-pill, 100vw);
}
button[data-color=primary] {
  --btn-bg: var(--color-primary);
  --btn-color: var(--color-text-inverse);
}
button[data-color=secondary] {
  --btn-bg: var(--color-secondary);
  --btn-color: var(--color-text-inverse);
}
button[data-color=danger] {
  --btn-bg: var(--color-error);
  --btn-color: var(--color-text-inverse);
}
button[data-color=success] {
  --btn-bg: var(--color-success);
  --btn-color: var(--color-text-inverse);
}
button[data-color=warning] {
  --btn-bg: var(--color-warning);
  --btn-color: var(--color-text-inverse);
}
button[data-color=info] {
  --btn-bg: var(--color-info);
  --btn-color: var(--color-text-inverse);
}
button[data-style~=outline] {
  --btn-bg: transparent;
  --btn-color: currentColor;
  --btn-border: 0.125rem solid currentColor;
}
button[data-style~=outline]:is(:hover, :focus) {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  filter: none;
  outline: 0.025rem solid currentColor;
  outline-offset: 0;
}
button[data-style~=text] {
  --btn-bg: transparent;
  --btn-color: currentColor;
  --btn-border: none;
  --btn-height: unset;
  --btn-width: unset;
  --btn-padding-block: 0.75rem;
  --btn-padding-inline: 0.75rem;
}
button[data-style~=text]:is(:hover, :focus) {
  background-color: color-mix(in srgb, var(--btn-color) 10%, transparent);
  outline: 0.025rem solid var(--btn-color);
  outline-offset: 0;
  filter: none;
}
button[data-style~=icon] {
  padding: unset;
  height: unset;
  --btn-bg: transparent;
  min-width: 1.5rem;
  min-height: 1.5rem;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button[data-btn~=xs],
button .btn-xs {
  --btn-fs: var(--btn-size-xs);
  text-transform: uppercase;
}
button[data-btn~=sm],
button .btn-sm {
  --btn-fs: var(--btn-size-sm);
}
button[data-btn~=md],
button .btn-md {
  --btn-fs: var(--btn-size-md);
}
button[data-btn~=lg],
button .btn-lg {
  --btn-fs: var(--btn-size-lg);
}
button[data-btn~=xl],
button .btn-xl {
  --btn-fs: var(--btn-size-xl);
}
button[data-btn~="2xl"],
button .btn-2xl {
  --btn-fs: var(--btn-size-2xl);
}
button[data-btn~=block],
button .btn-block {
  --btn-width: 100%;
  display: flex;
  justify-content: center;
}
button[data-btn~=text],
button .btn-text {
  --btn-bg: transparent;
  --btn-color: currentColor;
  --btn-border: none;
  --btn-height: unset;
  --btn-width: unset;
  --btn-padding-block: 0.75rem;
  --btn-padding-inline: 0.75rem;
}
button[data-btn~=text]:is(:hover, :focus),
button .btn-text:is(:hover, :focus) {
  background-color: color-mix(in srgb, var(--btn-color) 10%, transparent);
  outline: 0.025rem solid var(--btn-color);
  outline-offset: 0;
  filter: none;
}

/*# sourceMappingURL=button.css.map */