import * as React from "react";
import { toPx } from "@microsoft/fast-jss-utilities";
import { Link } from "react-router-dom";
import manageJss from "@microsoft/fast-jss-manager-react";
import devSiteDesignSystemDefaults from "../design-system";
const styles = {
    componentViewToggle: {
        width: toPx(40),
        height: toPx(38),
        display: "flex",
        position: "relative",
        alignItems: "center",
        border: `${toPx(1)} solid transparent`,
        justifyContent: "center",
        borderRadius: toPx(2),
        margin: toPx(2),
        "&[aria-current=\"page\"]": {
            "&::before": {
                content: "''",
                position: "absolute",
                display: "block",
                width: toPx(32),
                left: toPx(4),
                bottom: toPx(-1),
                borderRadius: `${toPx(2)} ${toPx(2)} 0 0`,
                height: toPx(2),
                background: (config) => config.brandColor
            }
        },
        "&:hover": {
            cursor: "pointer",
            background: "rgba(0, 0, 0, 0.04)"
        },
        "&:focus": {
            outline: "none",
            border: (config) => {
                return `${toPx(1)} solid ${config.brandColor || devSiteDesignSystemDefaults.brandColor}`;
            }
        }
    }
};
class ComponentViewToggle extends React.Component {
    render() {
        return (React.createElement(Link, { className: this.props.managedClasses.componentViewToggle, to: this.props.to, onClick: this.props.onClick, "aria-label": this.props.label, "aria-current": this.props.current ? "page" : null },
            React.createElement("span", { dangerouslySetInnerHTML: { __html: this.props.glyph } })));
    }
}
export default manageJss(styles)(ComponentViewToggle);
//# sourceMappingURL=component-view-toggle.js.map