:root {
  --bg-color: #111b21;
  --color-1: #06cf9c;
  --color-1: #53bdeb;
  --color-1: #00a884;
  --green: #005c4b;
  --green-secondary: #025144;
  --light-grey: #2a3942;
  --primary: #202c33;
  --color-1: #1d282f;
  --bg-color-secondary: #182229;
  --color-1: #111b21;
  --color-1: #101a20;
  --color-1: #0b141a;
  --color-1: #0b141a59;
  --color-1: #000000b3;

  --text-primary: #d1d7db;
  --text-primary-strong: #e9edef;
  --text-secondary: #8696a0;

  --search-input-background: var(--primary);
  --border-color: var(--light-grey);
  --compose-bg-color: var(--light-grey);
  --input-placeholder-color: var(--text-secondary);
  --dropdown-color: var(--primary);

  --border-radius: 0.5rem;
  --header-height: 59px;
  --footer-height: 62px;
  --searchbar-border-radius: var(--border-radius);
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--primary);
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* border: solid 0.2px pink; */
}

html,
body {
  font-family: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial,
    Ubuntu, "Cantarell", "Fira Sans", sans-serif;
  font-size: 14px;
  height: 100%;
}

input[type="search"] {
  border: none;
  outline: none;
  flex-grow: 1;
  color: var(--text-primary);
  background-color: var(--primary);
  border-radius: var(--searchbar-border-radius);
}

input[type="search"]::-webkit-input-placeholder,
input[type="search"]::placeholder {
  color: var(--input-placeholder-color);
}

input[type="search"]::-webkit-search-cancel-button {
  /* Remove default */
  -webkit-appearance: none;

  height: 10px;
  width: 10px;
  background: red;
  cursor: pointer;
}

ul > li {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}