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

html,
body {
  user-select: none;
}

.flex-center {
  @apply flex items-center justify-center;
}

::-webkit-scrollbar {
  @apply w-[2px]
}

::-webkit-scrollbar-thumb {
  @apply rounded-full w-full cursor-pointer bg-white/[54.42%]
}

@font-face {
  font-family: 'segoeRegular';
  src: url('../../public/fonts/fonnts.com-Segoe_UI_Variable_Static_Display.ttf');
}

@font-face {
  font-family: 'segoeBold';
  src: url('../../public/fonts/fonnts.com-Segoe_UI_Variable_Static_Display_Bold.ttf');
}

@font-face {
  font-family: 'segoeLight';
  src: url('../../public/fonts/fonnts.com-Segoe_UI_Variable_Static_Display_Light.ttf');
}

.activeChat::after {
  content: '';
  @apply bg-lightBlue right-0 bottom-0 top-0 w-1 h-8 transition-all rounded-r-full
}

.noScrollWidth {
  scrollbar-width: none;
}

.bottomBorderLeft::before {
  content: '';
  @apply absolute bg-chatBg rounded-br-2xl z-[999] w-2 left-10 inset-y-0
}

.bottomBorderRight::before {
  content: '';
  @apply absolute bg-chatBg rounded-bl-2xl rounded-tr-xl z-[999] w-2 right-0 top-0 -bottom-px
}

.fillScreen {
  height: calc(100vh - 128px);
}

.z-full {
  z-index: 999999999999999999999
}

.highLightedMessage {
  position: relative;
}

.highLightedMessage::after {
  content: '';
  @apply bg-lightBlue/15 p-1 rounded-md transition-all duration-200 absolute inset-0 w-full z-[9999999999999]
}

.loader {
  border: 4px solid transparent;
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s infinite;
  width: 100%;
  height: 100%;
  position: absolute;
}

@keyframes spin {
  
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
  
}

@media (min-width: 768px) {
  .fillScreen {
    height: calc(100vh - 140px);
  }
}

@media (min-width: 1280px) {
  .fillScreen {
    height: calc(100vh - 170px);
  }
}