<script >import { writable } from 'svelte/store';
import { setTabsContext } from './context';
import { fade } from 'svelte/transition';
import css from './style.module.css';
export let tab;
const writableTab = writable(tab);
$: if (tab !== $writableTab) {
    tab = $writableTab;
}
const { tabElement } = setTabsContext(writableTab);
</script>

<div class={css.tabs}>
	<slot />
	{#if $tabElement}
		<div
			in:fade|local
			class={css.glider}
			style="--width: {$tabElement.clientWidth}px; --left: {$tabElement.offsetLeft}px"
		/>
	{/if}
</div>
