@postnord/web-components
Version:
PostNord Web Components
66 lines (65 loc) • 1.71 kB
CSS
/* Global utility variables */
/* Input styles */
/* Transition variables */
pn-text-link {
display: inline;
}
pn-text-link .pn-text-link {
border-radius: 0.25em;
color: #005d92;
font-weight: 500;
text-decoration: underline;
font-size: 1em;
transition-property: color, outline-color, text-decoration-color;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
pn-text-link .pn-text-link {
transition-duration: 0s;
transition-delay: 0s;
}
}
pn-text-link .pn-text-link {
outline: 0.2rem solid transparent;
outline-offset: 0.2rem;
}
pn-text-link .pn-text-link:focus-visible {
outline-color: #005d92;
}
pn-text-link .pn-text-link:hover {
color: #0d234b;
text-decoration-color: #0d234b;
}
pn-text-link .pn-text-link[data-icon] {
display: inline-flex;
gap: 0.25em;
align-items: center;
text-decoration-color: transparent;
padding: 0.1em;
border-radius: 0.5em;
}
pn-text-link .pn-text-link[data-icon] .pn-icon-svg path {
fill: #005d92;
}
pn-text-link .pn-text-link[data-icon]:hover {
text-decoration-color: #0d234b;
}
pn-text-link .pn-text-link[data-icon]:hover .pn-icon-svg path, pn-text-link .pn-text-link[data-icon]:focus-visible .pn-icon-svg path {
fill: #0d234b;
}
pn-text-link .pn-text-link[data-icon][data-icon-left] {
flex-direction: row-reverse;
}
pn-text-link .pn-text-link[data-light] {
color: #ffffff;
}
pn-text-link .pn-text-link[data-light]:focus-visible {
outline-color: #ffffff;
}
pn-text-link .pn-text-link[data-light]:hover {
text-decoration-color: #ffffff;
}
pn-text-link .pn-text-link[data-light][data-icon] pn-icon .pn-icon-svg path {
fill: #ffffff;
}