:root {
  --background-color: #FFFFFF;
  --foreground-color: #17191C;
  --light-color: #737D8C;
  --primary-color: #0DBD8B;
  --primary-color-disabled: #0dbd8baf;
}

// @media (prefers-color-scheme: dark) {
//   :root {
//     --background-color: #111111;
//     --foreground-color: #f2f5f8;
//   }
// }

#root {
  background-color: var(--background-color);
  color: var(--foreground-color);
  min-height: 100vh;
  width: 100vw;
  font-family: 'Inter', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Arial', 'Helvetica', sans-serif, 'Noto Color Emoji';
}

.app {
  padding: 32px;
}

body {
  margin: 0;
}


button {
  font-weight: 600;
  margin-right: 8px;
}


.chevron::before {
	border-style: solid;
	border-width: 0.25em 0.25em 0 0;
  border-radius: 3px;
	content: '';
	display: inline-block;
	height: 10px;
	position: relative;
	top: 0.15em;
	vertical-align: top;
	width: 10px;
	left: 0.25em;
	transform: rotate(-135deg);
  margin-right: 5px;
}

.chevron.down::before {
	transform: rotate(-225deg);
  border-color: var(--light-color);
  float: right;
}


.chevron.up::before {
	transform: rotate(-45deg);
  border-color: var(--light-color);
  float: right;
}