"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const polished_1 = require("polished");
const styled_system_1 = require("styled-system");
exports.MaxWidthScale = styled_system_1.style({
    // React prop name
    prop: 'maxWidth',
    // key for theme values
    key: 'maxWidth'
});
exports.ellipsis = () => ({
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    overflow: 'hidden'
});
exports.FormFieldLabel = ({ theme }) => ({
    color: theme.colors.highlightText,
    fontSize: theme.fontSizes[1],
    fontWeight: 600
});
exports.FormFieldError = ({ theme }) => ({
    fontSize: theme.fontSizes[0],
    color: theme.colors.red[0],
    fontWeight: 400
});
exports.textLinkInverted = () => ({
    textDecoration: 'none',
    '&:hover, &:focus': {
        textDecoration: 'underline'
    }
});
exports.ulReset = () => ({
    listStyle: 'none',
    padding: 0,
    margin: 0
});
exports.buttonReset = ({ theme }) => ({
    padding: 0,
    background: 'none',
    textTransform: 'none',
    letterSpacing: 'normal',
    border: 'none',
    cursor: 'pointer',
    transitionDuration: `${theme.transitions.hover.ms}ms`,
    transitionProperty: 'background, color, box-shadow, opacity'
});
exports.inputs = ({ theme }) => ({
    height: 40,
    backgroundColor: theme.colors.gray[1],
    borderRadius: theme.radii[1]
});
exports.getHoverColor = (color) => polished_1.getLuminance(color) > 0.5 ? polished_1.darken(0.2, color) : polished_1.lighten(0.2, color);
exports.visuallyHidden = () => ({
    position: 'absolute',
    width: '1px',
    height: '1px',
    padding: 0,
    margin: '-1px',
    overflow: 'hidden',
    clip: 'rect(0, 0, 0, 0)',
    border: 0
});
//# sourceMappingURL=utils.js.map