/* Social Share Buttons Styling */

.share-buttons-wrapper {
  @apply flex flex-col;
}

.share-buttons-container {
  @apply flex gap-2;
}

.share-buttons-container--horizontal {
  @apply flex-row flex-wrap;
}

.share-buttons-container--vertical {
  @apply flex-col;
}

/* Social share button gem default styling overrides */
.social-share-button {
  @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg transition-all duration-200;
  @apply text-sm font-medium;
  @apply hover:shadow-md transform hover:-translate-y-0.5;
}

.social-share-button .ssbc {
  @apply flex items-center gap-2;
}

/* Platform-specific colors following brand guidelines */
.social-share-button .ssbc.ssbc-facebook {
  @apply bg-[#1877f2] hover:bg-[#145dbf] text-white;
}

.social-share-button .ssbc.ssbc-twitter {
  @apply bg-[#1da1f2] hover:bg-[#1a8cd8] text-white;
}

.social-share-button .ssbc.ssbc-linkedin {
  @apply bg-[#0077b5] hover:bg-[#006399] text-white;
}

.social-share-button .ssbc.ssbc-whatsapp_app,
.social-share-button .ssbc.ssbc-whatsapp_web {
  @apply bg-[#25d366] hover:bg-[#1faa52] text-white;
}

.social-share-button .ssbc.ssbc-telegram {
  @apply bg-[#0088cc] hover:bg-[#006da3] text-white;
}

.social-share-button .ssbc.ssbc-email {
  @apply bg-gray-600 hover:bg-gray-700 text-white;
}

.social-share-button .ssbc.ssbc-pinterest {
  @apply bg-[#e60023] hover:bg-[#bd001c] text-white;
}

/* Size variants */
.share-buttons-container--small .social-share-button {
  @apply text-xs px-3 py-1.5;
}

.share-buttons-container--medium .social-share-button {
  @apply text-sm px-4 py-2;
}

.share-buttons-container--large .social-share-button {
  @apply text-base px-6 py-3;
}

/* Icon styling */
.social-share-button .ssbc svg,
.social-share-button .ssbc i {
  @apply w-5 h-5;
}

.share-buttons-container--small .social-share-button .ssbc svg,
.share-buttons-container--small .social-share-button .ssbc i {
  @apply w-4 h-4;
}

.share-buttons-container--large .social-share-button .ssbc svg,
.share-buttons-container--large .social-share-button .ssbc i {
  @apply w-6 h-6;
}

/* Hover effects */
.social-share-button:hover {
  @apply shadow-lg;
}

/* Focus states for accessibility */
.social-share-button:focus {
  @apply outline-none ring-2 ring-offset-2 ring-blue-500;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .share-buttons-container--horizontal {
    @apply flex-col;
  }

  .social-share-button {
    @apply w-full justify-center;
  }
}

/* Share count styling */
.share-buttons-wrapper .text-gray-500 {
  @apply mt-3 text-sm;
}