@postnord/web-components
Version:
PostNord Web Components
36 lines (35 loc) • 785 B
CSS
/* Global utility variables */
/* Input styles */
/* Transition variables */
pn-icon {
display: inline-block;
vertical-align: top;
/** @prop --pn-icon-color: The icon color. */
--pn-icon-color: main.$gray900;
}
pn-icon .pn-icon {
margin: 0;
}
pn-icon .pn-icon svg {
display: block;
height: 1.5em;
width: 1.5em;
}
pn-icon .pn-icon svg > circle,
pn-icon .pn-icon svg > path {
fill: var(--pn-icon-color);
transition-property: fill, transform;
transition-duration: 0.2s;
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
pn-icon .pn-icon svg > circle,
pn-icon .pn-icon svg > path {
transition-duration: 0s;
transition-delay: 0s;
}
}
pn-icon .pn-icon[data-small] svg {
height: 1em;
width: 1em;
}