<script setup lang="ts">
defineProps<{ dark?: boolean }>();
</script>

<template>
    <kbd class="ld-kbd" :class="{ 'ld-kbd--dark': dark }">
        <slot />
    </kbd>
</template>

<style scoped>
.ld-kbd {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(1, 32, 25, 0.06);
    color: var(--liderra-muted);
    border: 1px solid var(--liderra-line);
    line-height: 1.4;
}

.ld-kbd--dark {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(232, 226, 212, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
}
</style>
