src/presentation/assets/styles/base/_link-styling.scss
@use "@/presentation/assets/styles/mixins" as *;
@use "@/presentation/assets/styles/typography" as *;
@use 'sass:math';
a {
color: inherit;
cursor: pointer;
@include flat-button($disabled: false);
&[href] {
word-break: break-word; // Enables long URLs to wrap within the container, preventing horizontal overflow.
}
&[href^="http"]{
&:after {
display: inline-block;
content: '';
/*
Use mask element instead of content/background-image etc.
This way we can apply current font color to it to match the theme
*/
mask: url(@/presentation/assets/icons/external-link.svg) no-repeat 50% 50%;
mask-size: cover;
background-color: currentColor;
/*
Use absolute sizing instead of relative. Relative sizing looks bad and inconsistent if there are external elements
inside small text (such as inside `<sup>`) and bigger elements like in bigger text. Making them always have same size
make the text read and flow better.
*/
width: $font-size-absolute-x-small;
height: $font-size-absolute-x-small;
vertical-align: text-top;
@include set-property-ch-value-with-fallback(
$property: margin-left,
$value-in-ch: 0.25,
)
}
}
}