"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _default = function _default(theme) {
  return {
    component: {
      fontFamily: theme.typography.font.family2,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    },
    wrapper: {
      width: '100%'
    },
    steps: {
      flex: 1,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: '75%',
      marginLeft: 'auto',
      marginRight: 'auto',
      paddingBottom: 100
    },
    step: {
      width: function width(props) {
        return "".concat(100 / props.steps.length, "%");
      }
    },
    lastStep: {
      width: 'auto !important'
    },
    barWrapper: {
      alignItems: 'center',
      display: 'flex'
    },
    stepCircle: {
      width: 34,
      height: 34,
      borderRadius: '50%',
      border: function border(props) {
        return "3px solid ".concat(props.activeColor || theme.palette.primary.color1);
      },
      position: 'relative',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      cursor: 'pointer',
      '.active &': {
        backgroundColor: function backgroundColor(props) {
          return props.activeColor || theme.palette.primary.color1;
        },
        cursor: 'default'
      },
      '.visited &': {
        backgroundColor: function backgroundColor(props) {
          return props.visitedColor || theme.palette.primary.color3;
        },
        border: function border(props) {
          return "3px solid ".concat(props.visitedColor || theme.palette.primary.color3);
        }
      }
    },
    stepNumber: {
      fontFamily: theme.typography.font.family1,
      fontSize: 15,
      fontWeight: 'bold',
      color: function color(props) {
        return props.activeColor || theme.palette.primary.color1;
      },
      textAlign: 'center',
      '.active &': {
        color: 'white'
      },
      '.visited &': {
        color: 'white'
      }
    },
    stepLabel: {
      position: 'absolute',
      left: '50%',
      marginLeft: -50,
      width: 100,
      bottom: -30,
      fontFamily: theme.typography.font.family1,
      fontSize: 15,
      color: theme.palette.grey[400],
      textAlign: 'center',
      '.active &': {
        color: theme.palette.blueGrey[50],
        fontWeight: 'bold'
      }
    },
    stepBar: {
      height: 4,
      flex: 1,
      backgroundColor: function backgroundColor(props) {
        return props.activeColor || theme.palette.primary.color1;
      },
      '.visited &': {
        backgroundColor: function backgroundColor(props) {
          return props.visitedColor || theme.palette.primary.color3;
        }
      }
    }
  };
};

exports.default = _default;