"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var GlobalClassNames = {
    root: 'ms-BasePicker',
    text: 'ms-BasePicker-text',
    itemsWrapper: 'ms-BasePicker-itemsWrapper',
    input: 'ms-BasePicker-input'
};
function getStyles(props) {
    var _a;
    var className = props.className, theme = props.theme, isFocused = props.isFocused, inputClassName = props.inputClassName, disabled = props.disabled;
    if (!theme) {
        throw new Error('theme is undefined or null in base BasePicker getStyles function.');
    }
    var semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
    var inputBorder = semanticColors.inputBorder, inputBorderHovered = semanticColors.inputBorderHovered, inputFocusBorderAlt = semanticColors.inputFocusBorderAlt;
    var classNames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
    // The following lines are to create a semi-transparent color overlay for the disabled state with designer's approval.
    // @todo: investigate the performance cost of the calculation below and apply if negligible. Replacing with a static color for now.
    // const rgbColor: IRGB | undefined = cssColor(palette.neutralQuaternaryAlt);
    // const disabledOverlayColor = rgbColor ? `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, 0.29)` : 'transparent';
    var disabledOverlayColor = 'rgba(218, 218, 218, 0.29)';
    return {
        root: [classNames.root, className],
        text: [
            classNames.text,
            {
                display: 'flex',
                position: 'relative',
                flexWrap: 'wrap',
                alignItems: 'center',
                boxSizing: 'border-box',
                minWidth: 180,
                minHeight: 30,
                border: "1px solid " + inputBorder,
                borderRadius: effects.roundedCorner2
            },
            !isFocused &&
                !disabled && {
                selectors: {
                    ':hover': {
                        borderColor: inputBorderHovered
                    }
                }
            },
            isFocused &&
                !disabled && {
                borderColor: inputFocusBorderAlt
            },
            disabled && {
                borderColor: 'transparent',
                selectors: (_a = {
                        ':after': {
                            content: '""',
                            position: 'absolute',
                            top: 0,
                            right: 0,
                            bottom: 0,
                            left: 0,
                            background: disabledOverlayColor
                        }
                    },
                    _a[Styling_1.HighContrastSelector] = {
                        borderColor: 'GrayText',
                        selectors: {
                            ':after': {
                                background: 'none'
                            }
                        }
                    },
                    _a)
            }
        ],
        itemsWrapper: [
            classNames.itemsWrapper,
            {
                display: 'flex',
                flexWrap: 'wrap',
                maxWidth: '100%'
            }
        ],
        input: [
            classNames.input,
            fonts.medium,
            {
                height: 30,
                border: 'none',
                flexGrow: 1,
                outline: 'none',
                padding: '0 6px 0',
                alignSelf: 'flex-end',
                borderRadius: effects.roundedCorner2,
                backgroundColor: 'transparent',
                color: semanticColors.inputText
            },
            inputClassName
        ],
        screenReaderText: Styling_1.hiddenContentStyle
    };
}
exports.getStyles = getStyles;
//# sourceMappingURL=BasePicker.styles.js.map