import cx from "../../../../../../utils/css/cx.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const DelegateRow = function DelegateRow(props) {
  const {
    pct,
    isDropped,
    anyMetThreshold
  } = props;
  return <div role="cell" aria-hidden className={cls('cell-bar', {
    'any-met-threshold': anyMetThreshold
  })}>
      <div className={cls('bar-container')}>
        <div style={{
        width: `${pct * 100}%`
      }} className={cls('bar-foreground')} />
        <div style={{
        width: `${100 - pct * 100}%`
      }} className={cls('bar-background', {
        'has-border': pct !== 0 && pct !== 1,
        dropout: isDropped
      })} />
      </div>
    </div>;
};
export default DelegateRow;