.base {
  position: relative;
  cursor: pointer;
  user-select: none;
  background: none;
}

.button {
  display: flex;
}

.button[data-geist-button] {
  border-radius: 6px;
  color: var(--themed-fg, var(--ds-background-100));
  background: var(--themed-bg, var(--ds-gray-1000)) none;
  font-weight: 500;
  padding: 0 var(--geist-gap-half);
  box-shadow: 0 0 0 1px var(--themed-border, transparent);
  max-width: 100%;
  justify-content: center;
  align-items: center;
  transition-property: border-color, background, color, transform, box-shadow;
  transition-duration: 0.15s;
  transition-timing-function: ease;
  font-size: var(--geist-form-font);
  line-height: var(--geist-form-line-height);
  height: var(--geist-form-height);
}

.content {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}

.content.flex {
  display: flex;
}

.button svg {
  vertical-align: text-top;
}

.base::-moz-focus-inner {
  border: 0;
}

.content.start {
  margin-right: auto;
}

.content.grow {
  margin-right: auto;
  margin-left: auto;
}

.content.flexGrow {
  flex-grow: 1;
}

.content.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.base[data-focus][data-geist-button] {
  transition: none;
  box-shadow: var(--ds-focus-ring);
}

.button.loading[data-geist-button],
.button[disabled][data-geist-button] {
  background: var(--ds-gray-100);
  color: var(--ds-gray-700);
  --themed-border: var(--ds-gray-400) !important;
  cursor: not-allowed;
}

.shape[data-geist-button] {
  padding: 0;
  width: var(--geist-form-height);
}

.rounded.large[data-geist-button],
.rounded[data-geist-button] {
  border-radius: 100px;
}

.large[data-geist-button] {
  height: var(--geist-form-large-height);
  font-size: var(--geist-form-large-font);
  line-height: var(--geist-form-large-line-height);
  border-radius: 8px;
}

.large.shape {
  width: var(--geist-form-large-height);
}

.tiny[data-geist-button] {
  width: 24px;
  height: 24px;
}

.tiny[data-geist-button] svg {
  height: 16px;
  width: 16px;
}

.small[data-geist-button] {
  font-size: var(--geist-form-small-font);
  height: var(--geist-form-small-height);
  --spinner-size: 16px;
}

.small.shape[data-geist-button] {
  width: var(--geist-form-small-height);
}

.button .prefix,
.button .suffix {
  display: flex;
}

.prefix {
  margin-right: 10px;
}

.suffix {
  margin-left: 10px;
}

.invert[data-active][data-geist-button],
.invert[data-hover][data-geist-button],
:global(.dark-theme) .invert[data-active][data-geist-button],
:global(.dark-theme) .invert[data-hover][data-geist-button] {
  background: var(--themed-hover-bg, #ccc);
}

.invert[data-active][data-geist-button],
.invert[data-hover][data-geist-button] {
  background: var(--themed-hover-bg, #383838);
  --themed-border: var(--themed-hover-bg, var(--ds-gray-200)) !important;
}

.shadow[data-geist-button] {
  box-shadow: var(--ds-shadow-border-small);
}

:global(.dark-theme) .button.shadow {
  box-shadow: none;
}

.shadow[data-hover][data-geist-button] {
  box-shadow: var(--shadow-medium);
  transform: translateY(-2px);
}

.shadow[data-hover].secondary[data-geist-button] {
  color: var(--geist-foreground);
}

.shadow[data-active][data-geist-button] {
  box-shadow: var(--geist-shadow-small);
  transform: translateY(1px);
}

.shadow[data-active][data-geist-button][data-hover] {
  transform: none;
}

.tertiary[data-geist-button] {
  background: none;
  color: var(--themed-bg, var(--ds-gray-1000));
  --themed-border: transparent;
  --lighten-color: hsla(0, 0%, 100%, 0.8);
}

.tertiary[data-hover][data-geist-button],
:global(.dark-theme) .tertiary[data-hover][data-geist-button] {
  background-color: var(--ds-gray-alpha-200);
  --themed-border: var(--ds-gray-alpha-200) !important;
}

:global(.dark-theme) .tertiary[data-active][data-geist-button] {
  --lighten-color: rgba(0, 0, 0, 0.7);
}

.secondary[data-geist-button] {
  --themed-bg: var(--ds-background-100);
  --themed-fg: var(--ds-gray-1000);
  --themed-border: var(--ds-gray-alpha-400);
}

.secondary[data-geist-button].invert[data-geist-button][data-hover][data-geist-button] {
  background-color: var(--ds-gray-100);
  --themed-border: rgba(0, 0, 0, 0.12) !important;
  color: var(--themed-fg);
}

.secondary[data-geist-button].invert[data-geist-button][data-active][data-geist-button] {
  color: var(--geist-foreground);
}

.secondary[data-geist-button][data-focus][data-geist-button] {
  transition: none;
  box-shadow: var(--ds-focus-ring);
}

.secondary[data-geist-button].shadow[data-geist-button][data-focus][data-active][data-geist-button] {
  box-shadow: var(--geist-shadow-small);
}

.secondary[data-geist-button].tertiary[data-geist-button] {
  color: var(--themed-fg);
}

.secondary[data-geist-button].tertiary[data-geist-button][data-hover][data-geist-button] {
  background-color: var(--ds-gray-alpha-200);
}

:global(.dark-theme)
  .secondary[data-geist-button].invert[data-geist-button][data-hover][data-geist-button] {
  background-color: var(--ds-gray-200);
  --themed-border: hsla(0, 0%, 100%, 0.17) !important;
}

.customStyles[data-geist-button] {
  background-color: var(--custom-bg-color) !important;
  color: var(--custom-color) !important;
  --themed-border: var(--custom-border-color) !important;
}

.customHoverStyles[data-hover] {
  background-color: var(--custom-bg-hover-color) !important;
  color: var(--custom-hover-color) !important;
  --themed-border: var(--custom-border-hover-color) !important;
}

.circle[data-geist-button] {
  border-radius: 100% !important;
}