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

.theme-main {
  --primary-color: 32, 134, 250;
  --secondary-color: 118, 126, 145;
  --primary-text-color: 238, 238, 245;
  --color-modal-background: 44, 44, 44;
  --color-navbar-background: 31, 31,31;
  --color-chat-background: 43, 43, 43;
  --color-user-bubble: 71, 72, 74;
  --color-user-bubble-text: 238, 238, 245;
  --color-waifu-bubble: 233, 99, 226;
  --color-waifu-bubble-text: 238, 238, 245;
}


/*Material icon*/
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.primary { color: rgba(var(--primary-color)) }

/*Tootip cliping */

.clip-top {
  clip-path: polygon(0 0, 100% 50%, 0 100%)
}

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

/* Track */
::-webkit-scrollbar-track {
  background: rgba(var(--secondary-color))
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-color));
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}