"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IconButton = void 0;
var React = require("react");
var typestyle_1 = require("typestyle");
var colors_1 = require("../utils/colors");
var icon = typestyle_1.style({
    color: colors_1.colors.icon,
    display: 'inline-flex',
    flexDirection: 'column',
    alignItems: 'center',
    cursor: 'pointer',
    border: 'none',
    backgroundColor: 'transparent',
    outline: 'none',
    padding: 0,
    $nest: {
        '&>svg': {
            fontSize: '1.5em'
        }
    }
});
var active = typestyle_1.style({
    color: colors_1.colors.selected
});
var disabled = typestyle_1.style({
    opacity: 0.5,
    pointerEvents: 'none'
});
var label = typestyle_1.style({
    marginTop: 2,
    fontSize: '0.75em',
    fontWeight: 700
});
var marginHorizontal = typestyle_1.style({
    marginLeft: 16,
    marginRight: 0
});
function IconButton(props) {
    return (React.createElement("button", { className: typestyle_1.classes(icon, props.active && active, props.disabled && disabled, props.margin && marginHorizontal, props.className), onClick: props.onClick },
        props.children,
        props.label ? React.createElement("span", { className: label }, props.label) : null));
}
exports.IconButton = IconButton;
//# sourceMappingURL=IconButton.js.map