@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@layer base {
  .transition-base {
    @apply transition ease-in-out duration-300;
  }

  .btn-primary {
    @apply w-max flex items-center justify-center px-4 py-2 border border-transparent shadow-md font-semibold uppercase rounded-md text-xs text-white tracking-widest bg-green-600 hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75 transition-base;
}

  .btn-secondary {
    @apply w-max flex items-center justify-center px-4 py-2 border border-green-500 text-green-700 hover:bg-green-500 hover:text-white focus:ring-green-400 transition-base;
}

  .btn-blue {
    @apply w-max flex items-center justify-center px-4 py-2 border border-transparent shadow-md font-semibold uppercase rounded-md text-xs text-white tracking-widest bg-blue-600 hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition-base;
  }

  .btn-green {
    @apply w-max flex items-center justify-center px-4 py-2 border border-transparent shadow-md font-semibold uppercase rounded-md text-xs text-white tracking-widest bg-green-600 hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75 transition-base;
  }

  .btn-danger {
    @apply w-max flex items-center justify-center px-4 py-2 border border-transparent shadow-md font-semibold uppercase rounded-md text-xs text-white tracking-widest bg-red-600 hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75 transition-base;
  }

  /* LINK */
  .link {
    @apply inline-flex text-base font-semibold rounded-md text-green-600 hover:underline hover:text-green-700 focus:outline-none focus:underline focus:text-green-700 transition-base;
  }

  /* SIDEBAR NAV LINK */
  .side-nav-link {
    @apply w-full px-3 py-2 rounded-md text-base font-semibold 
    hover:bg-green-500 hover:text-white 
    focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75 
    transition-base;
  }

  /* SIDEBAR ACTIVE */
  .side-nav-link-active {
    @apply w-full px-3 py-2 rounded-md text-base font-semibold 
    bg-green-600 text-white hover:bg-green-700 
    focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-75 
    transition-base;
  }
}

/* FONT SMOOTHING */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* SCROLL BEHAVIOR */
html {
  scroll-behavior: smooth;
}

/* CUSTOM SCROLLBAR */
::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-thumb {
    background: rgb(5, 150, 105); /* green-600 */
    height: 60px;
    border-radius: 8px;
    border: 4px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-track {
    background: #F3F4F6;
}

.pagination .active > span {
    background-color: #16a34a !important; /* green-600 */
    border-color: #16a34a !important;
    color: white !important;
}

.pagination a:hover {
    color: #16a34a !important;
}