/* -------------------------------------------------------------------------- */
/*                                 styles                           */
/* -------------------------------------------------------------------------- */

export const EnableHigh = `bg-blue-500
    hover:bg-blue-400
    active:bg-blue-700    
    focus:shadow-lg shadow-blue-500
    focus:outline outline-blue-400/10 outline-8
`;

export const DisabledHigh = `bg-gray-200
    focus:outline-none`;

export const GeneralHigh = `
    text-white 
    fill-white
    stroke-white
    `;

export const EnabledMedium = `text-blue-500
    border-gray-500
    active:border-blue-600
    active:text-blue-600
    hover:border-blue-400
    hover:text-blue-400
    focus:outline outline-blue-400/10 outline-8
    focus:border-blue-600/70
    fill-blue-500
    hover:fill-blue-400
    active:fill-blue-600
    focus:fill-blue-600
    stroke-blue-500
    hover:stroke-blue-400
    active:stroke-blue-600
    focus:stroke-blue-600
`;

export const DisabledMedium = `text-gray-200
    border-gray-200
    fill-gray-200
    stroke-gray-200
    focus:outline-none`;

export const GeneralMedium = `bg-white
    border`;

export const EnabledLow = `   text-gray-900
    hover:bg-gray-100
    active:text-blue-600
    active:bg-blue-100
    focus:bg-blue-100
    fill-gray-900
    stroke-gray-900
    active:fill-blue-500
    active:stroke-blue-500
    `;

export const DisabledLow = `text-gray-200
    fill-gray-200
    stroke-gray-200`;

export const GenerealLow = `focus:outline-none
    bg-transparent
`;