import getColour from '../colours';
import type { ValidHex } from '../colours';

export const getFocusRing = (opts?: { background?: ValidHex }) => {
  const ringColour = getColour('border', 'interaction', { state: 'focus' });

  if (opts?.background) {
    return `0 0 0 2px ${opts.background as string}, 0 0 0 2px ${ringColour}`;
  }

  return `0 0 0 2px ${getColour('fill', 'main')}, 0 0 0 4px ${ringColour}`;
};

export const getFocusOutline = () => `${getColour('border', 'interaction', { state: 'focus' })} solid 2px`;

export const getFocusOutlineOffset = () => `2px`;