.bp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bp-btn-gap, 0.5rem);
  border: var(--bp-btn-border-width, 1px) solid transparent;
  border-radius: var(--bp-btn-radius, 8px);
  padding: var(--bp-btn-padding-md, 0.5rem 0.9rem);
  font-weight: var(--bp-btn-font-weight, 600);
  font-size: var(--bp-btn-font-size-md, 0.95rem);
  min-width: var(--bp-btn-min-width, auto);
  min-height: var(--bp-btn-min-height, auto);
  line-height: 1.1;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  position: relative;
}

.bp-btn:disabled,
.bp-btn[aria-disabled="true"],
.bp-btn[data-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}

.bp-btn:focus-visible {
  outline: none;
  box-shadow: var(--bp-focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.25));
}

.bp-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.bp-btn-sm {
  padding: var(--bp-btn-padding-sm, 0.35rem 0.7rem);
  font-size: var(--bp-btn-font-size-sm, 0.85rem);
}

.bp-btn-md {
  padding: var(--bp-btn-padding-md, 0.5rem 0.9rem);
  font-size: var(--bp-btn-font-size-md, 0.95rem);
}

.bp-btn-lg {
  padding: var(--bp-btn-padding-lg, 0.65rem 1.1rem);
  font-size: var(--bp-btn-font-size-lg, 1.05rem);
}

.bp-btn-block {
  width: 100%;
}

