(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "@web-atoms/core/src/web/images/close-button-hover.svg", "../styles/AtomStyle"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.AtomWindowStyle = void 0;
    const close_button_hover_svg_1 = require("@web-atoms/core/src/web/images/close-button-hover.svg");
    const AtomStyle_1 = require("../styles/AtomStyle");
    /**
     * Represents Window Style, in order to add more subclasses
     * you can override content style
     */
    class AtomWindowStyle extends AtomStyle_1.AtomStyle {
        get root() {
            return Object.assign(Object.assign({}, this.frameHost), { subclasses: {
                    " .close-button": this.closeButton,
                    " .command-bar-presenter": this.commandBarPresenter,
                    " .command-bar": this.commandBar,
                    " .content-presenter": this.contentPresenter,
                    " .content": this.content,
                    " .frame": this.frame,
                    " .title": this.title,
                    " .title-host": this.titleHost,
                    " .title-presenter": this.titlePresenter,
                } });
        }
        get frameHost() {
            return {
                position: "absolute",
                left: 0,
                right: 0,
                top: 0,
                bottom: 0,
                backgroundColor: "#50505080"
            };
        }
        get frame() {
            return {
                position: "absolute",
                minHeight: "100px",
                minWidth: "300px",
                margin: "auto",
                border: "solid 1px #808080",
                borderRadius: "5px",
                backgroundColor: "white"
            };
        }
        get titlePresenter() {
            return {
                position: "relative",
                left: 0,
                right: 0,
                top: 0,
                height: "37px"
            };
        }
        get titleHost() {
            return {
                position: "absolute",
                left: 0,
                right: 0,
                padding: "7px",
                minHeight: "32px",
                backgroundColor: "#404040",
                color: "white",
                top: 0,
                borderTopRightRadius: "4px",
                borderTopLeftRadius: "4px"
            };
        }
        get title() {
            return {
                margin: "auto"
            };
        }
        get closeButton() {
            return {
                position: "absolute",
                right: "6px",
                top: "7px",
                width: "0",
                height: "0",
                padding: "9px",
                border: "none",
                backgroundColor: "transparent",
                backgroundImage: close_button_hover_svg_1.default
                // As suggested by srikanth sir
                //  subclasses: {
                //      ":hover": {
                //          backgroundImage: closeButtonHover
                //      }
                // }
            };
        }
        get content() {
            return {};
        }
        get contentPresenter() {
            return {
                position: "relative",
                padding: "10px",
                background: "white"
            };
        }
        get commandBarPresenter() {
            return {
                left: 0,
                right: 0,
                bottom: 0,
                padding: "5px",
                backgroundColor: "#d4d4d4",
                textAlign: "right",
                borderBottomRightRadius: "4px",
                borderBottomLeftRadius: "4px",
            };
        }
        get commandBar() {
            return {
                subclasses: {
                    " button": {
                        borderRadius: "3px",
                        marginLeft: "5px",
                        marginRight: "5px",
                        padding: "4px 16px",
                        backgroundColor: "whitesmoke",
                        border: "1px solid gray"
                    }
                },
            };
        }
    }
    exports.AtomWindowStyle = AtomWindowStyle;
});
//# sourceMappingURL=AtomWindowStyle.js.map