.pre-btn {
  --btn-background: var(--color-action-primary);
  --btn-background-hover: var(--color-action-primary-hover);
  --btn-text: var(--color-content-inverse);
  --btn-border: transparent;

  --button-height: 2.5rem;
  --button-padding-x: var(--space-4);
  --button-radius: var(--radius-md);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: var(--button-height);
  height: var(--button-height);
  padding: 0 var(--button-padding-x);

  background: var(--btn-background);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
  border-radius: var(--button-radius);

  gap: var(--space-2);
  border: 1px solid var(--btn-border);
  border-radius: var(--button-radius);

  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25rem;
  text-decoration: none;
  cursor: pointer;

  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.pre-btn-icon {
  --btn-background: var(--color-action-primary);
  --btn-background-hover: var(--color-action-primary-hover);
  --btn-text: var(--color-content-inverse);
  --btn-border: transparent;

  --button-height: 2.5rem;
  --button-padding-x: var(--space-4);
  --button-radius: var(--radius-md);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--button-height);
  min-width: var(--button-height);
  height: var(--button-height);

  background: var(--btn-background);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
  border-radius: var(--button-radius);

  border: 1px solid var(--btn-border);
  border-radius: var(--button-radius);
  cursor: pointer;

  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.pre-btn-icon:hover,
.pre-btn:hover {
  background-color: var(--btn-background-hover);
  color: var(--btn-text);
}

.pre-btn-icon:focus-visible,
.pre-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.pre-btn-icon:disabled,
.pre-btn:disabled,
.pre-btn[aria-disabled='true'] {
  opacity: 0.5;
  pointer-events: none;
}

.pre-btn-icon[data-variant='primary'],
.pre-btn[data-variant='primary'] {
  --btn-background: var(--color-action-primary);
  --btn-background-hover: var(--color-action-primary-hover);
  --btn-text: var(--color-content-inverse);
  --btn-border: var(--color-transparent);
}

.pre-btn-icon[data-variant='secondary'],
.pre-btn[data-variant='secondary'] {
  --btn-background: var(--color-action-secondary);
  --btn-background-hover: var(--color-action-secondary-hover);
  --btn-text: var(--color-content-secondary);
  --btn-border: var(--color-transparent);
}

[data-color-mode='dark'] .pre-btn-icon[data-variant='secondary'],
.pre-btn-icon[data-color-mode='dark'][data-variant='secondary'],
[data-color-mode='dark'] .pre-btn[data-variant='secondary'],
.pre-btn[data-color-mode='dark'][data-variant='secondary'] {
  --btn-background: color-mix(
    in srgb,
    var(--color-action-secondary) 14%,
    transparent
  );
  --btn-background-hover: color-mix(
    in srgb,
    var(--color-action-secondary-hover) 25%,
    transparent
  );
}

.pre-btn-icon[data-variant='outlined'],
.pre-btn[data-variant='outlined'] {
  --btn-background: var(--color-transparent);
  --btn-background-hover: var(--color-action-secondary-hover);
  --btn-text: var(--color-content-secondary);
  --btn-border: var(--color-action-secondary);
}

.pre-btn-icon[data-variant='ghost'],
.pre-btn[data-variant='ghost'] {
  --btn-background: var(--color-action-ghost);
  --btn-background-hover: var(--color-action-ghost-hover);
  --btn-text: var(--color-content-tertiary);
  --btn-border: var(--color-transparent);
}

.pre-btn[data-variant='link'] {
  --btn-background: var(--color-transparent);
  --btn-background-hover: var(--color-transparent);
  --btn-text: var(--color-action-primary);
  --btn-border: var(--color-transparent);
}

.pre-btn[data-variant='link']:hover {
  text-decoration: underline;
  text-underline-offset: 0.125rem;
}

.pre-btn-icon[data-variant='danger'],
.pre-btn[data-variant='danger'] {
  --btn-background: var(--color-action-danger);
  --btn-background-hover: var(--color-action-danger-hover);
  --btn-text: var(--color-content-inverse);
  --btn-border: var(--color-transparent);
}

.pre-btn-icon[data-variant='danger-outlined'],
.pre-btn[data-variant='danger-outlined'] {
  --btn-background: var(--color-transparent);
  --btn-background-hover: var(--color-action-danger-hover);
  --btn-text: var(--color-action-danger);
  --btn-border: var(--color-action-danger);
}

[data-color-mode='dark'] .pre-btn[data-variant='danger-outlined'],
.pre-btn[data-color-mode='dark'][data-variant='danger-outlined'] {
  --btn-background-hover: color-mix(
    in srgb,
    var(--color-action-danger-hover) 25%,
    transparent
  );
}

.pre-btn-icon[data-size='sm'],
.pre-btn[data-size='sm'] {
  --button-height: 2rem;
  --button-padding-x: var(--space-3);
}

.pre-btn-icon[data-size='md'],
.pre-btn[data-size='md'] {
  --button-height: 2.5rem;
  --button-padding-x: var(--space-4);
}

.pre-btn-icon[data-size='lg'],
.pre-btn[data-size='lg'] {
  --button-height: 3rem;
  --button-padding-x: var(--space-6);
}