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

@layer components {
  .sidebar {
    @apply fixed top-0 left-0
    h-screen w-16 m-0
    flex flex-col
    bg-sidebar text-secondary
    z-40;
  }

  .sidebar-icon {
    @apply relative flex items-center justify-center
                    h-14 w-14 my-2 mx-auto
                    shadow-lg bg-gray-800 text-secondary
                    hover:bg-green-900 hover:text-primary
                    rounded-3xl
                    hover:rounded-xl
                    transition-all duration-300 ease-linear
                    cursor-pointer;
  }

  .sidebar-icon-active {
    @apply bg-green-900 text-primary rounded-xl;
  }

  .sidebar-tooltip {
    @apply absolute w-auto p-2 m-2 min-w-max left-14
    rounded-md shadow-md text-white bg-sidebar
    text-sm font-bold
    transition-all duration-100 invisible origin-left;
  }

  .sidebar-hr {
    @apply bg-gray-600 
    border border-gray-600 rounded-full
    mx-2;
  }

  .content {
    @apply ml-16;
  }

  .flow-editor {
    @apply flex flex-row
    bg-content;
  }

  .flow-panel {
    @apply relative flex flex-col
    bg-panel
    z-30;
  }

  .flow-panel-button {
    @apply absolute flex items-center justify-center
    w-10 h-10 mt-4 -right-12
    bg-gray-800 text-secondary
    rounded-xl cursor-pointer;
  }

  .flow {
  }
}