import { HighContrastSelector, AnimationVariables, normalize } from '../../Styling';
export function getStyles(props) {
    var theme = props.theme, underlined = props.underlined, disabled = props.disabled, hasFocus = props.hasFocus, className = props.className, hasInput = props.hasInput, disableAnimation = props.disableAnimation;
    var palette = theme.palette, fonts = theme.fonts, semanticColors = theme.semanticColors;
    return {
        root: [
            'ms-SearchBox',
            fonts.medium,
            normalize,
            {
                color: palette.neutralPrimary,
                backgroundColor: semanticColors.inputBackground,
                display: 'flex',
                flexDirection: 'row',
                flexWrap: 'nowrap',
                alignItems: 'stretch',
                // The 1px top and bottom padding ensure the input field does not overlap the border
                padding: '1px 0 1px 4px',
                border: "1px solid " + palette.neutralTertiary,
                height: 32,
                selectors: (_a = {},
                    _a[HighContrastSelector] = {
                        border: '1px solid WindowText'
                    },
                    _a[':hover'] = {
                        borderColor: palette.neutralDark,
                        selectors: (_b = {},
                            _b[HighContrastSelector] = {
                                borderColor: 'Highlight'
                            },
                            _b)
                    },
                    _a[':hover $iconContainer'] = {
                        color: palette.themeDark
                    },
                    _a)
            },
            hasFocus && [
                'is-active',
                {
                    borderColor: palette.themePrimary,
                    selectors: (_c = {
                            ':hover': {
                                borderColor: palette.themePrimary
                            }
                        },
                        _c[HighContrastSelector] = {
                            borderColor: 'Highlight'
                        },
                        _c)
                }
            ],
            disabled && [
                'is-disabled',
                {
                    borderColor: palette.neutralLighter,
                    backgroundColor: palette.neutralLighter,
                    pointerEvents: 'none',
                    cursor: 'default'
                }
            ],
            underlined && [
                'is-underlined',
                {
                    borderWidth: '0 0 1px 0',
                    // Underlined SearchBox has a larger padding left to vertically align with the waffle in product
                    padding: '1px 0 1px 8px'
                }
            ],
            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',
                color: palette.themePrimary,
                cursor: 'text'
            },
            hasFocus && {
                width: 4
            },
            disabled && {
                color: palette.neutralTertiary
            },
            !disableAnimation && {
                transition: "width " + AnimationVariables.durationValue1
            }
        ],
        icon: [
            'ms-SearchBox-icon',
            {
                opacity: 1
            },
            hasFocus && {
                opacity: 0
            },
            !disableAnimation && {
                transition: "opacity " + AnimationVariables.durationValue1 + " 0s"
            }
        ],
        clearButton: [
            'ms-SearchBox-clearButton',
            {
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'stretch',
                cursor: 'pointer',
                flexBasis: '32px',
                flexShrink: 0,
                padding: 1,
                color: palette.themePrimary,
                backgroundColor: 'transparent'
            }
        ],
        field: [
            'ms-SearchBox-field',
            normalize,
            {
                border: 'none',
                outline: 'none',
                fontWeight: 'inherit',
                fontFamily: 'inherit',
                fontSize: 'inherit',
                color: palette.neutralPrimary,
                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, _c;
}
//# sourceMappingURL=SearchBox.styles.js.map