@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    --bright-yellow: #fff500;
    --bright-green: #00ff75;
    --bright-magenta: #ff36af;
    --bright-cyan: #00ffff;

    --bright-yellow-rgb: 255, 245, 0;
    --bright-green-rgb: 0, 255, 117;
    --bright-magenta-rgb: 255, 54, 175;
    --bright-cyan-rgb: 0, 255, 255;
  }

  [data-theme="bright-yellow"] {
    --theme-color: #fff500;
    --theme-color-100: rgba(255, 245, 0, 0.13);
  }

  [data-theme="bright-green"] {
    --theme-color: #00ff75;
    --theme-color-100: rgba(0, 255, 117, 0.13);
  }

  [data-theme="bright-magenta"] {
    --theme-color: #ff36af;
    --theme-color-100: rgba(255, 54, 175, 0.13);
  }

  [data-theme="bright-cyan"] {
    --theme-color: #00ffff;
    --theme-color-100: rgba(0, 255, 255, 0.13);
  }
}

@layer utilities {
  .hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    word-break: break-all;
  }
}
