@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import "../../node_modules/@fortawesome/fontawesome-free/css/all.min.css";
@import 'toastr/build/toastr.min.css';

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

html,
body {
  @apply bg-cosmicLatte font-inter scroll-smooth text-gray-700;
}

body::-webkit-scrollbar {
  width: 0.2em;
}

body::-webkit-scrollbar-thumb {
  @apply bg-gray-500 rounded-sm
}

body::-webkit-scrollbar-track {
  @apply bg-white
}

#sidebar {
  @apply transition-all duration-500 ease-in-out; 
}

.menu-text {
  @apply opacity-0 translate-x-[-10px] transition-all duration-300 ease-in-out;
}

.menu-text.visible {
  @apply opacity-100 translate-x-0;
}

.menu-text.hidden {
  @apply opacity-0 pointer-events-none; 
}

[x-cloak] {
  @apply hidden;
}

.toast-custom {
  @apply px-4 py-3 rounded-lg shadow-lg text-base font-medium flex items-center gap-3 !important; /* Basis styling */
}

.toast-success {
  @apply bg-white text-green-700 border-l-4 border-green-500 !important; /* Styling untuk success */
}

.toast-error {
  @apply bg-white text-red-700 border-l-4 border-red-500 !important; /* Styling untuk error */
}

.progress-bar-custom {
  @apply h-1 absolute bottom-0 left-0 w-full !important; /* Styling progress bar */
}

.toast-success .progress-bar-custom {
  @apply bg-green-500 !important; /* Progress bar hijau untuk success */
}

.toast-error .progress-bar-custom {
  @apply bg-red-500 !important; /* Progress bar merah untuk error */
}

.toast-custom .toast-icon {
  @apply text-xl !important; /* Styling default ikon */
}

.toast-success .toast-icon {
  @apply text-green-500 !important; /* Ikon hijau untuk success */
}

.toast-error .toast-icon {
  @apply text-red-500 !important;
}