'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _icons = require('../../Icon/icons');

var _icons2 = _interopRequireDefault(_icons);

var _themeGet = require('../../../extensions/themeGet');

var _themeGet2 = _interopRequireDefault(_themeGet);

var _StepContainer = require('./StepContainer');

var _StepContainer2 = _interopRequireDefault(_StepContainer);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var CIRCLE_SIZE = 32;

exports.default = _styledComponents2.default.div.attrs({
  number: function number(props) {
    return props.complete ? (0, _icons2.default)('checkmark') : props.number;
  },
  numberFont: function numberFont(props) {
    return props.complete ? (0, _themeGet2.default)('fonts.icon')(props) : (0, _themeGet2.default)('fonts.default')(props);
  },
  numberColor: function numberColor(props) {
    return props.complete ? (0, _themeGet2.default)('colors.text.inverted')(props) : (0, _themeGet2.default)('colors.text.default')(props);
  },
  numberBorderColor: function numberBorderColor(props) {
    return props.complete ? (0, _themeGet2.default)('colors.positive.default')(props) : (0, _themeGet2.default)('colors.border.light')(props);
  }
}).withConfig({
  displayName: 'StepNumber'
})(['width:', 'px;height:', 'px;&:before{display:inline-block;font-size:', 'px;content:"', '";font-family:', ';width:', 'px;height:', 'px;line-height:', 'px;background-color:', ';border-radius:2em;border-width:', ';border-style:solid;border-color:', ';text-align:center;color:', ';}', ' > &{flex:0 0 auto;}'], CIRCLE_SIZE, CIRCLE_SIZE, function (props) {
  return props.complete ? CIRCLE_SIZE * 2 / 3 : CIRCLE_SIZE * 2 / 5;
}, function (props) {
  return props.number;
}, function (props) {
  return props.numberFont;
}, CIRCLE_SIZE, CIRCLE_SIZE, CIRCLE_SIZE, function (props) {
  return props.complete ? (0, _themeGet2.default)('colors.positive.default')(props) : (0, _themeGet2.default)('colors.background.default')(props);
}, (0, _themeGet2.default)('thicknesses.normal'), function (props) {
  return props.numberBorderColor;
}, function (props) {
  return props.numberColor;
}, _StepContainer2.default);