/* ==========================================================================
   Ingredients Component - Theme Aware
   ========================================================================== */

/* Selected ingredient chip state */
.ingredient-chip[data-selected="true"] {
    border-color: rgb(16 185 129); /* emerald-500 */
    background-color: rgb(16 185 129 / 0.2);
    color: rgb(5 150 105); /* emerald-600 for light */
}

.dark .ingredient-chip[data-selected="true"] {
    color: rgb(52 211 153); /* emerald-400 for dark */
}

.ingredient-chip[data-selected="true"]::before {
    content: "✓ ";
}

/* Fade in animation for new ingredients */
@keyframes ingredient-fade-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

/* Hide filtered ingredients */
.ingredient-item.hidden {
    display: none;
}

/* Custom scrollbar for ingredients container - Light theme - Webkit */
.ingredients-container::-webkit-scrollbar {
    width: 6px;
}

.ingredients-container::-webkit-scrollbar-track {
    background: transparent;
}

.ingredients-container::-webkit-scrollbar-thumb {
    background: rgb(0 0 0 / 0.1);
    border-radius: 3px;
}

.ingredients-container::-webkit-scrollbar-thumb:hover {
    background: rgb(0 0 0 / 0.2);
}

/* Dark theme scrollbar - Webkit */
.dark .ingredients-container::-webkit-scrollbar-thumb {
    background: rgb(255 255 255 / 0.1);
}

.dark .ingredients-container::-webkit-scrollbar-thumb:hover {
    background: rgb(255 255 255 / 0.2);
}

/* Custom scrollbar - Firefox (light) */
.ingredients-container {
    scrollbar-width: thin;
    scrollbar-color: rgb(0 0 0 / 0.1) transparent;
}

/* Firefox dark theme */
.dark .ingredients-container {
    scrollbar-color: rgb(255 255 255 / 0.1) transparent;
}

/* ==========================================================================
   New Ingredient Toggle (Button <-> Form)
   ========================================================================== */

/* Default: show button, hide form */
.new-ingredient-toggle .new-ingredient-button {
    display: inline-flex;
}

.new-ingredient-toggle .new-ingredient-form {
    display: none;
}

/* Active state: hide button, show form */
.new-ingredient-toggle.is-active .new-ingredient-button {
    display: none;
}

.new-ingredient-toggle.is-active .new-ingredient-form {
    display: inline-flex;
}