/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
const createSteppedRainbow = colors => {
  return `
    linear-gradient(
      to right,
      ${colors.map((color, i) => {
    const inc = 100 / colors.length;
    const pos = i + 1;
    if (i === 0) {
      return `${color} ${pos * inc}%,`;
    }
    if (i === colors.length - 1) {
      return `${color} ${(pos - 1) * inc}%`;
    }
    return `
            ${color} ${(pos - 1) * inc}%,
            ${color} ${pos * inc}%,
          `;
  }).join('\n')}
    )`;
};
export const rainbow = createSteppedRainbow(["var(--ds-background-accent-purple-bolder, #964AC0)", "var(--ds-background-accent-teal-subtle, #6CC3E0)", "var(--ds-background-accent-orange-subtle, #FCA700)", "var(--ds-background-accent-red-bolder, #C9372C)"]);
export const disabledRainbow = createSteppedRainbow(["var(--ds-background-accent-gray-subtle, #8C8F97)", "var(--ds-background-accent-gray-subtle-hovered, #B7B9BE)", "var(--ds-background-accent-gray-subtle-pressed, #DDDEE1)", "var(--ds-background-accent-gray-subtle-hovered, #B7B9BE)"]);
const barStyles = css({
  position: 'absolute',
  left: 0,
  right: 0,
  top: "var(--ds-space-200, 16px)",
  margin: 'auto',
  width: '12px',
  height: '3px',
  borderRadius: "var(--ds-radius-small, 3px)"
});
const textColorIconWrapper = css({
  position: 'relative'
});
const getBackground = (selectedColor, disabled) => {
  if (selectedColor) {
    return selectedColor;
  }
  if (disabled) {
    return disabledRainbow;
  }
  return rainbow;
};
export const SteppedRainbowIconDecoration = ({
  selectedColor,
  disabled,
  icon
}) => {
  return jsx("div", {
    css: textColorIconWrapper
  }, icon, jsx("div", {
    "data-testid": "toolbar-icon-stepped-rainbow",
    style: {
      background: getBackground(selectedColor, disabled)
    },
    css: barStyles
  }));
};