define(["require", "exports", "tslib", "../../Utilities", "../../utilities/positioning", "../../Styling"], function (require, exports, tslib_1, Utilities_1, positioning_1, Styling_1) {
    "use strict";
    var _a, _b, _c;
    Object.defineProperty(exports, "__esModule", { value: true });
    var GlobalClassNames = {
        root: 'ms-Dropdown-container',
        label: 'ms-Dropdown-label',
        dropdown: 'ms-Dropdown',
        title: 'ms-Dropdown-title',
        caretDownWrapper: 'ms-Dropdown-caretDownWrapper',
        caretDown: 'ms-Dropdown-caretDown',
        callout: 'ms-Dropdown-callout',
        panel: 'ms-Dropdown-panel',
        dropdownItems: 'ms-Dropdown-items',
        dropdownItem: 'ms-Dropdown-item',
        dropdownDivider: 'ms-Dropdown-divider',
        dropdownOptionText: 'ms-Dropdown-optionText',
        dropdownItemHeader: 'ms-Dropdown-header',
        titleIsPlaceHolder: 'ms-Dropdown-titleIsPlaceHolder',
        titleHasError: 'ms-Dropdown-title--hasError'
    };
    var DROPDOWN_HEIGHT = 32;
    var DROPDOWN_ITEM_HEIGHT = 36;
    var highContrastAdjustMixin = (_a = {},
        _a[Styling_1.HighContrastSelector + ", " + Styling_1.HighContrastSelectorWhite.replace('@media ', '')] = {
            MsHighContrastAdjust: 'none'
        },
        _a);
    var highContrastItemAndTitleStateMixin = {
        selectors: tslib_1.__assign((_b = {}, _b[Styling_1.HighContrastSelector] = {
            backgroundColor: 'Highlight',
            borderColor: 'Highlight',
            color: 'HighlightText'
        }, _b), highContrastAdjustMixin)
    };
    var highContrastBorderState = {
        selectors: (_c = {},
            _c[Styling_1.HighContrastSelector] = {
                borderColor: 'Highlight'
            },
            _c)
    };
    var MinimumScreenSelector = Styling_1.getScreenSelector(0, Styling_1.ScreenWidthMinMedium);
    exports.getStyles = function (props) {
        var _a, _b, _c, _d, _e, _f, _g;
        var theme = props.theme, hasError = props.hasError, hasLabel = props.hasLabel, className = props.className, isOpen = props.isOpen, disabled = props.disabled, required = props.required, isRenderingPlaceholder = props.isRenderingPlaceholder, panelClassName = props.panelClassName, calloutClassName = props.calloutClassName, calloutRenderEdge = props.calloutRenderEdge;
        if (!theme) {
            throw new Error('theme is undefined or null in base Dropdown getStyles function.');
        }
        var globalClassnames = Styling_1.getGlobalClassNames(GlobalClassNames, theme);
        var palette = theme.palette, semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;
        var rootHoverFocusActiveSelectorNeutralDarkMixin = {
            color: semanticColors.menuItemTextHovered
        };
        var rootHoverFocusActiveSelectorNeutralPrimaryMixin = {
            color: palette.neutralPrimary
        };
        var borderColorError = {
            borderColor: semanticColors.errorText
        };
        var dropdownItemStyle = [
            globalClassnames.dropdownItem,
            {
                backgroundColor: 'transparent',
                boxSizing: 'border-box',
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                padding: '0 8px',
                width: '100%',
                minHeight: DROPDOWN_ITEM_HEIGHT,
                lineHeight: 20,
                height: 0,
                position: 'relative',
                border: '1px solid transparent',
                borderRadius: 0,
                wordWrap: 'break-word',
                overflowWrap: 'break-word',
                textAlign: 'left'
            }
        ];
        var itemSelectors = function (isSelected) {
            var _a;
            if (isSelected === void 0) { isSelected = false; }
            return {
                selectors: (_a = {
                        '&:hover:focus': [
                            {
                                color: palette.neutralDark,
                                backgroundColor: !isSelected ? palette.neutralLighter : palette.neutralLight
                            },
                            highContrastItemAndTitleStateMixin
                        ],
                        '&:focus': [
                            {
                                backgroundColor: !isSelected ? 'transparent' : palette.neutralLight
                            },
                            highContrastItemAndTitleStateMixin
                        ],
                        '&:active': [
                            {
                                color: palette.neutralDark,
                                backgroundColor: !isSelected ? palette.neutralLighter : palette.neutralLight
                            },
                            highContrastItemAndTitleStateMixin
                        ]
                    },
                    _a[Styling_1.HighContrastSelector] = {
                        borderColor: 'Window'
                    },
                    _a["." + Utilities_1.IsFocusVisibleClassName + " &:focus:after"] = {
                        left: 0,
                        top: 0,
                        bottom: 0,
                        right: 0
                    },
                    _a)
            };
        };
        var dropdownItemSelected = dropdownItemStyle.concat([
            {
                backgroundColor: palette.neutralLight,
                color: palette.neutralDark
            },
            itemSelectors(true),
            highContrastItemAndTitleStateMixin
        ]);
        var dropdownItemDisabled = dropdownItemStyle.concat([
            {
                color: semanticColors.disabledText,
                cursor: 'default'
            }
        ]);
        var titleOpenBorderRadius = calloutRenderEdge === positioning_1.RectangleEdge.bottom
            ? effects.roundedCorner2 + " " + effects.roundedCorner2 + " 0 0"
            : "0 0 " + effects.roundedCorner2 + " " + effects.roundedCorner2;
        var calloutOpenBorderRadius = calloutRenderEdge === positioning_1.RectangleEdge.bottom
            ? "0 0 " + effects.roundedCorner2 + " " + effects.roundedCorner2
            : effects.roundedCorner2 + " " + effects.roundedCorner2 + " 0 0";
        return {
            root: [globalClassnames.root, className],
            label: globalClassnames.label,
            dropdown: [
                globalClassnames.dropdown,
                Styling_1.normalize,
                fonts.medium,
                {
                    color: palette.neutralPrimary,
                    borderColor: palette.neutralSecondary,
                    position: 'relative',
                    outline: 0,
                    userSelect: 'none',
                    selectors: (_a = {},
                        _a['&:hover .' + globalClassnames.title] = [
                            !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
                            { borderColor: !isOpen ? palette.neutralPrimary : palette.themePrimary },
                            highContrastBorderState
                        ],
                        _a['&:focus .' + globalClassnames.title] = [!disabled && rootHoverFocusActiveSelectorNeutralDarkMixin],
                        _a['&:focus:after'] = [
                            {
                                pointerEvents: 'none',
                                content: "''",
                                position: 'absolute',
                                boxSizing: 'border-box',
                                top: '0px',
                                left: '0px',
                                width: '100%',
                                height: '100%',
                                // see https://github.com/OfficeDev/office-ui-fabric-react/pull/9182 for semantic color disc
                                border: !disabled ? "2px solid " + palette.themePrimary : 'none',
                                borderRadius: '2px'
                            },
                            highContrastItemAndTitleStateMixin
                        ],
                        _a['&:active .' + globalClassnames.title] = [
                            !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,
                            { borderColor: palette.themePrimary },
                            highContrastBorderState
                        ],
                        _a['&:hover .' + globalClassnames.caretDown] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
                        _a['&:focus .' + globalClassnames.caretDown] = [
                            !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
                            { selectors: tslib_1.__assign((_b = {}, _b[Styling_1.HighContrastSelector] = { color: 'HighlightText' }, _b), highContrastAdjustMixin) }
                        ],
                        _a['&:active .' + globalClassnames.caretDown] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
                        _a['&:hover .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
                        _a['&:focus .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
                        _a['&:active .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,
                        _a['&:hover .' + globalClassnames.titleHasError] = borderColorError,
                        _a['&:active .' + globalClassnames.titleHasError] = borderColorError,
                        _a)
                },
                isOpen && 'is-open',
                disabled && 'is-disabled',
                required && 'is-required',
                required &&
                    !hasLabel && {
                    selectors: (_c = {
                            ':after': {
                                content: "'*'",
                                color: semanticColors.errorText,
                                position: 'absolute',
                                top: -5,
                                right: -10
                            }
                        },
                        _c[Styling_1.HighContrastSelector] = {
                            selectors: {
                                ':after': {
                                    right: -14 // moving the * 4 pixel to right to alleviate border clipping in HC mode.
                                }
                            }
                        },
                        _c)
                }
            ],
            title: [
                globalClassnames.title,
                Styling_1.normalize,
                {
                    backgroundColor: semanticColors.inputBackground,
                    borderWidth: 1,
                    borderStyle: 'solid',
                    borderColor: semanticColors.inputBorder,
                    borderRadius: isOpen ? titleOpenBorderRadius : effects.roundedCorner2,
                    cursor: 'pointer',
                    display: 'block',
                    height: DROPDOWN_HEIGHT,
                    lineHeight: DROPDOWN_HEIGHT - 2,
                    padding: "0 28px 0 8px",
                    position: 'relative',
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis'
                },
                isRenderingPlaceholder && [globalClassnames.titleIsPlaceHolder, { color: semanticColors.inputPlaceholderText }],
                hasError && [globalClassnames.titleHasError, borderColorError],
                disabled && {
                    backgroundColor: semanticColors.disabledBackground,
                    border: 'none',
                    color: semanticColors.disabledText,
                    cursor: 'default',
                    selectors: (_d = {}, _d[Styling_1.HighContrastSelector] = { border: '1px solid GrayText', color: 'GrayText' }, _d)
                }
            ],
            caretDownWrapper: [
                globalClassnames.caretDownWrapper,
                {
                    position: 'absolute',
                    top: 1,
                    right: 8,
                    height: DROPDOWN_HEIGHT,
                    lineHeight: DROPDOWN_HEIGHT - 2 // height minus the border
                },
                !disabled && {
                    cursor: 'pointer'
                }
            ],
            caretDown: [
                globalClassnames.caretDown,
                { color: palette.neutralSecondary, fontSize: fonts.small.fontSize, pointerEvents: 'none' },
                disabled && { color: semanticColors.disabledText, selectors: (_e = {}, _e[Styling_1.HighContrastSelector] = { color: 'GrayText' }, _e) }
            ],
            errorMessage: tslib_1.__assign({ color: semanticColors.errorText }, theme.fonts.small, { paddingTop: 5 }),
            callout: [
                globalClassnames.callout,
                {
                    boxShadow: effects.elevation8,
                    borderRadius: calloutOpenBorderRadius,
                    selectors: (_f = {},
                        _f['.ms-Callout-main'] = { borderRadius: calloutOpenBorderRadius },
                        _f)
                },
                calloutClassName
            ],
            dropdownItemsWrapper: { selectors: { '&:focus': { outline: 0 } } },
            dropdownItems: [globalClassnames.dropdownItems, { display: 'block' }],
            dropdownItem: dropdownItemStyle.concat([itemSelectors()]),
            dropdownItemSelected: dropdownItemSelected,
            dropdownItemDisabled: dropdownItemDisabled,
            dropdownItemSelectedAndDisabled: [dropdownItemSelected, dropdownItemDisabled, { backgroundColor: 'transparent' }],
            dropdownItemHidden: dropdownItemStyle.concat([{ display: 'none' }]),
            dropdownDivider: [globalClassnames.dropdownDivider, { height: 1, backgroundColor: semanticColors.bodyDivider }],
            dropdownOptionText: [
                globalClassnames.dropdownOptionText,
                {
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    minWidth: 0,
                    maxWidth: '100%',
                    wordWrap: 'break-word',
                    overflowWrap: 'break-word',
                    margin: '1px'
                }
            ],
            dropdownItemHeader: [
                globalClassnames.dropdownItemHeader,
                tslib_1.__assign({}, fonts.medium, { fontWeight: Styling_1.FontWeights.semibold, color: semanticColors.menuHeader, background: 'none', backgroundColor: 'transparent', border: 'none', height: DROPDOWN_ITEM_HEIGHT, lineHeight: DROPDOWN_ITEM_HEIGHT, cursor: 'default', padding: '0 8px', userSelect: 'none', textAlign: 'left' })
            ],
            subComponentStyles: {
                label: { root: { display: 'inline-block' } },
                multiSelectItem: {
                    root: {
                        padding: 0
                    },
                    label: {
                        alignSelf: 'stretch',
                        padding: '0 8px',
                        width: '100%'
                    }
                },
                panel: {
                    root: [panelClassName],
                    main: {
                        selectors: (_g = {},
                            // In case of extra small screen sizes
                            _g[MinimumScreenSelector] = {
                                // panelWidth xs
                                width: 272
                            },
                            _g)
                    },
                    contentInner: { padding: '0 0 20px' }
                }
            }
        };
    };
});
//# sourceMappingURL=Dropdown.styles.js.map