src/components/Blog/SocialShare/styles.module.css

/**
 * SocialShare Component Styles
 * Social sharing buttons for blog posts.
 */

.socialShare {
  display: flex;
  align-items: center;
  gap: var(--ai-spacing-md);
}

.socialShare__label {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ai-text-secondary);
}

.socialShare__buttons {
  display: flex;
  gap: var(--ai-spacing-xs);
}

.socialShare__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--ai-text-secondary);
  background: var(--ai-gray-50);
  border: 1px solid var(--ai-border-light);
  border-radius: var(--ai-radius-sm);
  cursor: pointer;
  transition: all var(--ai-transition-normal);
}

.socialShare__button:hover {
  color: var(--ai-text-primary);
  background: var(--ai-gray-100);
  border-color: var(--ai-border-medium);
}

/* Platform-specific hover colors */
.socialShare__button--twitter:hover {
  color: #1da1f2;
  background: #e8f5fd;
  border-color: #1da1f2;
}

.socialShare__button--linkedin:hover {
  color: #0a66c2;
  background: #e8f1f8;
  border-color: #0a66c2;
}

.socialShare__button--facebook:hover {
  color: #1877f2;
  background: #e7f0fd;
  border-color: #1877f2;
}

.socialShare__button--copy:hover {
  color: var(--ai-blue);
  background: var(--ai-blue-lighter);
  border-color: var(--ai-blue);
}

.socialShare__button--copied {
  color: #16a34a;
  background: #dcfce7;
  border-color: #16a34a;
}

/* Vertical variant for floating sidebar */
.socialShare--vertical {
  flex-direction: column;
  align-items: center;
  gap: var(--ai-spacing-sm);
}

.socialShare--vertical .socialShare__buttons {
  flex-direction: column;
  gap: var(--ai-spacing-sm);
}

.socialShare--vertical .socialShare__button {
  width: 44px;
  height: 44px;
  border-radius: var(--ai-radius-circle);
  background: var(--ai-bg-primary);
  box-shadow: var(--ai-shadow-sm);
}

.socialShare--vertical .socialShare__button:hover {
  box-shadow: var(--ai-shadow-md);
  transform: scale(1.05);
}

/* Horizontal variant (default) */
.socialShare--horizontal {
  /* Default styles already applied */
}

@media (max-width: 480px) {
  .socialShare {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ai-spacing-sm);
  }

  .socialShare__button {
    width: 36px;
    height: 36px;
  }
}