---
interface Props {
    header?: string;
    footer?: string;
    extra?: string;
}

const { header = "", footer = "", extra = "m-[-0.1vw]" } = Astro.props;
---

<div
    class=`section
    p-[0.8em] pt-[1.0625em] border-[0.1vw] text-[3.5vw]
    sm:p-[1vw] sm:pt-[1.0625vw] sm:border-[0.1vw] sm:text-[100%]
    ${extra}`
>
    <span
        class="tag px-[0.5em] text-[2.5vw] left-[0.5em] top-[-0.7em]
        sm:px-[0.625vw] sm:text-[1vw] sm:left-[0.625vw] sm:top-[-0.75vw]"
        >{header}</span
    >
    <span
        class="tag px-[0.5em] text-[2.5vw] left-[0.5em] bottom-[-0.7em]
        sm:px-[0.625vw] sm:text-[1vw] sm:left-[0.625vw] sm:bottom-[-0.75vw]"
        >{footer}</span
    >
    <slot />
</div>

<style>
    .section {
        position: relative;
        display: flex;
        border-style: solid;
        border-color: var(--alt);
    }

    .tag {
        position: absolute;
        background-color: var(--background);
        color: var(--alt);
    }
</style>