/* Fonts */
@import url("./font/geist.css");
@import url("./font/material-symbols-rounded.css");
/* TODO: This is ~4.5MB. We can optimize it by selecting the icons and maybe reducing variants. */

/* CKEditor */
@import url("./vendor/ckeditor5.css");

/* App */
@import url(./components/WFApp/index.css);
@import url(./components/WFDiv/index.css);
@import url(./components/WFSpan/index.css);
@import url(./components/WFEditor/index.css);
@import url(./components/WFLogin/index.css);
@import url(./components/WFWelcomeMobile/index.css);
@import url(./components/WFWelcomeDesktop/index.css);
@import url(./components/WFWelcomeDesktop_ViewWorkflows/index.css);
@import url(./components/WFWelcomeDesktop_ViewServices/index.css);
@import url(./components/WFWelcomeDesktop_ViewOrganization/index.css);
@import url(./components/WFWelcomeDesktop_ViewSettings/index.css);

/* Blocks & Lines */
@import url(./components/WFLine/index.css);
@import url(./components/WFBlock/index.css);
@import url(./components/WFBlockServiceEvent/index.css);
@import url(./components/WFBlockServiceAction/index.css);
@import url(./components/WFBlockAny/index.css);
@import url(./components/WFBlockAll/index.css);
@import url(./components/WFBlockIf/index.css);
@import url(./components/WFBlockFor/index.css);
@import url(./components/WFBlockDelay/index.css);
@import url(./components/WFBlockNote/index.css);

/* UI */
@import url(./components/WFButton/index.css);
@import url(./components/WFCheckbox/index.css);
@import url(./components/WFCtxmenu/index.css);
@import url(./components/WFInsertBlock/index.css);
@import url(./components/WFInsertTag/index.css);

/* Form */
@import url(./components/WFForm/index.css);
@import url(./components/WFHint/index.css);

/* Tag */
@import url(./components/WFTag/index.css);
@import url(./components/WFTagTree/index.css);
@import url(./components/WFTagTreeSelectable/index.css);

/* Various */
@import url(./components/WFAuthenticationForm/index.css);
@import url(./components/WFPager/index.css);

