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

@layer components {
  .sidebar-title {
    @apply p-6 font-bold
  }

  .sidebar-component {
    @apply transition-all px-2 py-6 text-sm rounded-lg bg-slate-300/60 hover:bg-slate-300
  }

  .elements-sidebar-row {
    @apply pl-6 pr-6 pt-2 pb-2 w-full
  }

  .close-button {
    @apply transition-all w-full h-auto p-4 flex
  }

  .mainmenu-btn {
    @apply transition-all bg-blue-100 hover:bg-blue-200 text-blue-700 text-lg font-semibold p-8  rounded-lg
  }

  .floating-btn {
    @apply h-full w-full text-white align-middle items-center justify-center
  }

  .bar-btn {
    @apply h-16 w-full p-3 bg-slate-100 hover:bg-slate-200
    transition-all text-gray-700 hover:text-gray-600
  }

  .heroicon {
    @apply h-full w-full align-middle items-center justify-center
  }

  .sidebar-tooltip {
    @apply absolute w-auto p-2 m-2 min-w-max left-14
    rounded-md shadow-md
    text-gray-800 bg-slate-100
    dark:text-white dark:bg-gray-800
    text-xs font-bold
    transition-all duration-100 scale-0 origin-left;
  }
}