html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Makes sure to fill the root element no matter the size of the window */
#root {
  display: flex;
  flex: 1;
}

.light-scrollbar {
  --scroll-thumb-color: #6770b360;
  --scroll-track-color: #dddff766;
}

.dark-scrollbar {
  --scroll-thumb-color: #ffffff1f;
  --scroll-track-color: #202022;
}

/* Sets specific size for the extension popup, otherwise, it shrinks to fit the content */
.body-extension-popup {
  width: 600px;
  height: 600px;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

div {
  user-select: none;
}

input {
  outline: none;
}

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

::-webkit-scrollbar-track {
  background: var(--scroll-track-color);
  border-radius: 13px;
}

::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb-color);
  border-radius: 13px;
}

.button-icon g,
.button-icon path {
  transition: fill 200ms ease-in-out, stroke 200ms ease-in-out;
}