:root {
  --base-unit: 12px;
  --base-unit-half: calc(var(--base-unit) / 2);
  --base-unit-quarter: calc(var(--base-unit) / 4);
  --base-unit-third: calc(var(--base-unit) / 3);
  --base-unit-double: calc(var(--base-unit) * 2);

  --header-height: 72px;
  --sidebar-width: 340px;

  --connector-width: 16px;
  --connector-height: 45px;

  --border-radius-outer: 8px;
  --border-radius-inner: 4px;

  --color-black: #000000;
  --color-white: #ffffff;
  --color-red: #ff3300;
  --color-blue: #0099ff;
  --color-orange: #ff9900;
  --color-green: #99ff99;
  --color-blue-gradient-start: #0099ff;
  --color-blue-gradient-end: #00c9ff;
  --color-red-gradient-start: #dd0000;
  --color-red-gradient-end: #ff3300;

  --color-mono-000: hsl(0, 0%, 0.0%);
  --color-mono-025: hsl(0, 0%, 2.5%);
  --color-mono-050: hsl(0, 0%, 5.0%);
  --color-mono-075: hsl(0, 0%, 7.5%);
  --color-mono-100: hsl(0, 0%, 10.0%);
  --color-mono-125: hsl(0, 0%, 12.5%);
  --color-mono-150: hsl(0, 0%, 15.0%);
  --color-mono-175: hsl(0, 0%, 17.5%);
  --color-mono-200: hsl(0, 0%, 20.0%);
  --color-mono-225: hsl(0, 0%, 22.5%);
  --color-mono-250: hsl(0, 0%, 25.0%);
  --color-mono-275: hsl(0, 0%, 27.5%);
  --color-mono-300: hsl(0, 0%, 30.0%);
  --color-mono-325: hsl(0, 0%, 32.5%);
  --color-mono-350: hsl(0, 0%, 35.0%);
  --color-mono-375: hsl(0, 0%, 37.5%);
  --color-mono-400: hsl(0, 0%, 40.0%);
  --color-mono-425: hsl(0, 0%, 42.5%);
  --color-mono-450: hsl(0, 0%, 45.0%);
  --color-mono-475: hsl(0, 0%, 47.5%);
  --color-mono-500: hsl(0, 0%, 50.0%);
  --color-mono-525: hsl(0, 0%, 52.5%);
  --color-mono-550: hsl(0, 0%, 55.0%);
  --color-mono-575: hsl(0, 0%, 57.5%);
  --color-mono-600: hsl(0, 0%, 60.0%);
  --color-mono-625: hsl(0, 0%, 62.5%);
  --color-mono-650: hsl(0, 0%, 65.0%);
  --color-mono-675: hsl(0, 0%, 67.5%);
  --color-mono-700: hsl(0, 0%, 70.0%);
  --color-mono-725: hsl(0, 0%, 72.5%);
  --color-mono-750: hsl(0, 0%, 75.0%);
  --color-mono-775: hsl(0, 0%, 77.5%);
  --color-mono-800: hsl(0, 0%, 80.0%);
  --color-mono-825: hsl(0, 0%, 82.5%);
  --color-mono-850: hsl(0, 0%, 85.0%);
  --color-mono-875: hsl(0, 0%, 87.5%);
  --color-mono-900: hsl(0, 0%, 90.0%);
  --color-mono-925: hsl(0, 0%, 92.5%);
  --color-mono-950: hsl(0, 0%, 95.0%);
  --color-mono-975: hsl(0, 0%, 97.5%);
  --color-mono-1000: hsl(0, 0%, 100.0%);

  /* Generic Text */
  --color-text-primary: light-dark(var(--color-mono-100), var(--color-mono-900));
  --color-text-secondary: light-dark(var(--color-mono-500), var(--color-mono-700));
  --color-text-tertiary: light-dark(var(--color-mono-750), var(--color-mono-550));

  /* 1px transparent png, so images fade in once loaded */
  --background-image-placeholder: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=);

  /* Page */
  --page-background-color: light-dark(var(--color-mono-950), var(--color-mono-175));

  /* Pane */
  --pane-background-color: light-dark(var(--color-mono-1000), var(--color-mono-225));
  --pane-border-color: light-dark(var(--color-mono-975), var(--color-mono-200));
  --pane-color-text-primary: light-dark(var(--color-mono-100), var(--color-mono-900));
  --pane-color-text-secondary: light-dark(var(--color-mono-300), var(--color-mono-700));
  --pane-horizontal-line-color: light-dark(var(--color-mono-900), var(--color-mono-300));

  /* Popup */
  --popup-background-color: light-dark(var(--color-mono-1000), var(--color-mono-250));
  --popup-background-color-hover: light-dark(var(--color-mono-975), var(--color-mono-275));
  --popup-background-color-active: light-dark(var(--color-mono-950), var(--color-mono-225));
  --popup-border-color: light-dark(var(--color-mono-950), var(--color-mono-200));
  --popup-border-style: 1px solid var(--popup-border-color);
  --popup-border-color-hover: light-dark(var(--color-mono-800), var(--color-mono-225));
  --popup-border-style-hover: 1px solid var(--popup-border-color-hover);
  --popup-border-color-active: light-dark(var(--color-mono-700), var(--color-mono-175));
  --popup-border-style-active: 1px solid var(--popup-border-color-active);
  --popup-border-radius-outer: var(--border-radius-outer);
  --popup-border-radius-inner: var(--border-radius-inner);
  --popup-box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 24px;
  --popup-text-color-primary: light-dark(var(--color-mono-100), var(--color-mono-900));
  --popup-text-color-secondary: light-dark(var(--color-mono-400), var(--color-mono-700));
  --popup-horizontal-line-color: light-dark(var(--color-mono-900), var(--color-mono-300));

  /* Card */
  --card-background-color: light-dark(var(--color-mono-1000), var(--color-mono-275));
  --card-background-color-hover: light-dark(var(--color-mono-975), var(--color-mono-300));
  --card-background-color-active: light-dark(var(--color-mono-950), var(--color-mono-250));
  --card-border-color: light-dark(var(--color-mono-950), var(--color-mono-300));
  --card-border-style: 1px solid var(--card-border-color);
  --card-border-color-hover: light-dark(var(--color-mono-900), var(--color-mono-325));
  --card-border-style-hover: 1px solid var(--card-border-color-hover);
  --card-border-color-active: light-dark(var(--color-mono-875), var(--color-mono-275));
  --card-border-style-active: 1px solid var(--card-border-color-active);
  --card-border-radius-outer: var(--border-radius-outer);
  --card-border-radius-inner: var(--border-radius-inner);
  --card-box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 24px;
  --card-box-shadow-hover: rgba(0, 0, 0, 0.1) 0px 12px 32px;
  --card-box-shadow-active: rgba(0, 0, 0, 0.1) 0px 16px 40px;
  --card-text-color-primary: light-dark(var(--color-mono-100), var(--color-mono-900));
  --card-text-color-secondary: light-dark(var(--color-mono-300), var(--color-mono-700));
  --card-horizontal-line-color: light-dark(var(--color-mono-900), var(--color-mono-300));
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: var(--font-family);

  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html {
  --font-family: "Geist", "SF Pro Rounded", Helvetica, sans-serif;
}

body {
  overflow: hidden;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}