import { createVar, style, styleVariants } from "@vanilla-extract/css";
/**
 * Grid area name for the sidebar (aside) panel.
 */
const ASIDE_AREA = "aside";
/**
 * Grid area name for the main content panel.
 */
const CONTENT_AREA = "content";
/**
 * CSS variable for controlling the size of the aside panel.
 * Defaults to "250px".
 */
export let asideSize = createVar({
    inherits: false,
    syntax: "<length-percentage>",
    initialValue: "250px",
});
/**
 * Base layout style for the sidebar container.
 * Uses CSS Grid for layout management.
 */
export let layout = style({
    display: "grid",
});
/**
 * Style variants for different sidebar placements.
 */
export let layoutVariants = styleVariants({
    /** Sidebar at the top of the container. */
    blockStart: {
        gridTemplateAreas: `
			"${ASIDE_AREA}"
			"${CONTENT_AREA}"
		`,
        gridTemplateRows: `${asideSize} 1fr`
    },
    /** Sidebar at the bottom of the container. */
    blockEnd: {
        gridTemplateAreas: `
			"${CONTENT_AREA}"
			"${ASIDE_AREA}"
		`,
        gridTemplateRows: `1fr ${asideSize} `
    },
    /** Sidebar at the start of the inline axis (left in LTR). */
    inlineStart: {
        gridTemplateAreas: `"${ASIDE_AREA} ${CONTENT_AREA}"`,
        gridTemplateColumns: `${asideSize} 1fr`,
    },
    /** Sidebar at the end of the inline axis (right in LTR). */
    inlineEnd: {
        gridTemplateAreas: `"${CONTENT_AREA} ${ASIDE_AREA}"`,
        gridTemplateColumns: `1fr ${asideSize}`,
    }
});
/**
 * Styles for the aside panel element.
 */
export let aside = style({
    gridArea: ASIDE_AREA,
    blockSize: "100%",
    inlineSize: "100%",
    position: "relative",
});
/**
 * Base class for drag handles within the aside panel.
 */
let baseAsideDragHandel = style({
    position: "absolute",
});
/**
 * Variants for the aside panel drag handle.
 */
export let asideDragHandel = styleVariants({
    /** Full-width horizontal drag handle. */
    horizontal: [baseAsideDragHandel, {
            inlineSize: "100%",
        }],
    /** Full-height vertical drag handle (positioned at the inline-end). */
    vertical: [baseAsideDragHandel, {
            blockSize: "100%",
            insetBlockStart: "0",
            insetInlineEnd: "0",
        }],
});
/**
 * Styles for the main content area.
 */
export let content = style({
    gridArea: CONTENT_AREA,
});