;(function () {
/* EditWidgetsPill — black "Edit widgets" pill at the bottom of the home page. */

const SlidersIcon = () => (
  <svg width={16} height={16} viewBox="0 0 20 20" fill="none">
    <path
      d="M2.5 6.67L12.5 6.67M12.5 6.67C12.5 8.05 13.62 9.17 15 9.17C16.38 9.17 17.5 8.05 17.5 6.67C17.5 5.29 16.38 4.17 15 4.17C13.62 4.17 12.5 5.29 12.5 6.67ZM7.5 13.33L17.5 13.33M7.5 13.33C7.5 14.71 6.38 15.83 5 15.83C3.62 15.83 2.5 14.71 2.5 13.33C2.5 11.95 3.62 10.83 5 10.83C6.38 10.83 7.5 11.95 7.5 13.33Z"
      stroke="#fff"
      strokeWidth={1.66667}
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
);

const EditWidgetsPill = ({ onPress }) => {
  return (
    <div style={styles.wrap}>
      <button
        onClick={onPress}
        style={{
          border: 'none', background: 'transparent', padding: 0, margin: 0,
          cursor: 'pointer', font: 'inherit', color: 'inherit', textAlign: 'inherit',
          ...styles.pill,
        }}
      >
        <SlidersIcon />
        <span style={styles.label}>Edit widgets</span>
      </button>
    </div>
  );
};

const styles = {
  wrap: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    paddingTop: '8px',
    paddingBottom: '8px',
  },
  pill: {
    backgroundColor: '#0E1420',
    paddingLeft: '18px',
    paddingRight: '18px',
    paddingTop: '10px',
    paddingBottom: '10px',
    borderRadius: '42px',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    gap: '8px',
  },
  label: {
    fontFamily: 'Gilroy',
    fontWeight: 700,
    fontSize: '14px',
    color: '#fff',
  },
};

Object.assign(window, { EditWidgetsPill });
})();