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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

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

/* Custom toast animation */
@keyframes toast-enter {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-toast {
  animation: toast-enter 0.3s ease-out forwards;
}

.project-switcher-dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-button {
  background-color: #3490dc;
  /* Example color */
  color: white;
  padding: 8px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-button .caret {
  border-width: 5px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #1a202c;
  /* Example color */
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #4a5568;
  /* Example color */
}

.dropdown-content .dropdown-header {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  color: #a0aec0;
  /* Example color */
}

.new-project {
  color: #9f7aea;
  /* Example color */
}

/* Show the dropdown menu on hover */
.project-switcher-dropdown:hover .dropdown-content {
  display: block;
}

/* Onboarding animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
  }
}

.animate-fade-in {
  animation: fade-in 0.4s ease-out forwards;
}

.onboarding-highlight {
  animation: pulse 2s infinite;
}

/* Tooltip styles */
.tooltip {
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
}

.tooltip-top::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #1f2937 transparent transparent transparent;
}

.tooltip-bottom::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #1f2937 transparent;
}

.tooltip-left::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #1f2937;
}

.tooltip-right::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #1f2937 transparent transparent;
}