Links.
Applies to <a>
tags as well as .link
elements.
@mixin link()
None.
<a href="#">A classless link,</a>
<a class="link" href="#">I am a link</a>
and
<a class="link -disabled" href="#">I am a disabled link.</a>
@use "/resources/styles/config";
a,
.link {
--link-color: var(--color, #{config.$link});
--link-color-hover: var(--color-hover, #{config.$link-hover});
color: var(--link-color);
cursor: pointer;
text-decoration: none;
transition: color config.$fade-easing var(--duration-fast);
&:hover,
&:active {
color: var(--link-color-hover);
}
&.-disabled,
&[disabled] {
--link-color: #{config.$disabled};
cursor: default;
pointer-events: none;
}
&__icon {
height: 1em;
vertical-align: text-top;
}
}