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

@layer components {
  #root, .Editor, .App {
    @apply overflow-hidden
  }

  .left-sidebar {
    @apply fixed shadow-lg z-20
    w-[calc(100%_-_4rem)] md:w-64
    h-1/4 md:h-full bottom-1/2 md:bottom-0
  }

  .left-sidebar-single {
    @apply fixed shadow-lg z-20
    w-[calc(100%_-_4rem)] md:w-64
    h-1/3 md:h-full bottom-0
  }

  .right-sidebar {
    @apply fixed shadow-lg z-20
    h-1/2 md:h-full bottom-0 md:bottom-0
  }

  

  .sidebar-title {
    @apply p-3 md:p-5 font-bold h-12 md:h-16
  }

  .sidebar-component {
    @apply transition-all px-2 h-12 flex items-center align-middle
      text-sm rounded-lg
      bg-slate-300/80 hover:bg-blue-500 hover:text-slate-50
      disabled:bg-slate-400 disabled:text-slate-500
  }

  .sidebar-component-left {
    @apply transition-all px-2 h-12 align-middle flex items-center text-sm rounded-l-lg bg-slate-300/80 group-hover:bg-blue-500 group-hover:text-slate-50
  }

  .sidebar-component-right {
    @apply transition-all px-2 h-12 align-middle flex items-center text-sm rounded-r-lg bg-slate-400/80 group-hover:bg-blue-600 group-hover:text-slate-50
  }

  .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 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-30 flex flex-col top-0 left-0
      h-full w-16 bg-slate-100 shadow-sm
  }

  .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 {
    @apply grid grid-cols-1 gap-0
  }

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

  .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-200 disabled:text-gray-500 disabled:border-slate-300 disabled:shadow-none;
  }
  .input-group[type='color'] {
    @apply py-0
  }

  .prop-category-body {
    @apply rounded-lg bg-slate-300 p-3
  }
}