---
const { horizontal = false, id } = Astro.props;

const width = horizontal ? "100%" : "2px";
const height = horizontal ? "2px" : "initial";
---

<style define:vars={{ width, height }}>
    .divider {
        width: var(--width);
        height: var(--height);
        background-color: color-mix(in oklch, var(--color-base-100), var(--color-base-content) 10%);
        flex-shrink: 0;
    }
</style>

<div class="divider" id={id}></div>