@import 'tailwindcss';

@config '../tailwind.config.js';

select {
  /* reset */

  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}
select.minimal {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%);
    /* linear-gradient(to right, #ccc, #ccc); */
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}

select.minimal:focus {
  background-image:
    linear-gradient(45deg, gray 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, gray 50%);
    /* linear-gradient(to right, #ccc, #ccc); */
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  /* border-color: #003ecb; */
  outline: 0;
}


/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@utility no-scrollbar {
  /* Hide scrollbar for Chrome, Safari and Opera */
  &::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

@layer utilities {
  html,
  body {
    margin: 0 auto;
    padding: 0;
  }

  .customScrollbar::-webkit-scrollbar {
    width: 5px; /* width of the entire scrollbar */
    height: 5px;
  }

  .customScrollbar::-webkit-scrollbar-track {
    background: #7878780f; /* color of the tracking area */
  }

  .customScrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(125, 125, 125, 0.9); /* color of the scroll thumb */
    border-radius: 20px; /* roundness of the scroll thumb */
  }

  /* Tiptap Styles */

  .tiptap p.is-editor-empty:first-child::before {
    color: #adb5bd;
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
  }
  

  /* Popup styles*/

  .popup-content {
    margin: auto;
    max-width: 80%;
  }
  .popup-arrow {
    @apply text-neutral-500;
  }
  [role='tooltip'].popup-content {
    width: 200px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 3px;
  }

  .popup-overlay {
    background: rgba(0, 0, 0, 0.5);
  }
  [data-popup='tooltip'].popup-overlay {
    background: transparent;
  }

  /* div#adopt-controller-button {
  @apply !hidden;
}
div#cookie-banner {
  @apply !hidden;
} */
}
