const columns = {
    "one-fifth": "20%",
    "one-quarter": "25%",
    "one-third": "33.33%",
    "two-fifths": "40%",
    "half": "50%",
    "three-fifths": "60%",
    "two-thirds": "66.66%",
    "three-quarters": "75%",
    "four-fifths": "80%",
    "full": "100%",
};

export const elements = {
    alert: {
        ".{{prefix}}alert": {
            alignItems: "center",
            backgroundColor: "primary",
            borderRadius: "0.5rem",
            color: "white",
            display: "flex",
            fontWeight: "bold",
            marginBottom: "1rem",
            marginTop: "0px",
            minWidth: "0px",
            padding: "1.25rem",
            position: "relative",
            "&.is-secondary": {
                backgroundColor: "secondary",
                color: "white",
            },
            apply: "alerts",
        },
    },
    badge: {
        ".{{prefix}}badge": {
            backgroundColor: "primary",
            borderRadius: "0.25rem",
            color: "white",
            display: "inline-block",
            fontSize: "0.75rem",
            fontWeight: "bold",
            lineHeight: "1.25rem",
            padding: ["0.25rem", "0.5rem"],
            textDecoration: "none",
            verticalAlign: "text-top",
            "&.is-secondary": {
                backgroundColor: "secondary",
                color: "white",
            },
            apply: "badges",
        },
    },
    button: {
        ".{{prefix}}button": {
            appearance: "none",
            backgroundColor: "primary",
            border: "0px",
            borderRadius: "0.5rem",
            color: "white",
            cursor: "pointer",
            display: "inline-block",
            fontFamily: "inherit",
            fontSize: "inherit",
            fontWeight: "bold",
            lineHeight: "inherit",
            minWidth: "0px",
            padding: ["0.75rem", "1.5rem"],
            textAlign: "center",
            textDecoration: "none",
            userSelect: "none",
            verticalAlign: "middle",
            "&:hover": {
                textDecoration: "none",
                transitionDuration: "0.3s",
                transitionProperty: "background-color",
            },
            "&.is-secondary": {
                backgroundColor: "secondary",
                color: "white",
            },
            "&.is-full": {
                display: "block",
                width: "100%",
            },
            "&.is-disabled,&:disabled": {
                cursor: ["not-allowed", "!important"],
                opacity: ["0.6", "!important"],
            },
            apply: "buttons",
        },
    },
    card: {
        ".{{prefix}}card": {
            backgroundColor: "white",
            borderRadius: "0.5rem",
            color: "inherit",
            display: "block",
            padding: "2rem",
            textDecoration: ["none", "!important"],
            width: "100%",
            apply: "cards",
        },
    },
    checkbox: {
        ".{{prefix}}checkbox": {
            appearance: "none",
            backgroundColor: "muted",
            borderRadius: "0.25rem",
            boxSizing: "border-box",
            color: "white",
            cursor: "pointer",
            display: "inline-block",
            height: "1.125rem",
            margin: "0.1875rem",
            position: "relative",
            width: "1.125rem",
            verticalAlign: "top",
            "&:after": {
                backgroundColor: "transparent",
                content: "''",
                height: "0.375rem",
                position: "absolute",
            },
            "&:checked,&:indeterminate": {
                backgroundColor: "primary",
                transitionDuration: "0.3s",
                transitionProperty: "background-color",
            },
            "&:indeterminate:after": {
                borderBottomColor: "white",
                borderBottomStyle: "solid",
                borderBottomWidth: "0.125rem",
                left: "0.3125rem",
                top: "0.25rem",
                width: "0.5rem",
            },
            "&:checked:after": {
                borderBottomColor: "white",
                borderBottomStyle: "solid",
                borderBottomWidth: "0.125rem",
                borderLeftColor: "white",
                borderLeftStyle: "solid",
                borderLeftWidth: "0.125rem",
                left: "0.25rem",
                top: "0.3125rem",
                transform: "rotate(-45deg)",
                width: "0.625rem",
            },
            apply: "forms.checkbox",
        },
    },
    close: {
        ".{{prefix}}close": {
            appearance: "none",
            backgroundColor: "transparent",
            border: "none",
            color: "currentColor",
            cursor: "pointer",
            display: "inline-flex",
            height: "1rem",
            opacity: "0.6",
            position: "relative",
            transition: ["opacity", "0.3s"],
            width: "1rem",
            "&:hover": {
                opacity: "1.0",
            },
            "&:before,&:after": {
                backgroundColor: "currentColor",
                borderRadius: "1px",
                content: "''",
                height: "3px",
                left: "0px",
                position: "absolute",
                top: "6px",
                width: "1rem",
            },
            "&:before": {
                transform: "rotate(45deg)",
            },
            "&:after": {
                transform: "rotate(-45deg)",
            },
            apply: "buttons.close",
        },
    },
    column: {
        ".{{prefix}}column": {
            flex: "1",
            minHeight: "0",
            padding: "1rem",
            width: "100%",
            // Responsive column sizes
            ...Object.fromEntries(Object.keys(columns).map(column => {
                const styles = {
                    flex: "none",
                    width: columns[column],
                    "@breakpoints": {
                        "&-{{breakpoint}}": {
                            flex: "none",
                            width: columns[column],
                        },
                    },
                };
                return [`&.is-${column}`, styles];
            })),
            apply: "columns",
        },
        ".{{prefix}}columns": {
            display: "flex",
            flexWrap: "wrap",
            marginLeft: "-1rem",
            marginRight: "-1rem",
        },
    },
    container: {
        ".{{prefix}}container": {
            display: "block",
            marginLeft: "auto",
            marginRight: "auto",
            maxWidth: "1264px",
            paddingLeft: "1.5rem",
            paddingRight: "1.5rem",
            width: "100%",
            apply: "layout.container",
        },
    },
    crumb: {
        ".{{prefix}}crumb": {
            color: "currentColor",
            cursor: "pointer",
            fontWeight: "bold",
            opacity: "0.6",
            paddingBottom: "0.5rem",
            paddingLeft: "0.75rem",
            paddingRight: "1.5rem",
            paddingTop: "0.5rem",
            position: "relative",
            textDecoration: "none",
            "&:hover": {
                opacity: "1.0",
                transition: ["opacity", "0.3s"],
            },
            "&:not(:last-child)::after": {
                borderRightColor: "currentColor",
                borderRightWidth: "2px",
                borderRightStyle: "solid",
                borderTopWidth: "2px",
                borderTopStyle: "solid",
                borderTopColor: "currentColor",
                content: "''",
                display: "block",
                height: "0.5rem",
                position: "absolute",
                right: "0.25rem",
                top: "1rem",
                transform: "rotate(45deg)",
                width: "0.5rem",
            },
            "&.is-active": {
                cursor: "default",
                opacity: "1.0",
                pointerEvents: "none",
            },
            apply: "links.crumb",
        },
        ".{{prefix}}crumbs": {
            borderRadius: "default",
            display: "flex",
            flexWrap: "nowrap",
            marginBottom: "1rem",
            overflow: "hidden",
            overflowX: "auto",
            padding: "0.5rem",
            whiteSpace: ["nowrap", "!important"],
        },
    },
    divider: {
        ".{{prefix}}divider": {
            backgroundColor: "muted",
            border: "0px",
            display: "block",
            height: "0.125rem",
            padding: "0px",
            "&:not(:first-child)": {
                marginTop: "1rem",
            },
            "&:not(:last-child)": {
                marginBottom: "1rem",
            },
            apply: "styles.hr",
        },
    },
    input: {
        ".{{prefix}}input": {
            backgroundColor: "muted",
            borderColor: "transparent",
            borderStyle: "solid",
            borderWidth: "0.125rem",
            borderRadius: "0.5rem",
            boxSizing: "border-box",
            color: "inherit",
            display: "block",
            fontFamily: "inherit",
            fontSize: "inherit",
            fontWeight: "normal",
            lineHeight: "inherit",
            margin: "0px",
            minWidth: "0px",
            outline: "0px",
            padding: ["0.625rem", "1rem"],
            // verticalAlign: "top",
            width: "100%",
            "&:focus": {
                borderColor: "primary",
            },
            apply: "forms.input",
        },
    },
    label: {
        ".{{prefix}}label": {
            alignItems: "center",
            color: "inherit",
            display: "flex",
            fontSize: "1rem",
            fontWeight: "bold",
            minWidth: "0px",
            paddingBottom: "0.25rem",
            paddingTop: "0.25rem",
            width: "100%",
            apply: "forms.label",
        },
    },
    menu: {
        ".{{prefix}}menu": {
            appearance: "none",
            backgroundColor: "muted",
            borderColor: "transparent",
            borderRadius: "0.5rem",
            borderStyle: "solid",
            borderWidth: "0.125rem",
            color: "currentColor",
            cursor: "pointer",
            display: "block",
            height: "3rem",
            opacity: "0.8",
            paddingLeft: "0.75rem",
            paddingRight: "0.75rem",
            position: "relative",
            width: "3rem",
            zIndex: "400",
            "&:hover": {
                opacity: "1.0",
            },
            "&:before": {
                borderTop: ["0.25rem", "solid", "currentColor"],
                borderBottom: ["0.25rem", "solid", "currentColor"],
                content: "''",
                height: "1.25rem",
                left: "0.5rem",
                position: "absolute",
                width: "1.75rem",
                top: "0.75rem",
            },
            "&:after": {
                backgroundColor: "currentColor",
                content: "''",
                height: "0.25rem",
                left: "0.5rem",
                position: "absolute",
                width: "1.75rem",
                top: "1.25rem",
            },
            apply: "buttons.menu",
        },
    },
    modal: {
        ".{{prefix}}modal": {
            backgroundColor: "white",
            borderRadius: "0.5rem",
            display: "block",
            maxHeight: "90vh",
            maxWidth: "600px",
            overflowY: "auto",
            padding: "2rem",
            width: "100%",
            apply: "dialogs.modal",
        },
    },
    navlink: {
        ".{{prefix}}navlink": {
            borderRadius: "0.5rem",
            color: "inherit",
            cursor: "pointer",
            display: "block",
            fontWeight: "bold",
            margin: "0px",
            padding: "0.75rem",
            textDecoration: ["none", "!important"],
            userSelect: "none",
            whiteSpace: "nowrap",
            width: "100%",
            "&:hover": {
                color: "primary",
            },
            "&.is-active": {
                color: "primary",
            },
            "&.is-disabled": {
                opacity: "0.5",
                pointerEvents: "none",
            },
            apply: "links.nav",
        },
    },
    paragraph: {
        ".{{prefix}}paragraph": {
            display: "block",
            marginBottom: "1rem",
            marginTop: "0px",
            apply: "text.paragraph",
        },
    },
    progress: {
        ".{{prefix}}progress": {
            appearance: "none",
            backgroundColor: "muted",
            border: "none",
            borderRadius: "999px",
            color: "primary",
            display: "block",
            height: "0.5rem",
            margin: ["0px", "!important"],
            overflow: "hidden",
            padding: ["0px", "!important"],
            width: "100%",
            "&::-webkit-progress-bar": {
                backgroundColor: "transparent",
            },
            "&::-webkit-progress-value": {
                backgroundColor: "currentColor",
            },
            "&::-moz-progress-bar": {
                backgroundColor: "currentColor",
            },
            apply: "forms.progress",
        },
    },
    radio: {
        ".{{prefix}}radio": {
            appearance: "none",
            boxSizing: "border-box",
            color: "primary",
            cursor: "pointer",
            display: "inline-block",
            height: "1.25rem",
            margin: "0.125rem",
            position: "relative",
            width: "1.25rem",
            "&:before": {
                borderColor: "muted",
                borderStyle: "solid",
                borderRadius: "100%",
                borderWidth: "0.1875rem",
                content: "''",
                display: "block",
                height: "1.25rem",
                left: "0px",
                position: "absolute",
                top: "0px",
                width: "1.25rem",
            },
            "&:after": {
                backgroundColor: "transparent",
                borderRadius: "999px",
                content: "''",
                display: "block",
                height: "0.5rem",
                left: "0.375rem",
                position: "absolute",
                top: "0.375rem",
                width: "0.5rem",
            },
            "&:hover:after": {
                backgroundColor: "muted",
            },
            "&:checked:after": {
                backgroundColor: ["currentColor", "!important"],
            },
            "&:checked:before": {
                borderColor: ["currentColor", "!important"],
            },
            apply: "forms.radio",
        },
    },
    scrim: {
        ".{{prefix}}scrim": {
            alignItems: "center",
            backgroundColor: "rgba(0,0,0,0.5)",
            display: "flex",
            height: "100%",
            justifyContent: "center",
            left: "0px",
            overflowY: "hidden",
            overflowX: "hidden",
            position: "fixed",
            top: "0px",
            width: "100%",
            zIndex: "400",
            apply: "dialogs.scrim",
        },
    },
    select: {
        ".{{prefix}}select": {
            // appearance: "none",
            backgroundColor: "muted",
            borderColor: "transparent",
            borderStyle: "solid",
            borderWidth: "0.125rem",
            borderRadius: "0.5rem",
            boxSizing: "border-box",
            color: "inherit",
            display: "block",
            fontSize: "inherit",
            lineHeight: "inherit",
            margin: "0px",
            minHeight: "3rem",
            minWidth: "0px",
            outline: "0px",
            padding: ["0.625rem", "1rem"],
            // verticalAlign: "top",
            width: "100%",
            "&:focus": {
                borderColor: "primary",
            },
            apply: "forms.select",
        },
    },
    slider: {
        ".{{prefix}}slider": {
            appearance: "none",
            backgroundColor: "muted",
            borderRadius: "1rem",
            color: "primary",
            cursor: "pointer",
            display: "block",
            height: "0.25rem",
            marginBottom: "0.5rem",
            marginTop: "0.5rem",
            minWidth: "0px",
            outline: "none",
            transition: ["opacity", "0.2s"],
            width: "100%",
            "&:-webkit-slider-thumb,&:-moz-range-thumb,&:-ms-thumb": {
                backgroundColor: "currentColor",
                border: "none",
                borderRadius: "999px",
                boxSizing: "border-box",
                height: "1rem",
                width: "1rem",
            },
            "&:-webkit-slider-thumb": {
                appearance: "none",
            },
            "&:-ms-thumb": {
                marginTop: "0px",
            },
            apply: "forms.slider",
        },
    },
    spinner: {
        ".{{prefix}}spinner": {
            color: "primary",
            display: "inline-block",
            height: "2rem",
            position: "relative",
            width: "2rem",
            "&:before,&:after": {
                border: ["0.25rem", "solid", "transparent"],
                borderRadius: "100%",
                content: "''",
                display: "block",
                height: "2rem",
                left: "0px",
                position: "absolute",
                top: "0px",
                width: "2rem",
            },
            "&:before": {
                borderColor: "currentColor",
                opacity: "0.2",
            },
            "&:after": {
                animationDuration: "1s",
                animationIterationCount: "infinite",
                animationName: "spinnerAnimation",
                animationTimingFunction: "linear",
                borderTopColor: "currentColor",
            },
            "&.is-secondary": {
                color: "secondary"
            },
            apply: "spinners",
        },
        "@keyframes spinnerAnimation": {
            from: {
                transform: "rotate(0deg)",
            },
            to: {
                transform: "rotate(359deg)",
            },
        },
    },
    switch: {
        ".{{prefix}}switch": {
            appearance: "none",
            boxSizing: "border-box",
            color: "primary",
            cursor: "pointer",
            display: "inline-block",
            height: "1.25rem",
            position: "relative",
            width: "2rem",
            "&:after": {
                backgroundColor: "white",
                borderRadius: "100%",
                content: "''",
                display: "block",
                height: "0.875rem",
                left: "0.1875rem",
                position: "absolute",
                top: "0.1875rem",
                transition: ["left", "0.3s", "ease"],
                width: "0.875rem",
                zIndex: "2",
            },
            "&:before": {
                backgroundColor: "muted",
                borderRadius: "2rem",
                content: "''",
                display: "block",
                height: "100%",
                left: "0px",
                position: "absolute",
                top: "0px",
                transition: ["background-color", "0.3s", "ease"],
                width: "100%",
                zIndex: "1",
            },
            "&:checked:after": {
                left: "1rem",
            },
            "&:checked:before": {
                backgroundColor: "currentColor",
            },
            apply: "forms.switch",
        },
    },
    table: {
        ".{{prefix}}table": {
            backgroundColor: "transparent",
            borderCollapse: "separate",
            borderSpacing: "0",
            borderWidth: "0px",
            boxSizing: "border-box",
            display: "table",
            marginBottom: "2rem",
            width: "100%",
            "& tr": {
               boxSizing: "border-box",
               display: "table-row",
            },
            "& th,& td": {
                // backgroundColor: "white",
                boxSizing: "border-box",
                display: "table-cell",
                lineHeight: "inherit",
                padding: "1rem", // "1.5rem",
            },
            "& thead": {
                boxSizing: "border-box",
                display: "table-header-group",
            },
            "& thead th": {
                fontWeight: "600",
                textAlign: "left",
                verticalAlign: "bottom",
            },
            "& tbody": {
                display: "table-row-group",
                verticalAlign: "middle",
            },
            "& tbody td": {
                verticalAlign: "top",
            },
            "& thead tr:first-child th:first-child": {
                borderTopLeftRadius: "0.5rem",
            },
            "& thead tr:first-child th:last-child": {
                borderTopRightRadius: "0.5rem",
            },
            "& tbody tr:last-child td:first-child": {
               borderBottomLeftRadius: "0.5rem",
            },
            "& tbody tr:last-child td:last-child": {
               borderBottomRightRadius: "0.5rem",
            },
            "&.is-divided": {
                "& thead th": {
                    borderBottomColor: "muted",
                    borderBottomStyle: "solid",
                    borderBottomWidth: "0.125rem",
                },
                "& tbody td": {
                    borderTopColor: "muted",
                    borderTopStyle: "solid",
                    borderTopWidth: "0.125rem",
                },
            },
            "&.is-bordered": {
                "& th,& td": {
                    borderColor: "muted",
                    borderStyle: "solid",
                    borderWidth: "0.125rem",
                },
                "& th:not(:last-child),& td:not(:last-child)": {
                    borderRightWidth: ["0px", "!important"],
                },
                "& tbody tr:not(:last-child) td": {
                    borderBottomWidth: ["0px", "!important"],
                },
            },
            "&.is-fixed": {
                tableLayout: "fixed",
            },
            apply: "styles.table",
        },
    },
    textarea: {
        ".{{prefix}}textarea": {
            backgroundColor: "muted",
            borderColor: "transparent",
            borderStyle: "solid",
            borderWidth: "0.125rem",
            borderRadius: "0.5rem",
            boxSizing: "border-box",
            color: "inherit",
            display: "block",
            fontFamily: "inherit",
            fontSize: "inherit",
            lineHeight: "inherit",
            margin: "0px",
            minWidth: "0px",
            outline: "0px",
            padding: ["0.625rem", "1rem"],
            resize: "vertical",
            // verticalAlign: "top",
            width: "100%",
            "&:focus": {
                borderColor: "primary",
            },
            apply: "forms.textarea",
        },
    },
    title: {
        ".{{prefix}}title": {
            display: "block",
            // fontSize: "2.5rem",
            fontWeight: "heading",
            lineHeight: "heading",
            marginBottom: "0.5em",
            padding: "0px",
            "&:not(:first-child)": {
                marginTop: "2rem",
            },
            ...Object.fromEntries([6,5,4,3,2,1].map(index => {
                const headingConfig = {
                    fontSize: `${index}`,
                };
                return [`&.is-${(7 - index)}`, headingConfig];
            })),
            apply: "text.heading",
        },
    },
};