2024-07-29 22:04:11 -07:00
|
|
|
@use "../mixins/transition";
|
|
|
|
@use "../variables";
|
|
|
|
|
2023-01-03 22:23:46 -08:00
|
|
|
.icon-link {
|
|
|
|
display: inline-flex;
|
2024-07-29 22:04:11 -07:00
|
|
|
gap: variables.$icon-link-gap;
|
2023-01-03 22:23:46 -08:00
|
|
|
align-items: center;
|
2024-07-29 22:04:11 -07:00
|
|
|
text-decoration-color: rgba(var(--#{variables.$prefix}link-color-rgb), var(--#{variables.$prefix}link-opacity, .5));
|
|
|
|
text-underline-offset: variables.$icon-link-underline-offset;
|
2023-01-03 22:23:46 -08:00
|
|
|
backface-visibility: hidden;
|
|
|
|
|
|
|
|
> .bi {
|
|
|
|
flex-shrink: 0;
|
2024-07-29 22:04:11 -07:00
|
|
|
width: variables.$icon-link-icon-size;
|
|
|
|
height: variables.$icon-link-icon-size;
|
2023-03-02 19:32:43 +01:00
|
|
|
fill: currentcolor;
|
2024-07-29 22:04:11 -07:00
|
|
|
@include transition.transition(variables.$icon-link-icon-transition);
|
2023-01-03 22:23:46 -08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.icon-link-hover {
|
|
|
|
&:hover,
|
|
|
|
&:focus-visible {
|
|
|
|
> .bi {
|
2024-07-29 22:04:11 -07:00
|
|
|
transform: var(--#{variables.$prefix}icon-link-transform, variables.$icon-link-icon-transform);
|
2023-01-03 22:23:46 -08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|