.rkit-social-media__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.54rem;
}

.rkit-social-media__list .rkit-social-share__link {
  width: fit-content;
  border: none;
  display: flex;
  align-items: center;
  height: 100%;
  line-height: 1;
  border-radius: 0;
  padding: 10px;
}

.rkit-social-share.fullwidth .rkit-social-share__link {
  width: 100%;
  justify-content: center;
}

.facebook {
  --color: #1877f2; /* Facebook Blue */
}

.twitter {
  --color: #000000; /* X (Twitter) Black */
}

.pinterest {
  --color: #e60023; /* Pinterest Red */
}

.linkedin {
  --color: #0a66c2; /* LinkedIn Blue */
}

.quora {
  --color: #b92b27; /* Quora Red */
}

.reddit {
  --color: #ff4500; /* Reddit Orange */
}

.telegram {
  --color: #26a5e4; /* Telegram Blue */
}

.viber {
  --color: #665cac; /* Viber Purple */
}

.whatsapp {
  --color: #25d366; /* WhatsApp Green */
}

.line {
  --color: #00b900; /* LINE Green */
}

.facebook:hover {
  --color: #145dbf; /* Facebook Darker Blue */
}

.twitter:hover {
  --color: #1c1c1c; /* X (Twitter) Darker Black */
}

.pinterest:hover {
  --color: #b8001b; /* Pinterest Darker Red */
}

.linkedin:hover {
  --color: #004182; /* LinkedIn Darker Blue */
}

.quora:hover {
  --color: #8a211d; /* Quora Darker Red */
}

.reddit:hover {
  --color: #cc3700; /* Reddit Darker Orange */
}

.telegram:hover {
  --color: #007ba7; /* Telegram Darker Blue */
}

.viber:hover {
  --color: #514483; /* Viber Darker Purple */
}

.whatsapp:hover {
  --color: #1ebe5c; /* WhatsApp Darker Green */
}

.line:hover {
  --color: #009900; /* LINE Darker Green */
}

/* Discord */
.discord {
  --color: #5865f2; /* Discord Blurple */
}
.discord:hover {
  --color: #4752c4; /* Discord Darker Blurple */
}

/* GitHub */
.github {
  --color: #181717; /* GitHub Black */
}
.github:hover {
  --color: #000000; /* GitHub Darker Black */
}

/* Instagram */
.instagram {
  --color: #e4405f; /* Instagram Pink */
}
.instagram:hover {
  --color: #bc2a8d; /* Instagram Darker Pink */
}

/* Snapchat */
.snapchat {
  --color: #fffc00; /* Snapchat Yellow */
}
.snapchat:hover {
  --color: #e6d800; /* Snapchat Darker Yellow */
}

/* Threads */
.threads {
  --color: #000000; /* Threads Black */
}
.threads:hover {
  --color: #222222; /* Threads Darker Black */
}

/* TikTok */
.tiktok {
  --color: #010101; /* TikTok Black */
}
.tiktok:hover {
  --color: #25f4ee; /* TikTok Cyan Glow */
}

/* YouTube */
.youtube {
  --color: #ff0000; /* YouTube Red */
}
.youtube:hover {
  --color: #cc0000; /* YouTube Darker Red */
}


.rkit-social-share.flat .rkit-social-share__link {
  background-color: var(--color);
  color: white;
  fill: white;
}

.rkit-social-share.flat .rkit-social-share__link:hover {
  color: white;
  fill: white;
}

.rkit-social-share.outline .rkit-social-share__link,
.rkit-social-share.framed .rkit-social-share__link {
  border-width: 2px;
  border-style: solid;
  border-color: var(--color);
  color: var(--color);
  fill: var(--color);
  background: transparent;
}

.rkit-social-share.framed .rkit-social-share__link:hover {
  background: transparent;
  color: var(--color);
  fill: var(--color);
}

.rkit-social-share.outline .rkit-social-share__link:hover {
  background-color: var(--color);
  color: white;
  fill: white;
}

.rkit-social-share.flat-on-hover .rkit-social-share__link {
  background: transparent;
  color: var(--color);
  fill: var(--color);
}

.rkit-social-share.flat-on-hover .rkit-social-share__link:hover {
  background-color: var(--color);
  color: white;
  fill: white;
}

.rkit-social-share.pointer .rkit-social-share__link,
.rkit-social-share.pointer .rkit-social-share__link:hover,
.rkit-social-share.pointer-on-hover .rkit-social-share__link,
.rkit-social-share.pointer-on-hover .rkit-social-share__link:hover {
  --pointer-width: 3px;
  position: relative;
  background: transparent;
  color: var(--color);
  fill: var(--color);
}

.rkit-social-share.pointer .rkit-social-share__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: var(--pointer-width);
  background-color: var(--color);
  transform: translateY(50%);
}

.rkit-social-share.pointer-on-hover .rkit-social-share__link::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  width: 0%;
  height: var(--pointer-width);
  background-color: var(--color);
  transition: width 0.5s;
  transform: translateX(-50%);
}

.rkit-social-share.pointer-on-hover .rkit-social-share__link:hover::after {
  width: 100%;
}