/**
 * Genre filter component styles.
 * Horizontal list of pill-shaped filter links for genres/categories.
 * Used on: radios (home), podcasts, charts pages.
 */

/* Genre Filter Container */
.genre-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

/* Hide genre-filters on mobile (handled by mobile-nav component instead) */
@media (max-width: 1024px) {
  .genre-filters {
    display: none;
  }
}

/* Individual Genre Filter Pill */
.genre-filter {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  color: var(--color-text);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
  white-space: nowrap;
  --ui-hover-transform: scale(1.03);
  --ui-active-transform: scale(0.95);
}

.genre-filter:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  transform: var(--ui-hover-transform);
}

.genre-filter:active {
  transform: var(--ui-active-transform);
}

.genre-filter:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xl);
}

/* Active (currently selected) filter state -- border-only highlight */
.genre-filter--active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  cursor: default;
}

.genre-filter--active:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: none;
  box-shadow: none;
}