@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);
&:hover,
&:focus {
transform: translateX(#{fun.convert-px(-3)})
translateY(#{fun.convert-px(-3)});
}
&:active {
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-repeat: no-repeat;
filter: drop-shadow(
#{fun.convert-px(1)} #{fun.convert-px(1)} #{fun.convert-px(1)} hsl(0, 0%, 0%)
);
}
&--diaspora {
background: hsl(0, 0%, 13%);
box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(0, 0%, 3%);
&:hover,
&:focus {
box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 hsl(0, 0%, 3%);
}
&:active {
box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 hsl(0, 0%, 3%);
}
&::before {
background-image: url(fun.encode-svg(
''
));
}
}
&--email {
background: hsl(0, 0%, 44%);
box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(0, 0%, 34%);
&:hover,
&:focus {
box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0 hsl(0, 0%, 34%);
}
&:active {
box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0 hsl(0, 0%, 34%);
}
&::before {
background-image: url(fun.encode-svg(
''
));
}
}
&--facebook {
background: hsl(214, 89%, 52%);
box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(214, 89%, 42%);
&:hover,
&:focus {
box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0
hsl(214, 89%, 42%);
}
&:active {
box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0
hsl(214, 89%, 42%);
}
&::before {
background-image: url(fun.encode-svg(
''
));
}
}
&--journal-du-hacker {
background: hsl(210, 24%, 51%);
box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(210, 24%, 41%);
&:hover,
&:focus {
box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0
hsl(210, 24%, 41%);
}
&:active {
box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0
hsl(210, 24%, 41%);
}
&::before {
background-image: url(fun.encode-svg(
''
));
}
}
&--linkedin {
background: hsl(210, 90%, 40%);
box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(210, 90%, 30%);
&:hover,
&:focus {
box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0
hsl(210, 90%, 30%);
}
&:active {
box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0
hsl(210, 90%, 30%);
}
&::before {
background-image: url(fun.encode-svg(
''
));
}
}
&--twitter {
background: hsl(203, 89%, 53%);
box-shadow: #{fun.convert-px(3)} #{fun.convert-px(3)} 0 0 hsl(203, 89%, 43%);
&:hover,
&:focus {
box-shadow: #{fun.convert-px(6)} #{fun.convert-px(6)} 0 0
hsl(203, 89%, 43%);
}
&:active {
box-shadow: #{fun.convert-px(1)} #{fun.convert-px(1)} 0 0
hsl(203, 89%, 43%);
}
&::before {
background-image: url(fun.encode-svg(
''
));
}
}
}