:root {
  --primary: #BB86FC;
  --secondary: #03dac5;
}

.dark {
  --c-text-lighter: white !important;
  --c-text: white !important;
  --c-bg: black !important;
  --c-bg-light: rgba(17, 24, 39, var(--tw-bg-opacity)) !important;
  --c-bg-lighter: rgba(17, 24, 39, var(--tw-bg-opacity)) !important;
}

html, body {
  @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
}

.home {
  --content-width: 100%;
  max-width: 100% !important;
  @apply !px-0;
}

.page a {
  @apply text-green-500 font-semibold;
}

.examples .page, .examples .page-meta, .footer, .sidebar {
  @apply dark:(!bg-black text-white);
}

.examples .page {
  --content-width: 100%;
}

.theme-default-content {
  @apply overflow-scroll md:overflow-hidden;
}

.navbar {
  @apply dark:bg-gray-900;
}

h1 {
  @apply text-xl lg:text-4xl mb-4 font-bold;
}

h2 {
  @apply text-lg lg:text-2xl mb-4 font-semibold;
}

p {
  @apply text-md lg:text-lg;
  line-height: inherit;
  margin: inherit;
}

ul li {
  @apply mt-2;
}

.vue-flow__node.dark {
  @apply bg-gray-800 text-white;
}

.vue-flow__node-selector {
  font-size: 14px;
  background: #f0f2f3;
  border: 1px solid #555;
  border-radius: 5px;
  text-align: center;
}

.vue-flow__node-selector .vue-flow__handle {
  border-color: #f0f2f3;
}

.slider {
  --color: red;
  @apply bg-gray-200 w-full h-[10px] outline-none rounded-full;
  -webkit-appearance: none;
  appearance: none;

  &::-moz-range-thumb {
     @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
     -webkit-appearance: none;
     background: var(--color);
   }
  &::-webkit-slider-thumb {
     @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
     -webkit-appearance: none;
     background: var(--color);
   }
}