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

export const EnableHigh = `bg-blue-600
    hover:bg-blue-500
    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-600
    border-gray-500
    active:border-blue-700
    active:text-blue-700
    hover:border-blue-500
    hover:text-blue-500
    focus:outline outline-blue-400/10 outline-8
    focus:border-blue-700/70
    fill-blue-600
    hover:fill-blue-500
    active:fill-blue-700
    focus:fill-blue-700
    stroke-blue-600
    hover:stroke-blue-500
    active:stroke-blue-700
    focus:stroke-blue-700
`;

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-700
    active:bg-blue-100
    focus:bg-blue-100
    fill-gray-900
    stroke-gray-900
    active:fill-blue-600
    active:stroke-blue-600
    `;

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

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