// place files you want to import through the `$lib` alias in this folder.
export type ButtonColours = {
  fg: string;
  fgDisabled: string;
  bg: string;
  bgActive: string;
  bgHover: string;
};
export const S = {
  card_bg: 'bg-[#ffffff]/20' as const,
  shadow_large: 'shadow-[0_5px_25px_-3px_#00000077]' as const,
  window:
    'outline-[1.5px] outline-[#313135] rounded-xl flex flex-row items-stretch justify-stretch max-h-full' as const,
  window_sidepanel: 'bg-[#28282C] rounded-l-xl p-2 pt-0 min-w-48' as const,
  window_content: 'bg-[#1D1D20] rounded-r-xl p-2 pt-0 flex-1' as const,
  window_content_fullscreen:
    'bg-[#1D1D20] rounded-xl p-2 pt-0 flex-1 max-w-[100%]' as const,
  window_topbar:
    'box-border min-h-[3.5rem] px-1 py-2 font-bold flex items-center justify-center gap-2 sticky top-0 bg-inherit z-50' as const,
  button(colours: 'primary' | 'secondary' | ButtonColours) {
    switch (colours) {
      case 'primary':
        colours = {
          fg: '#dedede',
          fgDisabled: '#2e3436',
          bg: '#3584E4',
          bgActive: '#2A6AB8',
          bgHover: '#4990E7',
        };
        break;
      case 'secondary':
        colours = {
          fg: '#dedede',
          fgDisabled: '#2e3436',
          bg: '#0000',
          bgActive: '#dedede22',
          bgHover: '#dedede11',
        };
        break;
    }
    colours = colours as ButtonColours;
    return `transition-all disabled:grayscale disabled:text-[${colours.fgDisabled}] not-disabled:text-[${colours.fg}] not-disabled:bg-[${colours.bg}] not-disabled:hover:bg-[${colours.bgHover}] not-disabled:active:bg-[${colours.bgActive}] flex items-center justify-center p-2 rounded-xl outline-2 outline-[#0000] not-disabled:focus:outline-[#4C82C999]`;
  },
  input:
    'transition-all bg-[#2E2E32] not-disabled:not-focus:not-active:hover:bg-[#dedede11] p-2 outline-2 outline-[#0000] not-disabled:focus:outline-[#4C82C999]' as const,
  heading: [
    //
    'text-2xl font-bold',
    'text-lg',
  ] as const,
};