.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; }
.twitter {
--color: #000000; }
.pinterest {
--color: #e60023; }
.linkedin {
--color: #0a66c2; }
.quora {
--color: #b92b27; }
.reddit {
--color: #ff4500; }
.telegram {
--color: #26a5e4; }
.viber {
--color: #665cac; }
.whatsapp {
--color: #25d366; }
.line {
--color: #00b900; }
.facebook:hover {
--color: #145dbf; }
.twitter:hover {
--color: #1c1c1c; }
.pinterest:hover {
--color: #b8001b; }
.linkedin:hover {
--color: #004182; }
.quora:hover {
--color: #8a211d; }
.reddit:hover {
--color: #cc3700; }
.telegram:hover {
--color: #007ba7; }
.viber:hover {
--color: #514483; }
.whatsapp:hover {
--color: #1ebe5c; }
.line:hover {
--color: #009900; }
.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%;
}