"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
function getStyles(props) {
    var theme = props.theme, underlined = props.underlined, disabled = props.disabled, hasFocus = props.hasFocus, className = props.className, hasInput = props.hasInput;
    var palette = theme.palette, fonts = theme.fonts, semanticColors = theme.semanticColors;
    return {
        root: [
            'ms-SearchBox',
            fonts.medium,
            Styling_1.normalize,
            {
                color: palette.neutralPrimary,
                display: 'flex',
                flexDirection: 'row',
                flexWrap: 'nowrap',
                alignItems: 'stretch',
                padding: '0 0 0 8px',
                border: "1px solid " + palette.neutralTertiary,
                height: 32,
                selectors: (_a = {},
                    _a[Styling_1.HighContrastSelector] = {
                        border: '1px solid WindowText'
                    },
                    _a[':hover'] = {
                        borderColor: palette.neutralDark,
                        $label: {
                            color: palette.black,
                            $iconContainer: {
                                color: palette.themeDark
                            }
                        }
                    },
                    _a)
            },
            hasFocus && [
                'is-active',
                {
                    borderColor: palette.themePrimary,
                    selectors: (_b = {
                            ':hover': {
                                borderColor: palette.themePrimary,
                            }
                        },
                        _b[Styling_1.HighContrastSelector] = {
                            borderColor: 'Highlight'
                        },
                        _b)
                }
            ],
            disabled && [
                'is-disabled',
                {
                    borderColor: palette.neutralLighter,
                    backgroundColor: palette.neutralLighter,
                    pointerEvents: 'none',
                    cursor: 'default',
                }
            ],
            underlined && [
                'is-underlined',
                {
                    borderWidth: '0 0 1px 0'
                }
            ],
            underlined && disabled && {
                backgroundColor: 'transparent'
            },
            hasInput && 'can-clear',
            className
        ],
        iconContainer: [
            'ms-SearchBox-iconContainer',
            {
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                flexShrink: 0,
                fontSize: 16,
                width: 32,
                textAlign: 'center',
                transition: "width " + Styling_1.AnimationVariables.durationValue1,
                color: palette.themePrimary
            },
            hasFocus && {
                width: 4,
                transition: "width  " + Styling_1.AnimationVariables.durationValue1
            },
            disabled && {
                color: palette.neutralTertiary
            }
        ],
        icon: [
            'ms-SearchBox-icon',
            {
                opacity: 1,
                transition: "opacity " + Styling_1.AnimationVariables.durationValue1 + " 0s"
            },
            hasFocus && {
                opacity: 0,
                transition: "opacity 0 " + Styling_1.AnimationVariables.durationValue1
            }
        ],
        clearButton: [
            'ms-SearchBox-clearButton',
            {
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'stretch',
                cursor: 'pointer',
                flexBasis: '32px',
                flexShrink: 0,
                padding: 1,
                color: palette.themePrimary,
            }
        ],
        field: [
            'ms-SearchBox-field',
            Styling_1.normalize,
            {
                border: 'none',
                outline: 'none',
                fontWeight: 'inherit',
                fontFamily: 'inherit',
                fontSize: 'inherit',
                color: palette.neutralPrimary,
                backgroundColor: 'transparent',
                flex: '1 1 0px',
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                // This padding forces the text placement to round up.
                paddingBottom: 0.5,
                // This removes the IE specific clear button in the input since we implimented our own
                selectors: {
                    '::-ms-clear': {
                        display: 'none'
                    },
                    '::placeholder': {
                        color: semanticColors.inputPlaceholderText,
                        opacity: 1
                    },
                    ':-ms-input-placeholder': {
                        color: semanticColors.inputPlaceholderText
                    }
                }
            },
            disabled && {
                color: palette.neutralTertiary
            }
        ]
    };
    var _a, _b;
}
exports.getStyles = getStyles;
//# sourceMappingURL=SearchBox.styles.js.map