@import 'tailwindcss';
@config "../tailwind.config.js";

html,
body,
#root {
  height: 100%;
  text-align: center;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

select {
  background-position: calc(100% - 0.75rem) center !important;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>")
    no-repeat;
  background-color: rgb(243, 244, 246); /* bg-gray-100 */
  min-width: 200px;
  padding-right: 2rem !important;
  text-transform: capitalize;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.dark {
  background: rgb(3 7 18); /* text-gray-900 */
  color: rgb(243 244 246); /* text-gray-100 */
}

body.dark select {
  background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23f0f0f0' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>")
    no-repeat;
  background-color: rgb(31, 41, 55); /* bg-gray-800 */
}

div.toast {
  border-radius: 10px;
  background: rgb(31, 41, 55); /* bg-gray-800 */
  color: rgb(243, 244, 246); /* text-gray-100 */
  margin-top: 0.5rem;
  padding: 0;
}

body.dark div.toast {
  background: rgb(243 244 246); /* bg-gray-100 */
  color: rgb(31, 41, 55); /* text-gray-800 */
}

div.toast [role='status'] {
  margin: 6px;
}

video {
  border-radius: var(--radius-md);
}
