/* Tag Navigation Styles */

.tag-level-container {
    @apply flex flex-wrap gap-4 items-start relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;  /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    min-height: 3rem; /* Ensure container doesn't collapse during loading */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.tag-level-container::-webkit-scrollbar {
    display: none;
}

/* Tag Level */
.tag-level {
    @apply flex flex-col gap-2 min-w-[150px];
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

.tag-level-wrapper {
    opacity: 1;
}

.tag-level-wrapper.tag-level-enter .tag-level {
    opacity: 1;
}

/* Tag Items */
.tag-item {
    @apply flex items-center justify-between px-3 py-1 rounded-full;
    @apply bg-emerald-100 text-emerald-800 hover:bg-emerald-200;
    @apply cursor-pointer transition-colors duration-100;
    @apply focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2;
}

.tag-item.active {
    @apply bg-emerald-600 text-white hover:bg-emerald-700;
}

.tag-name {
    @apply whitespace-nowrap flex-grow;
}

.tag-indicator {
    @apply text-xs ml-4;
    display: inline-flex;
    align-items: center;
    min-width: 1rem;
    justify-content: center;
}

.tag-count {
    @apply mr-2 text-xs bg-emerald-200 px-1.5 py-0.5 rounded-full;
    min-width: 1.5rem;
    text-align: center;
}

.tag-item.active .tag-count {
    @apply bg-white bg-opacity-20 text-white;
}

.tag-item:hover .tag-count {
    @apply bg-emerald-300;
}

.tag-item.active:hover .tag-count {
    @apply bg-white bg-opacity-30;
}

/* Error State */
.error-state {
    @apply mt-4 w-full;
}

.error-state button {
    @apply text-blue-600 hover:text-blue-800;
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .tag-level-container {
        @apply flex-col;
    }
    
    .tag-level {
        @apply w-full;
    }
    
    .tag-item {
        @apply w-full;
    }
    
    /* Adjust spacing for mobile */
    .tag-level-wrapper {
        @apply mb-2;
    }
    
    /* Make touch targets larger on mobile */
    .tag-item {
        @apply py-2;
    }
}

/* Focus Styles */
.tag-item:focus-visible {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* High Contrast Mode */
@media (forced-colors: active) {
    .tag-item {
        @apply border;
    }
    
    .tag-item.active {
        @apply border-2;
    }
}