@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-graySecondary 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-grayPrimary text-secondary
    rounded-xl cursor-pointer;
  }

  .node-layout {
    @apply flex flex-col items-center
    rounded-lg
    w-[150px] h-fit bg-grayPrimary
    p-[4px];
  }

  .node-handle-big {
    @apply w-[150px] h-[20px];
  }

  .node-header {
    @apply flex flex-row w-full h-[20px] justify-between items-center
    mb-1 px-[4px]
    border-b border-b-gray-500;
  }

  .node-title {
    @apply text-white text-xs font-bold;
  }

  .node-content {
    @apply flex flex-col w-full h-fit
    mb-[4px];
  }

  .node-content-select {
    @apply bg-grayPrimary border border-gray-900 text-sm rounded-lg
    text-white;
  }

  .node-component {
    @apply relative flex flex-row h-fit rounded-md
    bg-grayPrimary
    pr-2 my-1 mx-2
    text-white align-middle;
  }

  .node-component-handle {
    @apply left-0 w-[12px] h-[30px] mr-2 rounded-tl-md rounded-bl-md;
  }
}