/**
 * Gutenberg Filter Buttons – styles
 *
 * These are intentionally minimal so they layer on top of your theme.
 * Override freely in your theme's stylesheet or child theme.
 */

/* ── Hidden / visible states ─────────────────────────────────────── */

.gfb-hidden {
  display: none !important;
}

.gfb-visible {
  display: revert; /* restore whatever the element's natural display was */
}

/* ── Active button state ─────────────────────────────────────────── */
/*
 * When a filter button is active, its parent .wp-block-button receives
 * the class "gfb-active". We use high-ish specificity so the style
 * wins over most theme defaults without needing !important.
 */

.wp-block-buttons.filter-group .wp-block-button.gfb-active .wp-block-button__link {
  /* Invert the button colours to signal the active state.
     Adjust these custom properties to match your theme's button style. */
  background-color: var(--wp--preset--color--foreground, #111);
  color: var(--wp--preset--color--background, #fff);
  border-color: var(--wp--preset--color--foreground, #111);
  /* Subtle scale nudge */
  transform: scale(1.03);
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

/* Smooth transition for the non-active buttons too */
.wp-block-buttons.filter-group .wp-block-button__link {
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
}

/* ── Filtered items – optional fade-in animation ─────────────────── */
/*
 * When an item becomes visible it fades in.
 * Remove this block if you prefer instant show/hide.
 */

@keyframes gfb-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gfb-visible {
  animation: gfb-fade-in 0.25s ease forwards;
}