33 lines
758 B
Svelte
33 lines
758 B
Svelte
<script lang="ts">
|
|
interface Props {
|
|
rotate?: boolean;
|
|
}
|
|
|
|
let { rotate = false }: Props = $props();
|
|
</script>
|
|
|
|
<svg
|
|
class="arrow"
|
|
class:rotated={rotate}
|
|
focusable="false"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 11 7"
|
|
>
|
|
<path
|
|
d="M10.413.587a.71.71 0 0 0-1.027 0L5.5 4.474 1.613.587a.71.71 0 0 0-1.027 0 .709.709 0 0 0 0 1.027l4.4 4.4c.147.147.367.22.513.22a.79.79 0 0 0 .513-.22l4.4-4.4a.71.71 0 0 0 0-1.027h.001Z"
|
|
></path>
|
|
</svg>
|
|
|
|
<style lang="scss">
|
|
@use './../scss/_colors.scss' as *;
|
|
svg {
|
|
margin-inline-start: 4px;
|
|
width: 10px;
|
|
fill: var(--nav-primary, var(--tr-dark-grey));
|
|
transition: transform 0.15s ease;
|
|
&.rotated {
|
|
transform: rotate(180deg);
|
|
}
|
|
}
|
|
</style>
|