@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
  }

  .sidebar-component-card {
    @apply transition-all overflow-hidden 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
  }
  .symbols-sidebar-row {
    @apply elements-sidebar-row
  }

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

  .mainmenu-bg {
    @apply bg-blue-100 h-full w-full
  }

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

  .normal-btn {
    @apply  text-sm
      py-2 px-4
      rounded-full border-0
      font-semibold
      transition-all
      bg-blue-100 text-blue-700
      hover:bg-blue-200
  }

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

  .bar {
    @apply fixed z-20 flex flex-col top-0 left-0
      h-full w-16 bg-slate-100
  }

  .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
  }

  .radio-button-icon {
    @apply rounded-md shadow-sm bg-white w-8 cursor-pointer inline-block
  }

  .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
  }

  .contextmenu-item {
    @apply px-2 py-1 hover:bg-slate-300 text-left
  }

  .input-group {
    @apply w-full
        text-xs font-medium transition-all text-gray-800 mt-1 px-3 py-2
        bg-white border-2 border-white rounded-lg placeholder-gray-800
        focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500
        disabled:bg-slate-300 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none;
  }
}