content: import _extends from "@babel/runtime/helpers/esm/extends";
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
  import React from 'react';
  import PropTypes from 'prop-types';
  import clsx from 'clsx';
  import capitalize from '../utils/capitalize';
  import withStyles from '../styles/withStyles';
  import { darken, lighten } from '../styles/colorManipulator';
  import useTheme from '../styles/useTheme';
  var TRANSITION_DURATION = 4; // seconds
  
  export var styles = function styles(theme) {
    var getColor = function getColor(color) {
      return theme.palette.type === 'light' ? lighten(color, 0.62) : darken(color, 0.5);
    };
  
    var backgroundPrimary = getColor(theme.palette.primary.main);
    var backgroundSecondary = getColor(theme.palette.secondary.main);
    return {
      /* Styles applied to the root element. */
      root: {
        position: 'relative',
        overflow: 'hidden',
        height: 4
      },
  
      /* Styles applied to the root and bar2 element if `color="primary"`; bar2 if `variant="buffer"`. */
      colorPrimary: {
        backgroundColor: backgroundPrimary
      },
  
      /* Styles applied to the root and bar2 elements if `color="secondary"`; bar2 if `variant="buffer"`. */
      colorSecondary: {
        backgroundColor: backgroundSecondary
      },
  
      /* Styles applied to the root element if `variant="determinate"`. */
      determinate: {},
  
      /* Styles applied to the root element if `variant="indeterminate"`. */
      indeterminate: {},
  
      /* Styles applied to the root element if `variant="buffer"`. */
      buffer: {
        backgroundColor: 'transparent'
      },
  
      /* Styles applied to the root element if `variant="query"`. */
      query: {
        transform: 'rotate(180deg)'
      },
  
      /* Styles applied to the additional bar element if `variant="buffer"`. */
      dashed: {
        position: 'absolute',
        marginTop: 0,
        height: '100%',
        width: '100%',
        animation: '$buffer 3s infinite linear'
      },
  
      /* Styles applied to the additional bar element if `variant="buffer"` and `color="primary"`. */
      dashedColorPrimary: {
        backgroundImage: "radial-gradient(".concat(backgroundPrimary, " 0%, ").concat(backgroundPrimary, " 16%, transparent 42%)"),
        backgroundSize: '10px 10px',
        backgroundPosition: '0px -23px'
      },
  
      /* Styles applied to the additional bar element if `variant="buffer"` and `color="secondary"`. */
      dashedColorSecondary: {
        backgroundImage: "radial-gradient(".concat(backgroundSecondary, " 0%, ").concat(backgroundSecondary, " 16%, transparent 42%)"),
        backgroundSize: '10px 10px',
        backgroundPosition: '0px -23px'
      },
  
      /* Styles applied to the layered bar1 and bar2 elements. */
      bar: {
        width: '100%',
        position: 'absolute',
        left: 0,
        bottom: 0,
        top: 0,
        transition: 'transform 0.2s linear',
        transformOrigin: 'left'
      },
  
      /* Styles applied to the bar elements if `color="primary"`; bar2 if `variant` not "buffer". */
      barColorPrimary: {
        backgroundColor: theme.palette.primary.main
      },
  
      /* Styles applied to the bar elements if `color="secondary"`; bar2 if `variant` not "buffer". */
      barColorSecondary: {
        backgroundColor: theme.palette.secondary.main
      },
  
      /* Styles applied to the bar1 element if `variant="indeterminate or query"`. */
      bar1Indeterminate: {
        width: 'auto',
        animation: '$indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite'
      },
  
      /* Styles applied to the bar1 element if `variant="determinate"`. */
      bar1Determinate: {
        transition: "transform .".concat(TRANSITION_DURATION, "s linear")
      },
  
      /* Styles applied to the bar1 element if `variant="buffer"`. */
      bar1Buffer: {
        zIndex: 1,
        transition: "transform .".concat(TRANSITION_DURATION, "s linear")
      },
  
      /* Styles applied to the bar2 element if `variant="indeterminate or query"`. */
      bar2Indeterminate: {
        width: 'auto',
        animation: '$indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite'
      },
  
      /* Styles applied to the bar2 element if `variant="buffer"`. */
      bar2Buffer: {
        transition: "transform .".concat(TRANSITION_DURATION, "s linear")
      },
      // Legends:
      // || represents the viewport
      // -  represents a light background
      // x  represents a dark background
      '@keyframes indeterminate1': {
        //  |-----|---x-||-----||-----|
        '0%': {
          left: '-35%',
          right: '100%'
        },
        //  |-----|-----||-----||xxxx-|
        '60%': {
          left: '100%',
          right: '-90%'
        },
        '100%': {
          left: '100%',
          right: '-90%'
        }
      },
      '@keyframes indeterminate2': {
        //  |xxxxx|xxxxx||-----||-----|
        '0%': {
          left: '-200%',
          right: '100%'
        },
        //  |-----|-----||-----||-x----|
        '60%': {
          left: '107%',
          right: '-8%'
        },
        '100%': {
          left: '107%',
          right: '-8%'
        }
      },
      '@keyframes buffer': {
        '0%': {
          opacity: 1,
          backgroundPosition: '0px -23px'
        },
        '50%': {
          opacity: 0,
          backgroundPosition: '0px -23px'
        },
        '100%': {
          opacity: 1,
          backgroundPosition: '-200px -23px'
        }
      }
    };
  };
  /**
   * ## ARIA
   *
   * If the progress bar is describing the loading progress of a particular region of a page,
   * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
   * attribute to `true` on that region until it has finished loading.
   */
  
  var LinearProgress = React.forwardRef(function LinearProgress(props, ref) {
    var classes = props.classes,
        className = props.className,
        _props$color = props.color,
        color = _props$color === void 0 ? 'primary' : _props$color,
        value = props.value,
        valueBuffer = props.valueBuffer,
        _props$variant = props.variant,
        variant = _props$variant === void 0 ? 'indeterminate' : _props$variant,
        other = _objectWithoutProperties(props, ["classes", "className", "color", "value", "valueBuffer", "variant"]);
  
    var theme = useTheme();
    var rootProps = {};
    var inlineStyles = {
      bar1: {},
      bar2: {}
    };
  
    if (variant === 'determinate' || variant === 'buffer') {
      if (value !== undefined) {
        rootProps['aria-valuenow'] = Math.round(value);
        var transform = value - 100;
  
        if (theme.direction === 'rtl') {
          transform = -transform;
        }
  
        inlineStyles.bar1.transform = "translateX(".concat(transform, "%)");
      } else if (process.env.NODE_ENV !== 'production') {
        console.error('Material-UI: you need to provide a value prop ' + 'when using the determinate or buffer variant of LinearProgress .');
      }
    }
  
    if (variant === 'buffer') {
      if (valueBuffer !== undefined) {
        var _transform = (valueBuffer || 0) - 100;
  
        if (theme.direction === 'rtl') {
          _transform = -_transform;
        }
  
        inlineStyles.bar2.transform = "translateX(".concat(_transform, "%)");
      } else if (process.env.NODE_ENV !== 'production') {
        console.error('Material-UI: you need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.');
      }
    }
  
    return React.createElement("div", _extends({
      className: clsx(classes.root, classes["color".concat(capitalize(color))], className, {
        determinate: classes.determinate,
        indeterminate: classes.indeterminate,
        buffer: classes.buffer,
        query: classes.query
      }[variant]),
      role: "progressbar"
    }, rootProps, {
      ref: ref
    }, other), variant === 'buffer' ? React.createElement("div", {
      className: clsx(classes.dashed, classes["dashedColor".concat(capitalize(color))])
    }) : null, React.createElement("div", {
      className: clsx(classes.bar, classes["barColor".concat(capitalize(color))], (variant === 'indeterminate' || variant === 'query') && classes.bar1Indeterminate, {
        determinate: classes.bar1Determinate,
        buffer: classes.bar1Buffer
      }[variant]),
      style: inlineStyles.bar1
    }), variant === 'determinate' ? null : React.createElement("div", {
      className: clsx(classes.bar, (variant === 'indeterminate' || variant === 'query') && classes.bar2Indeterminate, variant === 'buffer' ? [classes["color".concat(capitalize(color))], classes.bar2Buffer] : classes["barColor".concat(capitalize(color))]),
      style: inlineStyles.bar2
    }));
  });
  process.env.NODE_ENV !== "production" ? LinearProgress.propTypes = {
    /**
     * Override or extend the styles applied to the component.
     * See [CSS API](#css) below for more details.
     */
    classes: PropTypes.object.isRequired,
  
    /**
     * @ignore
     */
    className: PropTypes.string,
  
    /**
     * The color of the component. It supports those theme colors that make sense for this component.
     */
    color: PropTypes.oneOf(['primary', 'secondary']),
  
    /**
     * The value of the progress indicator for the determinate and buffer variants.
     * Value between 0 and 100.
     */
    value: PropTypes.number,
  
    /**
     * The value for the buffer variant.
     * Value between 0 and 100.
     */
    valueBuffer: PropTypes.number,
  
    /**
     * The variant to use.
     * Use indeterminate or query when there is no progress value.
     */
    variant: PropTypes.oneOf(['determinate', 'indeterminate', 'buffer', 'query'])
  } : void 0;
  export default withStyles(styles, {
    name: 'MuiLinearProgress'
  })(LinearProgress);