// ============================================================================
// Content Component Styles
// ============================================================================
@mixin tabbed-content($selector: ".content-box") {
    @at-root :host {
        #{$selector} {
            // ================================================================
            // Base Layout
            // ================================================================
            display: grid !important;
            grid-template-columns: subgrid;
            grid-template-rows: subgrid;
            grid-column: 1 / -1 !important;
            grid-row: 1 / -1 !important;
            z-index: 1;

            // Sizing
            inline-size: stretch;
            block-size: stretch;
            min-inline-size: 0px;
            min-block-size: 0px;
            max-inline-size: stretch;
            max-block-size: stretch;

            // Spacing
            gap: 0px;

            // Visual
            background: none;
            background-color: transparent !important;
            border-radius: 0px;
            box-shadow: none;
            overflow: hidden;
            position: relative;
            pointer-events: none;

            // Containment
            contain: none;

            // Drop menu mode
            @at-root :host([sidebar-drop-menu]) & {
                overflow: visible;
            }
        }

        // ================================================================
        // Content Container
        // ================================================================
        #{$selector} :where(.ui-tabbed-box-content, .content) {
            display: grid !important;
            flex-direction: column;

            // Grid layout - align with parent grid
            grid-template-columns:
                /*[sidebar-col] minmax(0px, var(--sidebar-inline-grid-size, 0px))
                [button-col] minmax(0px, var(--button-inline-size, 3rem))*/
                [content-col] minmax(0px, 1fr);
            grid-template-rows: var(--tabbed-grid-rows);
            grid-column: 1 / -1;
            grid-row: 1 / -1;

            // Sizing
            inline-size: stretch;
            block-size: stretch;
            min-inline-size: 0px;
            min-block-size: 0px;
            max-inline-size: stretch;
            max-block-size: stretch;
            will-change: contents;

            // Spacing
            gap: 0px;

            // Visual
            background: none;
            background-color: transparent !important;
            border-radius: 0px;
            box-shadow: none;
            align-content: start;
            pointer-events: none;

            // Performance
            container-type: inline-size;
            content-visibility: auto;
            contain: strict;
            perspective: 1000;
            transform: translateZ(0px);
        }

        // ================================================================
        // Slotted Content
        // ================================================================
        #{$selector} ::slotted(*) {
            display: grid;
            flex-direction: column;
            flex-grow: 1;
            place-content: center;
            place-items: center;

            // Grid positioning
            grid-column: 1 / -1;
            grid-row: content-row;
            grid-template-columns: minmax(0px, 1fr);
            grid-template-rows: minmax(0px, 1fr);

            // Sizing
            inline-size: stretch;
            block-size: stretch;
            min-inline-size: 0px;
            min-block-size: 0px;
            max-inline-size: stretch;
            max-block-size: stretch;

            // Spacing
            gap: 0px;

            // Visual
            background-color: transparent;
            box-shadow: none;
            line-height: var(--leading-normal, 1.5);
            color: var(--md3-on-surface);
            overflow: auto;
            scrollbar-gutter: stable both-edges;
        }

        // Hidden slotted content
        #{$selector} ::slotted([aria-hidden="true"], [hidden], :not([active])) {
            display: none !important;
        }

        // ================================================================
        // Responsive: Desktop Layout
        // ================================================================
        #{$selector} {
            @container (min-inline-size: 800px) {
                .content {
                    grid-column: 2 / -1 !important;
                }
            }
        }

        // ================================================================
        // Drop Menu Mode: Backdrop Overlay
        // ================================================================
        @at-root :host([sidebar-drop-menu]) #{$selector} {
            // ================================================================
            // Responsive: Desktop Layout
            // ================================================================
            @container (min-inline-size: 800px) {
                .content {
                    isolation: isolate;

                    &::after {
                        content: "";
                        position: absolute;
                        inset: clamp(0px, 1cqi, 0.5rem);
                        border-radius: 0px;
                        background: color-mix(in oklch, var(--md3-surface) 60%, transparent);
                        opacity: 0;
                        pointer-events: none;
                        transition: opacity var(--transition-medium, 0.28s) var(--ease-out);
                        z-index: 4;
                    }
                }
            }
        }
    }
}