text: "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  exports.useRatingStyles = void 0;
  const react_make_styles_1 = require("@fluentui/react-make-styles");
  const react_tabster_1 = require("@fluentui/react-tabster");
  const useRatingState_1 = require("./useRatingState");
  const useRootStyles = react_make_styles_1.makeStyles({
      root: {
          position: 'relative',
          display: 'inline-flex',
          userSelect: 'none',
          touchAction: 'none',
          verticalAlign: 'bottom',
          height: 'var(--rating-star-size)',
          flexDirection: 'column',
      },
      small: {
          width: '120px',
          '--rating-star-size': '20px',
      },
      medium: {
          width: '144px',
          '--rating-star-size': '24px',
      },
      large: {
          width: '180px',
          '--rating-star-size': '30px',
      },
      focusIndicator: react_tabster_1.createFocusIndicatorStyleRule({
          ':after': {
              content: "''",
              position: 'absolute',
              top: '-8px',
              right: '-8px',
              bottom: '-8px',
              left: '-8px',
              boxSizing: 'border-box',
              border: `2px solid black`,
              borderRadius: '4px',
          },
      }, { selector: 'focus-within' }),
      enabled: {
          cursor: 'pointer',
      },
      disabled: {
          cursor: 'not-allowed',
      },
  });
  const useStarStyles = react_make_styles_1.makeStyles({
      star: (theme) => ({
          display: 'grid',
          outline: 'none',
          whiteSpace: 'nowrap',
          marginLeft: 'calc(var(--rating-star-size) / 2)',
          marginRight: 'calc(var(--rating-star-size) / 2)',
          [`& .${useRatingState_1.activeStarClassName}`]: {
              '> svg': {
                  fill: theme.palette.inherit,
              },
          },
          [`& .${useRatingState_1.inactiveStarClassName}`]: {
              '> svg': {
                  fill: '#dbdbdb',
              },
          },
          [`& .${useRatingState_1.disabledActiveStarClassName}`]: {
              '> svg': {
                  fill: theme.palette.inheritDisabled,
              },
          },
          [`& .${useRatingState_1.disabledInactiveStarClassName}`]: {
              '> svg': {
                  fill: '#f1f1f1',
              },
          },
          '> span': {
              display: 'flex',
              flexDirection: 'column',
              transform: 'translateX(-50%)',
              alignItems: 'center',
              '> svg': {
                  width: 'var(--rating-star-size)',
                  height: 'var(--rating-star-size)',
                  strokeWidth: '3',
              },
          },
      }),
      enabledStar: {
          '> span': (theme) => ({
              '&:hover': {
                  '> svg': {
                      fill: theme.palette.inheritHover,
                      transform: 'scale(1.2, 1.2)',
                  },
              },
              '&:active': {
                  '> svg': {
                      fill: theme.palette.inheritPressed,
                      transform: 'scale(1, 1)',
                  },
              },
              '> svg': {
                  transition: 'transform .1s cubic-bezier(0.33, 0.0, 0.67, 1) filter .1s cubic-bezier(0.33, 0.0, 0.67, 1)',
              },
          }),
      },
  });
  /**
   * Styles for the hidden input slot
   */
  const useInputStyle = react_make_styles_1.makeStyles({
      input: {
          opacity: 0,
          position: 'absolute',
          padding: 0,
          margin: 0,
          width: '100%',
          height: '100%',
          pointerEvents: 'none',
      },
  });
  const useRatingStyles = (state) => {
      const rootStyles = useRootStyles();
      const starWrapperStyles = useStarStyles();
      const inputStyles = useInputStyle();
      state.root.className = react_make_styles_1.mergeClasses(rootStyles.root, rootStyles[state.size], !state.disabled && rootStyles.focusIndicator, !state.readOnly && (state.disabled ? rootStyles.disabled : rootStyles.enabled), state.root.className);
      state.starWrapper.className = react_make_styles_1.mergeClasses(starWrapperStyles.star, !state.readOnly && !state.disabled && starWrapperStyles.enabledStar, state.starWrapper.className);
      !state.readOnly && (state.input.className = react_make_styles_1.mergeClasses(inputStyles.input, state.input.className));
      return state;
  };
  exports.useRatingStyles = useRatingStyles;
  //# sourceMappingURL=useRatingStyles.js.map