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

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

  .sidebar-icon {
    @apply relative flex items-center justify-center
                    h-16 w-16 my-2 mx-auto
                    shadow-lg bg-gray-800 text-secondary rounded-3xl

                    hover:bg-green-900 hover:text-primary
                    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-20;
  }
}