@use "../../../../styles/abstracts/functions" as fun;
.link {
display: inline-flex;
align-items: center;
padding: var(--spacing-2xs) var(--spacing-xs);
border-radius: fun.convert-px(3);
box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 var(--shadowColor);
transition: all 0.2s linear 0s;
&:hover,
&:focus {
box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 var(--shadowColor);
transform: translateX(#{fun.convert-px(-3)})
translateY(#{fun.convert-px(-3)});
}
&:active {
box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 var(--shadowColor);
transform: translateX(#{fun.convert-px(2)}) translateY(#{fun.convert-px(2)});
}
&::before {
content: "";
display: block;
width: fun.convert-px(30);
height: fun.convert-px(30);
background-image: var(--logo);
background-repeat: no-repeat;
filter: drop-shadow(
#{fun.convert-px(1)} #{fun.convert-px(1)} #{fun.convert-px(1)} hsl(0, 0%, 0%)
);
}
&--diaspora {
// Prettier is removing spacing between attributes.
// prettier-ignore
--logo: url('#{fun.encode-svg('')}');
--shadowColor: hsl(0, 0%, 3%);
background: hsl(0, 0%, 13%);
}
&--email {
// Prettier is removing spacing between attributes.
// prettier-ignore
--logo: url('#{fun.encode-svg('')}');
--shadowColor: hsl(0, 0%, 34%);
background: hsl(0, 0%, 44%);
}
&--facebook {
// Prettier is removing spacing between attributes.
// prettier-ignore
--logo: url('#{fun.encode-svg('')}');
--shadowColor: hsl(214, 89%, 42%);
background: hsl(214, 89%, 52%);
}
&--journal-du-hacker {
// Prettier is removing spacing between attributes.
// prettier-ignore
--logo: url('#{fun.encode-svg('')}');
--shadowColor: hsl(210, 24%, 41%);
background: hsl(210, 24%, 51%);
}
&--linkedin {
// Prettier is removing spacing between attributes.
// prettier-ignore
--logo: url('#{fun.encode-svg('')}');
--shadowColor: hsl(210, 90%, 30%);
background: hsl(210, 90%, 40%);
}
&--twitter {
// Prettier is removing spacing between attributes.
// prettier-ignore
--logo: url('#{fun.encode-svg('')}');
--shadowColor: hsl(203, 89%, 43%);
background: hsl(203, 89%, 53%);
}
}