@use '../../styles/mixins' as *;

// =============================================================================
// CopyButton — clipboard copy with visual feedback
// =============================================================================

.copyButton {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;

  background: none;
  border: none;
  padding: 2px 4px;
  margin: 0;

  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity var(--transition-fast),
              background var(--transition-fast);

  &:hover {
    opacity: 1 !important;
    background: var(--bg-overlay);
  }

  &:focus-visible {
    opacity: 1 !important;
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
    background: var(--bg-overlay);
  }

  @include mobile {
    opacity: 1;
  }
}
