/** @jsx jsx */
import { css, jsx } from '@emotion/react';
import { N40, N60, N80, P300, R400, T300, Y400 } from '@atlaskit/theme/colors';
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([P300, T300, Y400, R400]);
var disabledRainbow = createSteppedRainbow([N80, N60, N40, N60]);
var barStyles = 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 = css({
  position: 'relative'
});
var getBackground = function getBackground(selectedColor, disabled) {
  if (selectedColor) {
    return selectedColor;
  }
  if (disabled) {
    return disabledRainbow;
  }
  return rainbow;
};
export var SteppedRainbowIconDecoration = function SteppedRainbowIconDecoration(_ref) {
  var selectedColor = _ref.selectedColor,
    disabled = _ref.disabled,
    icon = _ref.icon;
  return jsx("div", {
    css: textColorIconWrapper
  }, icon, jsx("div", {
    "data-testid": "toolbar-icon-stepped-rainbow",
    style: {
      background: getBackground(selectedColor, disabled)
    },
    css: barStyles
  }));
};