import { AtomTheme } from "@web-atoms/core/dist/web/styles/AtomTheme";
import { IStyleDeclaration } from "@web-atoms/core/dist/web/styles/IStyleDeclaration";
import AtomPageLinkStyle from "@web-atoms/core/dist/web/styles/AtomPageLinkStyle";

export class SharePageLinkStyle extends AtomPageLinkStyle {

    public screen = (this.styleSheet as AtomTheme).app.screen;
    public get root(): IStyleDeclaration {
        return {
            subclasses: {
                ".page": this.page
            }
        };
    }
    public get page(): IStyleDeclaration {
        return {
            right: this.screen.screenType === "mobile" ? "0" : "",
            left: this.screen.screenType === "mobile" ? "unset !important" : "",
            backgroundColor: "white",
            border: "1px solid gray",
            width: "321px",
            margin: "5px",
            subclasses: {
                " button": {
                    padding: "5px 8px",
                    borderRadius: "3px",
                    border: "1px solid #007bff",
                    backgroundColor: "#007bff",
                    color: "white",
                    margin: "5px",
                    width: "90px"
                },
                " input": {
                    padding: "5px 8px",
                    borderRadius: "3px",
                    border: "1px solid #aaa",
                    margin: "5px",
                    marginRight: "0",
                    width: "233px"
                },
                " .follow-us": {
                    paddingTop: "0",
                    subclasses: {
                        " .fab": {
                            padding: "10px",
                            fontSize: "20px",
                            width: "40px",
                            textAlign: "center",
                            textDecoration: "none",
                            margin: "5px",
                            borderRadius: "5px",
                            border: "none",
                            outline: "none",
                            subclasses: {
                                ":hover": {
                                    opacity: "0.7"
                                }
                            }
                        },
                        " .far": {
                            padding: "10px",
                            fontSize: "20px",
                            width: "40px",
                            textAlign: "center",
                            textDecoration: "none",
                            margin: "5px",
                            borderRadius: "5px",
                            border: "1px solid #795548",
                            color: "#795548",
                            outline: "none",
                            backgroundColor: "white",
                            subclasses: {
                                ":hover": {
                                    opacity: "0.7"
                                }
                            }
                        },
                        " .fa-facebook-f": {
                            background: "#3B5998",
                            color: "white"
                        },
                        " .fa-twitter": {
                            background: "#55ACEE",
                            color: "white"
                        },
                        " .fa-pinterest": {
                            background: "#cb2027",
                            color: "white"
                        },
                        " .fa-linkedin-in": {
                            background: "#007bb5",
                            color: "white"
                        },
                        " .fa-skype": {
                            background: "#00aff0",
                            color: "white"
                        }
                    }
                }
                // background: "url(" + DropDownDataUrl  + ") no-repeat 80px center, white",
            }
        };
    }
}