.copyPageButton {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 6px;
  color: var(--ifm-font-color-base);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.copyPageButton:hover {
  background-color: var(--ifm-color-emphasis-100);
  border-color: var(--ifm-color-emphasis-400);
}

.copyPageButton:active {
  transform: translateY(1px);
}

.copyPageButton.copied {
  background-color: var(--ifm-color-success-contrast-background);
  border-color: var(--ifm-color-success);
  color: var(--ifm-color-success-darkest);
}

.copyPageButton.copied:hover {
  background-color: var(--ifm-color-success-contrast-background);
  border-color: var(--ifm-color-success);
}

.buttonText {
  margin: 0 4px;
}

/* Dark mode adjustments */
[data-theme='dark'] .copyPageButton {
  border-color: var(--ifm-color-emphasis-400);
}

[data-theme='dark'] .copyPageButton:hover {
  background-color: var(--ifm-color-emphasis-200);
  border-color: var(--ifm-color-emphasis-500);
}

[data-theme='dark'] .copyPageButton.copied {
  background-color: var(--ifm-color-success-dark);
  border-color: var(--ifm-color-success);
  color: var(--ifm-color-success-contrast-foreground);
}