@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,100&display=swap");

@tailwind base;

/* Chrome, Edge, and Safari */
@media screen and (min-width: 768px) {
  *::-webkit-scrollbar {
    width: 6px;
  }
}

*::-webkit-scrollbar-track {
  background-color: rgb(41, 45, 49);
  padding: 8px;
}

*::-webkit-scrollbar-thumb {
  background-color: rgb(107, 109, 113);
  border-radius: 4px;
}

@tailwind components;
@tailwind utilities;

@layer base {
  html,
  body {
    @apply bg-background;
  }
}

.ProseMirror {
  min-height: 150px;
  max-height: 200px;
  overflow-y: auto;
  outline: none;
}

/* Custom CSS Needed for TipTap PlaceHolder */
.ProseMirror p.is-editor-empty:first-child::before {
  color: #adb5bd;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.ProseMirror * {
  white-space: pre-wrap !important;
  word-wrap: break-word !important;
}

@layer utilities {
  .spoiler-open {
    @apply rounded-sm cursor-text;
  }
  .spoiler-close {
    @apply rounded-sm  text-transparent [&_*]:invisible cursor-pointer select-none bg-gray-600;
  }
  .tab-group {
    @apply border-b border-gray-700 mt-10;
  }
  .tab-list {
    @apply flex flex-wrap -mb-px text-base font-medium text-center text-gray-400;
  }
  .tab-item {
    @apply inline-flex p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-300;
  }
  .min-width {
    min-width: -moz-available;
    min-width: -webkit-fill-available;
  }

  /* Change Autocomplete styles in Chrome*/
  input:-webkit-autofill,
  input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
  }

  .tippy-box[data-theme~="custom"] {
    @apply text-sm font-medium text-white transition-opacity duration-300 bg-gray-700 rounded-lg shadow-sm;
  }

  .tippy-box[data-theme~="custom"][data-placement^="top"]
    > .tippy-arrow::before {
    @apply dark: border-t-gray-700;
  }

  .tippy-box[data-theme~="custom"][data-placement^="left"]
    > .tippy-arrow::before {
    @apply dark: border-l-gray-700;
  }

  .tippy-box[data-theme~="custom"][data-placement^="right"]
    > .tippy-arrow::before {
    @apply dark: border-r-gray-700;
  }

  .tippy-box[data-theme~="custom"][data-placement^="bottom"]
    > .tippy-arrow::before {
    @apply dark: border-b-gray-700;
  }
}
