/*Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind base;
@tailwind components;
@tailwind utilities;

/** Global scrollbar styles */
html {
  --scrollbarBG: #fff;
  --thumbBG: #ccc;
  scroll-behavior: smooth;
}

#calendar .grid {
  --sc-theme-calendar-colors-background-highlight: var(--main-primary-color);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
  border-radius: 10px;
  border: 2px solid var(--scrollbarBG);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: revert;
  font-weight: revert;
  margin: 0.8em 0;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  margin-top: 0px !important;
  margin-bottom: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6,
.dark .prose li,
.dark .prose strong,
.dark .prose li::marker,
.dark .prose p {
  color: #fff;
}

code {
  white-space: pre-wrap;
}

[aria-current] :global(svg.carbon-icon),
.active :global(svg.carbon-icon) {
  fill: var(--main-primary-color);
}

.prose a {
  color: var(--main-primary-color);
}

.success :global(svg.carbon-icon) {
  fill: green;
}

:global(svg.carbon-icon.error) {
  fill: red;
}

.dark :global(svg.carbon-icon) {
  fill: #fff;
}

@tailwind components;

@tailwind utilities;