pages/src/lib/components/outlined-button.svelte

<script lang="ts">
    let {
        text,
        onClick,
        fullWidth,
    }: {
        text: string;
        onClick: () => undefined;
        fullWidth?: boolean;
    } = $props();
</script>

<button class="outlined-button {fullWidth ? "outlined-button-fullwidth" : ""}" onclick={onClick}>{text}</button>   

<style>
    .outlined-button {
        font-family: var(--font-mono);
        font-size: var(--font-size-mono);
        padding: 8px;
        border: var(--border-style) var(--border-dash-size) var(--color-highlight);
        color: var(--color-highlight);
        font-weight: 700;
        cursor: pointer;
        transition: background-color var(--duration-animation) var(--anim-curve);
    }

    .outlined-button:hover {
        background-color: var(--color-background-highlight);
    }

    .outlined-button-fullwidth {
        width: 100%;
    }
</style>