.bp-btn-primary {
  background-color: var(--bp-btn-primary-bg, #1f6feb);
  color: var(--bp-btn-primary-fg, #ffffff);
}

.bp-btn-primary:hover:not(:disabled) {
  background-color: var(--bp-btn-primary-bg-hover, #195fcb);
}

.bp-btn-secondary {
  border-color: var(--bp-btn-secondary-border, #0f172a);
  background-color: var(--bp-btn-secondary-bg, #ffffff);
  color: var(--bp-btn-secondary-fg, #0f172a);
}

.bp-btn-secondary:hover:not(:disabled) {
  background-color: var(--bp-btn-secondary-bg-hover, #f1f5f9);
}

.bp-btn-ghost {
  background-color: transparent;
  color: var(--bp-btn-ghost-fg, #0f172a);
}

.bp-btn-ghost:hover:not(:disabled) {
  background-color: var(--bp-btn-ghost-bg-hover, #e2e8f0);
}

.bp-btn-content {
  display: inline-flex;
  align-items: center;
  gap: var(--bp-btn-gap, 0.5rem);
}

.bp-btn-label {
  display: inline-flex;
  align-items: center;
}

.bp-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bp-btn-icon-size-md, 1.1rem);
  height: var(--bp-btn-icon-size-md, 1.1rem);
}

.bp-btn-sm .bp-btn-icon {
  width: var(--bp-btn-icon-size-sm, 0.95rem);
  height: var(--bp-btn-icon-size-sm, 0.95rem);
}

.bp-btn-lg .bp-btn-icon {
  width: var(--bp-btn-icon-size-lg, 1.25rem);
  height: var(--bp-btn-icon-size-lg, 1.25rem);
}

.bp-btn-loading .bp-btn-content,
.bp-btn[data-state="loading"] .bp-btn-content {
  visibility: hidden;
}

.bp-btn-loading-show-content .bp-btn-content {
  visibility: visible;
}

.bp-btn-loading-content {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--bp-btn-gap, 0.5rem);
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: inherit;
  box-sizing: border-box;
}

.bp-btn-loading .bp-btn-loading-content,
.bp-btn[data-state="loading"] .bp-btn-loading-content {
  display: inline-flex;
  position: absolute;
  inset: 0;
}

.bp-btn-loading-inline .bp-btn-loading-content {
  display: inline-flex;
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  padding: 0;
  margin-left: var(--bp-btn-gap, 0.5rem);
}

.bp-btn-spinner {
  width: var(--bp-btn-spinner-size, 1rem);
  height: var(--bp-btn-spinner-size, 1rem);
  border: var(--bp-btn-spinner-stroke, 2px) solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: bp-btn-spin 0.75s linear infinite;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.bp-btn-loading-label {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

.bp-btn-icon-only {
  padding: 0;
  position: relative;
  width: var(--bp-btn-icon-only-size-md, 2.5rem);
  height: var(--bp-btn-icon-only-size-md, 2.5rem);
}

.bp-btn-icon-only.bp-btn-sm {
  width: var(--bp-btn-icon-only-size-sm, 2.1rem);
  height: var(--bp-btn-icon-only-size-sm, 2.1rem);
}

.bp-btn-icon-only.bp-btn-lg {
  width: var(--bp-btn-icon-only-size-lg, 3rem);
  height: var(--bp-btn-icon-only-size-lg, 3rem);
}

.bp-btn-icon-only.bp-btn-block {
  width: 100%;
}

.bp-btn-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--bp-btn-badge-size, 1.1rem);
  height: var(--bp-btn-badge-size, 1.1rem);
  padding: var(--bp-btn-badge-padding, 0 0.35rem);
  font-size: var(--bp-btn-badge-font-size, 0.65rem);
  line-height: 1;
  border-radius: var(--bp-btn-badge-radius, 999px);
  background-color: var(--bp-btn-badge-bg, var(--bp-danger, #ef4444));
  color: var(--bp-btn-badge-color, #ffffff);
  box-shadow: var(--bp-btn-badge-shadow, 0 0 0 2px var(--bp-surface, #ffffff));
  z-index: 1;
}

.bp-btn-badge-top-right {
  top: var(--bp-btn-badge-offset-y, 0);
  right: var(--bp-btn-badge-offset-x, 0);
  transform: translate(35%, -35%);
}

.bp-btn-badge-top-left {
  top: var(--bp-btn-badge-offset-y, 0);
  left: var(--bp-btn-badge-offset-x, 0);
  transform: translate(-35%, -35%);
}

.bp-btn-badge-bottom-right {
  bottom: var(--bp-btn-badge-offset-y, 0);
  right: var(--bp-btn-badge-offset-x, 0);
  transform: translate(35%, 35%);
}

.bp-btn-badge-bottom-left {
  bottom: var(--bp-btn-badge-offset-y, 0);
  left: var(--bp-btn-badge-offset-x, 0);
  transform: translate(-35%, 35%);
}

.bp-btn-fab {
  border-radius: 999px;
  width: var(--bp-btn-fab-size, 3.25rem);
  height: var(--bp-btn-fab-size, 3.25rem);
  box-shadow: var(--bp-shadow-2, 0 8px 24px rgba(15, 23, 42, 0.12));
}

.bp-btn-fab.bp-btn-fab-extended {
  width: auto;
  padding-inline: var(--bp-btn-fab-extended-padding, 1rem);
}

.bp-btn-fab-floating {
  position: fixed;
  z-index: var(--bp-btn-fab-z-index, 30);
}

.bp-btn-fab-bottom-right {
  bottom: calc(var(--bp-btn-fab-offset-y, 1.5rem) + env(safe-area-inset-bottom, 0px));
  right: calc(var(--bp-btn-fab-offset-x, 1.5rem) + env(safe-area-inset-right, 0px));
}

.bp-btn-fab-bottom-left {
  bottom: calc(var(--bp-btn-fab-offset-y, 1.5rem) + env(safe-area-inset-bottom, 0px));
  left: calc(var(--bp-btn-fab-offset-x, 1.5rem) + env(safe-area-inset-left, 0px));
}

.bp-btn-fab-top-right {
  top: calc(var(--bp-btn-fab-offset-y, 1.5rem) + env(safe-area-inset-top, 0px));
  right: calc(var(--bp-btn-fab-offset-x, 1.5rem) + env(safe-area-inset-right, 0px));
}

.bp-btn-fab-top-left {
  top: calc(var(--bp-btn-fab-offset-y, 1.5rem) + env(safe-area-inset-top, 0px));
  left: calc(var(--bp-btn-fab-offset-x, 1.5rem) + env(safe-area-inset-left, 0px));
}

.bp-btn-pressed {
  border-color: var(--bp-accent, #2563eb);
  background-color: var(--bp-accent-muted, #dbeafe);
  color: var(--bp-accent-strong, #1d4ed8);
}

.bp-btn-confirming {
  border-color: var(--bp-btn-confirm-border, var(--bp-warning, #d97706));
  box-shadow: 0 0 0 var(--bp-btn-confirm-ring-size, 2px) var(--bp-btn-confirm-ring, var(--bp-warning-bg, #ffedd5));
}

.bp-btn-link {
  text-decoration: none;
}

.bp-btn-link[aria-disabled="true"] {
  pointer-events: none;
}

.bp-btn-group {
  display: inline-flex;
  gap: var(--bp-btn-group-gap, 0.5rem);
  flex-wrap: var(--bp-btn-group-wrap, wrap);
  align-items: var(--bp-btn-group-align, stretch);
  justify-content: var(--bp-btn-group-justify, flex-start);
}

.bp-btn-group-vertical {
  flex-direction: column;
}

.bp-btn-group-attached {
  gap: 0;
}

.bp-btn-group-equal > .bp-btn {
  flex: 1 1 0;
  min-width: 0;
}

.bp-btn-group-divided:not(.bp-btn-group-divider-elements) > .bp-btn + .bp-btn {
  border-left: var(--bp-btn-group-divider-width, 1px) solid var(--bp-btn-group-divider-color, #e2e8f0);
}

.bp-btn-group-vertical.bp-btn-group-divided:not(.bp-btn-group-divider-elements) > .bp-btn + .bp-btn {
  border-left: 0;
  border-top: var(--bp-btn-group-divider-width, 1px) solid var(--bp-btn-group-divider-color, #e2e8f0);
}

.bp-btn-group-divider {
  flex: 0 0 auto;
  align-self: stretch;
  width: var(--bp-btn-group-divider-width, 1px);
  background-color: var(--bp-btn-group-divider-color, #e2e8f0);
}

.bp-btn-group-vertical .bp-btn-group-divider {
  width: 100%;
  height: var(--bp-btn-group-divider-width, 1px);
}

.bp-btn-group-attached .bp-btn {
  border-radius: 0;
}

.bp-btn-group-attached:not(.bp-btn-group-vertical) .bp-btn:first-child {
  border-top-left-radius: var(--bp-btn-radius, 8px);
  border-bottom-left-radius: var(--bp-btn-radius, 8px);
}

.bp-btn-group-attached:not(.bp-btn-group-vertical) .bp-btn:last-child {
  border-top-right-radius: var(--bp-btn-radius, 8px);
  border-bottom-right-radius: var(--bp-btn-radius, 8px);
}

.bp-btn-group-attached.bp-btn-group-vertical .bp-btn:first-child {
  border-top-left-radius: var(--bp-btn-radius, 8px);
  border-top-right-radius: var(--bp-btn-radius, 8px);
}

.bp-btn-group-attached.bp-btn-group-vertical .bp-btn:last-child {
  border-bottom-left-radius: var(--bp-btn-radius, 8px);
  border-bottom-right-radius: var(--bp-btn-radius, 8px);
}

.bp-split-button {
  display: inline-flex;
}

.bp-split-button-trigger {
  display: inline-flex;
}

.bp-split-button-trigger-block {
  display: flex;
  width: 100%;
}

.bp-split-button-block {
  display: flex;
  width: 100%;
}

.bp-split-button-block .bp-btn:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.bp-split-button .bp-btn {
  border-radius: 0;
}

.bp-split-button .bp-btn:first-child {
  border-top-left-radius: var(--bp-btn-radius, 8px);
  border-bottom-left-radius: var(--bp-btn-radius, 8px);
}

.bp-split-button .bp-btn:last-child {
  border-top-right-radius: var(--bp-btn-radius, 8px);
  border-bottom-right-radius: var(--bp-btn-radius, 8px);
}

.bp-split-button-divider {
  width: 1px;
  background-color: var(--bp-outline-muted, #e2e8f0);
}

.bp-split-button-menu {
  min-width: max-content;
}

.bp-split-button-menu .bp-dropdown-item-label {
  flex: 1 1 auto;
  text-align: left;
}

.bp-split-button-caret {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  display: inline-block;
}

@keyframes bp-btn-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}