"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
var Utilities_1 = require("../../Utilities");
var MS_HIGHCONTRAST_ACTIVE = '@media screen and (-ms-high-contrast: active)';
var _getDisabledStyles = Utilities_1.memoizeFunction(function (theme) {
    var palette = theme.palette;
    var SpinButtonTextColorDisabled = palette.neutralTertiaryAlt;
    var SpinButtonBackgroundColorDisabled = palette.neutralLighter;
    var SpinButtonBorderColorDisabled = palette.neutralLighter;
    return {
        backgroundColor: SpinButtonBackgroundColorDisabled,
        borderColor: SpinButtonBorderColorDisabled,
        pointerEvents: 'none',
        cursor: 'default',
        color: SpinButtonTextColorDisabled,
        selectors: (_a = {},
            _a[MS_HIGHCONTRAST_ACTIVE] = {
                color: 'GrayText'
            },
            _a)
    };
    var _a;
});
exports.getArrowButtonStyles = Utilities_1.memoizeFunction(function (theme, isUpArrow, customSpecificArrowStyles) {
    var palette = theme.palette;
    var ArrowButtonTextColor = palette.neutralPrimary;
    var ArrowButtonTextColorPressed = palette.white;
    var ArrowButtonBackgroundHovered = palette.neutralLight;
    var ArrowButtonBackgroundPressed = palette.themePrimary;
    var defaultArrowButtonStyles = {
        root: {
            outline: 'none',
            display: 'block',
            height: '50%',
            width: '14px',
            paddingTop: '0',
            paddingRight: '0',
            paddingBottom: '0',
            paddingLeft: '0',
            backgroundColor: 'transparent',
            textAlign: 'center',
            cursor: 'default',
            color: ArrowButtonTextColor
        },
        rootHovered: {
            backgroundColor: ArrowButtonBackgroundHovered
        },
        rootChecked: {
            backgroundColor: ArrowButtonBackgroundPressed,
            color: ArrowButtonTextColorPressed,
            selectors: (_a = {},
                _a[MS_HIGHCONTRAST_ACTIVE] = {
                    backgroundColor: 'Highlight',
                    color: 'HighlightText'
                },
                _a)
        },
        rootPressed: {
            backgroundColor: ArrowButtonBackgroundPressed,
            color: ArrowButtonTextColorPressed,
            selectors: (_b = {},
                _b[MS_HIGHCONTRAST_ACTIVE] = {
                    backgroundColor: 'Highlight',
                    color: 'HighlightText'
                },
                _b)
        },
        rootDisabled: {
            opacity: 0.5,
            selectors: (_c = {},
                _c[MS_HIGHCONTRAST_ACTIVE] = {
                    color: 'GrayText',
                    opacity: 1,
                },
                _c)
        },
        icon: {
            fontSize: '6px',
            marginTop: '0',
            marginRight: '0',
            marginBottom: '0',
            marginLeft: '0'
        }
    };
    // No specific styles needed as of now.
    var defaultUpArrowButtonStyles = {};
    var defaultDownArrowButtonStyles = {};
    return Styling_1.concatStyleSets(defaultArrowButtonStyles, isUpArrow ? defaultUpArrowButtonStyles : defaultDownArrowButtonStyles, customSpecificArrowStyles);
    var _a, _b, _c;
});
exports.getStyles = Utilities_1.memoizeFunction(function (theme, customStyles) {
    var fonts = theme.fonts, palette = theme.palette;
    var SpinButtonRootBorderColor = palette.neutralTertiaryAlt;
    var SpinButtonRootBorderColorHovered = palette.neutralSecondary;
    var SpinButtonRootBorderColorFocused = palette.themePrimary;
    var SpinButtonTextColorDisabled = palette.neutralTertiaryAlt;
    var SpinButtonInputTextColor = palette.neutralPrimary;
    var SpinButtonInputTextColorSelected = palette.white;
    var SpinButtonInputBackgroundColorSelected = palette.themePrimary;
    var defaultStyles = {
        root: {
            outline: 'none',
            fontSize: Styling_1.FontSizes.medium,
            width: '100%',
            minWidth: '86px',
            paddingTop: '2px',
            paddingRight: '2px',
            paddingBottom: '2px',
            paddingLeft: '2px',
        },
        labelWrapper: {
            display: 'inline-flex'
        },
        labelWrapperStart: {
            float: 'left',
            marginRight: '10px'
        },
        labelWrapperEnd: {
            float: 'right',
            marginLeft: '10px'
        },
        labelWrapperTop: {
            marginBottom: '10px'
        },
        labelWrapperBottom: {
            marginTop: '10px'
        },
        icon: {
            paddingTop: '2px',
            paddingRight: '5px',
            paddingBottom: '2px',
            paddingLeft: '5px',
            fontSize: '20px'
        },
        label: {
            pointerEvents: 'none',
            paddingTop: '2px',
            paddingRight: '0',
            paddingBottom: '2px',
            paddingLeft: '0',
        },
        labelDisabled: {
            cursor: 'default',
            color: SpinButtonTextColorDisabled,
            selectors: (_a = {},
                _a[MS_HIGHCONTRAST_ACTIVE] = {
                    color: 'GrayText'
                },
                _a)
        },
        spinButtonWrapper: {
            display: 'flex',
            height: '26px',
            minWidth: '86px',
            borderWidth: '1px',
            borderStyle: 'solid',
            borderColor: SpinButtonRootBorderColor,
        },
        spinButtonWrapperTopBottom: {
            width: '100%'
        },
        spinButtonWrapperHovered: {
            borderColor: SpinButtonRootBorderColorHovered,
            outline: '2px dashed transparent',
            selectors: (_b = {},
                _b[MS_HIGHCONTRAST_ACTIVE] = {
                    borderColor: 'Highlight'
                },
                _b)
        },
        spinButtonWrapperFocused: {
            borderColor: SpinButtonRootBorderColorFocused,
            outline: '2px dashed transparent',
            selectors: (_c = {},
                _c[MS_HIGHCONTRAST_ACTIVE] = {
                    borderColor: 'Highlight'
                },
                _c)
        },
        spinButtonWrapperDisabled: _getDisabledStyles(theme),
        input: {
            boxSizing: 'border-box',
            boxShadow: 'none',
            borderStyle: 'none',
            marginTop: '0',
            marginRight: '0',
            marginBottom: '0',
            marginLeft: '0',
            fontSize: Styling_1.FontSizes.medium,
            color: SpinButtonInputTextColor,
            height: '100%',
            paddingTop: '3px',
            paddingRight: '3px',
            paddingBottom: '4px',
            paddingLeft: '4px',
            outline: '0',
            textOverflow: 'ellipsis',
            display: 'block',
            float: 'left',
            width: 'calc(100% - 14px)',
            minWidth: '72px',
            overflow: 'hidden',
            cursor: 'text',
            userSelect: 'text'
        },
        inputTextSelected: {
            backgroundColor: SpinButtonInputBackgroundColorSelected,
            color: SpinButtonInputTextColorSelected,
            selectors: (_d = {},
                _d[MS_HIGHCONTRAST_ACTIVE] = {
                    backgroundColor: 'Highlight',
                    borderColor: 'Highlight',
                    color: 'HighlightText',
                },
                _d)
        },
        inputDisabled: _getDisabledStyles(theme),
        arrowButtonsContainer: {
            outline: 'none',
            fontSize: '12px',
            display: 'block',
            float: 'left',
            height: '100%',
            cursor: 'default',
            paddingTop: '0',
            paddingRight: '0',
            paddingBottom: '0',
            paddingLeft: '0',
            boxSizing: 'border-box'
        },
        arrowButtonsContainerDisabled: _getDisabledStyles(theme),
    };
    return Styling_1.concatStyleSets(defaultStyles, customStyles);
    var _a, _b, _c, _d;
});
//# sourceMappingURL=SpinButton.styles.js.map