"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SteppedRainbowIconDecoration = void 0;
var _react = require("@emotion/react");
var _colors = require("@atlaskit/theme/colors");
/** @jsx jsx */

var createSteppedRainbow = function createSteppedRainbow(colors) {
  return "\n    linear-gradient(\n      to right,\n      ".concat(colors.map(function (color, i) {
    var inc = 100 / colors.length;
    var pos = i + 1;
    if (i === 0) {
      return "".concat(color, " ").concat(pos * inc, "%,");
    }
    if (i === colors.length - 1) {
      return "".concat(color, " ").concat((pos - 1) * inc, "%");
    }
    return "\n            ".concat(color, " ").concat((pos - 1) * inc, "%,\n            ").concat(color, " ").concat(pos * inc, "%,\n          ");
  }).join('\n'), "\n    )");
};
var rainbow = createSteppedRainbow([_colors.P300, _colors.T300, _colors.Y400, _colors.R400]);
var disabledRainbow = createSteppedRainbow([_colors.N80, _colors.N60, _colors.N40, _colors.N60]);
var barStyles = (0, _react.css)({
  position: 'absolute',
  left: 0,
  right: 0,
  top: "var(--ds-space-200, 16px)",
  margin: 'auto',
  width: '12px',
  height: '3px',
  borderRadius: "var(--ds-border-radius, 3px)"
});
var textColorIconWrapper = (0, _react.css)({
  position: 'relative'
});
var getBackground = function getBackground(selectedColor, disabled) {
  if (selectedColor) {
    return selectedColor;
  }
  if (disabled) {
    return disabledRainbow;
  }
  return rainbow;
};
var SteppedRainbowIconDecoration = exports.SteppedRainbowIconDecoration = function SteppedRainbowIconDecoration(_ref) {
  var selectedColor = _ref.selectedColor,
    disabled = _ref.disabled,
    icon = _ref.icon;
  return (0, _react.jsx)("div", {
    css: textColorIconWrapper
  }, icon, (0, _react.jsx)("div", {
    "data-testid": "toolbar-icon-stepped-rainbow",
    style: {
      background: getBackground(selectedColor, disabled)
    },
    css: barStyles
  }));
};