// File Manager shell styles (basic variant)

//
@layer components {

    :host(ui-file-manager) {
        &, :where(*) {
            box-sizing: border-box;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        & {
            container-type: inline-size;
            container-name: ui-file-manager;
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            inline-size: 100%;
            block-size: 100%;
            min-block-size: 0;
            min-inline-size: 0;
            /* WHY: Avoid skipped list painting under transformed frame ancestors. */
            content-visibility: visible;
            border-radius: 0;
            overflow: hidden;
            margin: 0;
            line-height: normal;
            max-block-size: none;
            max-inline-size: none;

            /* WHY: plain hex before light-dark/var — WebView may lack both; invalid `--color-*` is IACVT. */
            color-scheme: inherit;
            background-color: #f7f8fc;
            background-color: light-dark(#f7f8fc, #1a1d24);
            background-color: var(--color-surface-container-low);
            color: #1a1c1f;
            color: light-dark(#1a1c1f, #e8eaed);
            color: var(--color-on-surface);
            --ui-icon-size: var(--ui-explorer-icon-size, 1.5rem);
            --ui-icon-padding: 0px;
            --icon-color: light-dark(#1a1c1f, #e8eaed);
            --icon-color: var(--color-on-surface);
        }

        .fm-root {
            position: relative;
            gap: 0;
            display: grid;
            grid-template-columns: [content-col] minmax(0px, 1fr);
            grid-template-rows: auto minmax(0px, 1fr);
            inline-size: 100%;
            block-size: 100%;
            min-inline-size: 0;
            min-block-size: 0;
            flex: 1 1 auto;
            overflow: hidden;
        }

        .fm-toolbar {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: minmax(0px, max-content) minmax(0px, 1fr) minmax(0px, max-content);
            grid-template-rows: minmax(0px, 1fr);
            grid-auto-flow: column;
            place-content: center;
            place-items: center;
            gap: 0.625rem;
            border-radius: 0;
            padding: 0.5rem 0.75rem;
            line-height: normal;
            background: #f7f8fc;
            background: light-dark(#f7f8fc, #1a1d24);
            background: var(--color-surface-container-low);
            box-shadow: 0 1px 0 color-mix(in oklab, var(--color-on-surface, #fff) 6%, transparent);

            button, input {
                background-color: transparent;
                color: #1a1c1f;
                color: light-dark(#1a1c1f, #e8eaed);
                color: var(--color-on-surface);
            }

            input {
                inline-size: stretch;
                block-size: stretch;
                border: none;
                outline: none;
                padding: 0.45rem 0.85rem;
                overflow: auto;
                border-radius: 999px;
                font: 0.8125rem/1.35 ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
                background: color-mix(in oklab, var(--color-on-surface, #fff) 6%, transparent);
            }

            input:focus-visible {
                box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary, #5a7fff) 45%, transparent);
            }

            .btn {
                transition: background 0.14s ease, transform 0.1s ease;
                appearance: none;
                border: 0;
                padding: 0;
                border-radius: 999px;
                cursor: pointer;
                inline-size: 2.5rem;
                block-size: 2.5rem;
                aspect-ratio: 1 / 1;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: transparent;

                ui-icon {
                    --ui-icon-size: var(--ui-explorer-icon-size, 1.5rem);
                    --ui-icon-padding: 0px;
                    inline-size: var(--ui-icon-size) !important;
                    block-size: var(--ui-icon-size) !important;
                    min-inline-size: var(--ui-icon-size) !important;
                    min-block-size: var(--ui-icon-size) !important;
                    max-inline-size: var(--ui-icon-size) !important;
                    max-block-size: var(--ui-icon-size) !important;
                    flex-shrink: 0;
                }
            }

            .btn:hover {
                background: color-mix(in oklab, var(--color-on-surface) 9%, transparent);
            }

            .btn:active {
                transform: scale(0.96);
            }

            .btn:focus-visible {
                outline: 2px solid color-mix(in oklab, var(--color-primary, #5a7fff) 55%, transparent);
                outline-offset: 1px;
            }

            & > * {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                gap: 0.2rem;
                block-size: fit-content;
                min-block-size: stretch;
                align-items: center;
            }

            & .fm-toolbar-left {
                grid-column: 1;
            }

            & .fm-toolbar-left,
            & .fm-toolbar-right {
                padding: 0.2rem;
                border-radius: 999px;
                background: color-mix(in oklab, var(--color-on-surface, #fff) 5.5%, transparent);
            }

            & .fm-toolbar-center {
                grid-column: 2;
                flex-grow: 1;
                inline-size: stretch;
                block-size: fit-content;
                min-block-size: 2.5rem;
                border-radius: 999px;
                padding: 0;
                overflow: hidden;
                place-content: stretch;
                place-items: stretch;
                justify-content: start;
                background: color-mix(in oklab, var(--color-on-surface, #fff) 5.5%, transparent);

                & > * {
                    inline-size: stretch;
                    block-size: stretch;
                }

                & input {
                    padding-inline: 0.9rem;
                    inline-size: stretch;
                    background: transparent;
                }
            }

            & .fm-toolbar-right { grid-column: 3; }
        }

        .fm-sidebar {
            grid-row: 2;
            grid-column: sidebar-col;
            align-content: start;
            gap: 0.5rem;
            padding: 0.5rem;
            border-radius: 0.5rem;
            line-height: normal;
            justify-content: start;
            justify-items: start;
            text-align: start;
            display: none;

            .sec {
                display: grid;
                gap: 0.25rem;
                place-content: start;
                place-items: start;
                justify-content: start;
                justify-items: start;
            }
            .sec-title {
                font-weight: 600;
                opacity: 0.8;
                padding-block: 0.25rem;
                place-self: start;
            }
            .link {
                text-align: start;
                appearance: none;
                border: 0;
                padding: 0.25rem 0.375rem;
                border-radius: 0.375rem;
                cursor: pointer;
                line-height: normal;
            }
        }

        .fm-root--settings .fm-content {
            visibility: hidden;
            pointer-events: none;
        }

        .fm-content {
            grid-row: 2;
            grid-column: content-col;
            display: flex;
            flex-direction: column;
            inline-size: 100%;
            block-size: 100%;
            min-inline-size: 0;
            min-block-size: 0;
            flex: 1 1 auto;
            overflow: hidden;
            border-radius: 0;
            padding: 0 0.35rem 0.45rem;

            scrollbar-width: thin;
            scrollbar-color: color-mix(in oklab, var(--color-on-surface) 22%, transparent) transparent;
        }

        .status { padding: 0.5rem; opacity: 0.8; }
        .status.error { color: var(--error-color, crimson); }

        @container (inline-size < 520px) {
            .fm-content { grid-column: 1 / -1; }
            .fm-root { grid-column: 1 / -1; }
            .fm-grid { grid-column: 1 / -1; }
            .fm-root[data-with-sidebar="true"] { grid-template-columns: [content-col] minmax(0px, 1fr); }
            .fm-sidebar { display: none !important; }
            .fm-toolbar {
                gap: 0.35rem;
                padding-inline: 0.4rem;
                .btn {
                    inline-size: 2rem;
                    block-size: 2rem;
                }
                & .fm-toolbar-center {
                    min-inline-size: 0;
                }
            }
        }
    }
}