:root {
  --primary-color: #ff0000;
  --opacity: 50%;
}

.element {
  background: color-mix(in srgb, var(--primary-color) var(--opacity), transparent);
} 

@import 'tailwindcss';
/* Only style code NOT inside pre tags */
code:not(pre code) {
  @apply bg-slate-100 text-fuchsia-800 px-1.5 py-1.5 rounded font-black text-sm font-mono;
}

/* Ensure code blocks keep their styling */
pre code {
  @apply bg-transparent text-inherit p-0 rounded-none;
} 

.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    display: none;
  }
} 

/* Example #1: Apply globally to prevent layout shifts () */
html {
  scrollbar-gutter: stable both-edges;
}

/* Example #2: Stable with fallback */
.scrollbar-stable {
  overflow-y: auto;
  scrollbar-gutter: stable;
  
  /* Fallback for older browsers */
  @supports not (scrollbar-gutter: stable) {
    padding-right: 17px; /* Approximate scrollbar width */
    margin-right: -17px;
  }
}