import Colors from "@web-atoms/core/dist/core/Colors";
import { AtomStyle } from "@web-atoms/core/dist/web/styles/AtomStyle";
import { IStyleDeclaration } from "@web-atoms/core/dist/web/styles/IStyleDeclaration";

export default class TreeViewStyle extends AtomStyle {

    public get root(): IStyleDeclaration {
        return {
            position: "absolute",
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            overflow: "auto",
            subclasses: {
                " .icon": {
                    position: "absolute",
                    left: "5px",
                    top: "5px",
                    maxWidth: "16px",
                    maxHeight: "16px"
                },
                " .fas": {
                    display: "none",
                    position: "absolute",
                    top: "5px",
                    subclasses: {
                        ".fas.fa-ellipsis-h": {
                            right: "10px"
                        }
                    }
                },
                " div": {
                    display: "block",
                    subclasses: {
                        " .item": {
                            position: "relative",
                            whiteSpace: "nowrap",
                            subclasses: {
                                " .file-name": {
                                },
                                ".selected": {
                                    backgroundColor: Colors.darkBlue,
                                    color: Colors.whiteSmoke,
                                    subclasses: {
                                        ":hover > .file-name": {
                                            backgroundColor: "unset"
                                        }
                                    }
                                },
                                " > .children": {
                                    display: "none"
                                },
                                ".open > .children": {
                                    display: "block"
                                },
                                " > ul": {
                                    paddingInlineStart: 0
                                },
                                ":hover": {
                                    subclasses: {
                                        " > .file-name": {
                                            backgroundColor: Colors.lightGoldenRodYellow,
                                        },
                                        " > .fas.fa-ellipsis-h": {
                                            display: "inline-block"
                                        },
                                        ".read-only > .fas": {
                                            display: "none"
                                        }
                                    },
                                },
                                ".folder:hover": {
                                    subclasses: {
                                        " > .fas.fa-ellipsis-h": {
                                            display: "inline-block",
                                        },
                                        ".read-only > .fas": {
                                            display: "none"
                                        }
                                    }
                                },
                            }
                        }
                    }
                }
            },
        };
    }

}