global.css

:root {
  --large-screen: 2560px;
  --small-screen: 768px;
  --sidebar-w-tiny-screen: 250px;
  --sidebar-w: 300px;
  --messages-max-w: 1000px;

  --settings-btn-radius: 6px;
  --scrollbar-w: 9px;

  --text-white: #ECECF1;
  --text-grey:  #8E8E94;
  --text-grey-2: #CCCCCE;

  --text-warning-light-theme: #D19E06;
  --text-warning-dark-theme: #FFC107;
  --text-error-light-theme: red;
  --text-error-dark-theme: #FF8B8B;
  --button-green: #10A37F;

  --blue-focus-outline: 2px solid #2563eb;

  --link-text-dark-theme: #8B8BF7;
  --link-text-dark-theme-visited: #B297CA;

  --progress-ok: #1982C4;
  --progress-warning: #FFCA3A;
  --progress-danger: #EC204F;

  --grey-light-transparent-1: rgba(255, 255, 255, 0.2);
  --grey-light-1-alpha192: #F7F7F7C0;
  --grey-dark-2-alpha192: #343541C0;

  --grey-light-1: #F7F7F7;
  --grey-light-2: #CACACA;
  --grey-light-3: #8E8E94;
  --grey-dark-1: #444654;
  --grey-dark-2: #343541;
  --grey-dark-3:#202123;

  --modal-overlay: rgba(52,53,65,.9);
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: Lato, Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  color: black;
}
#root {
  height: 100%;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
*:focus:not(:focus-visible) {
  outline: none;
}

textarea {
  font-family: inherit;
  font-size: inherit;
}

h1, h2, h3, h4, h5 {
  padding: 0;
  margin: 0;
}

ol {
  list-style-type: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

/* For elems in flex item, need overflow: hidden on parent! */
.ellipsis-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Scrollbar */
html::-webkit-scrollbar {
  width: var(--scrollbar-w);
}
html::-webkit-scrollbar-thumb { /* Foreground */
  border-radius: 6px;
  background: var(--grey-light-2);
}
html::-webkit-scrollbar-track { /* Background */
  background: var(--grey-light-1);
}
.scroll-dark::-webkit-scrollbar-track { /* Background */
  background: var(--grey-dark-2);
}
html {
  @supports not selector(::-webkit-scrollbar) {
    scrollbar-width: thin;
    scrollbar-color: var(--grey-light-2) var(--grey-light-1);
  }
}
html.scroll-dark {
  @supports not selector(::-webkit-scrollbar) {
    scrollbar-width: thin;
    scrollbar-color: var(--grey-light-2) var(--grey-dark-2);
  }
}

.dark-theme-bg {
  background: var(--grey-dark-2);
}

/* Lighting up icons on hover. Doesn't work for BLACK things -- add hue-rotate */
.hover-brighten:hover {
  filter: brightness(3);
}