/* Toggle container */
html[data-c2-theme] .c2tt-toggle {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;

  /* Important: prevent container itself from being clickable.
     Only its children (buttons) can receive pointer events. */
  pointer-events: none;
}
/* Re-enable pointer events for controls inside */
.c2tt-toggle > * { pointer-events: auto; }

/* ---------------------------------------
   Base button (for text-labelled buttons)
---------------------------------------- */
.c2tt-toggle .c2tt-theme-btn,
.c2tt-toggle button {
  border: none;
  padding: 0;
  color: #fff;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
  background: gray; /* fallback when no theme color applies */
}
.c2tt-toggle button:active { transform: scale(0.98); }
.c2tt-toggle button.is-active { box-shadow: 0 0 0 2px #111 inset; }

/* ---------------------------------------
   Icon-style buttons (buttons mode)
   - Click area = image bounds exactly
---------------------------------------- */
.c2tt-toggle .c2tt-theme-btn.has-icon {
  /* Remove any extra clickable padding/frame */
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;

  display: inline-block;   /* shrink-wrap to image size */
  line-height: 0;          /* kill extra vertical line box */
  vertical-align: middle;  /* avoid extra baseline space */
  cursor: pointer;         /* still shows pointer over the image */
}

/* Focus/active state (visual only; does not expand hitbox) */
.c2tt-toggle .c2tt-theme-btn.has-icon:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}
.c2tt-toggle .c2tt-theme-btn.has-icon.is-active {
  outline: 2px solid #111;
  outline-offset: 2px;
}

/* The image defines the exact hit area */
.c2tt-toggle .c2tt-theme-btn.has-icon img {
  display: block;   /* remove descender gap */
  width: auto;      /* preserve aspect ratio for width */
  max-width: 100%;
  object-fit: contain;
  pointer-events: none; /* let the button receive the click */
}

/* ---------------------------------------
   Cycle mode icon button
   (single icon that cycles themes)
---------------------------------------- */
.c2tt-cycle-btn {
  /* Make hit area = icon bounds */
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;

  display: inline-block;
  line-height: 0;
  vertical-align: middle;
  cursor: pointer;
}
.c2tt-cycle-btn:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}
.c2tt-cycle-btn .c2tt-icon-img {
  display: block;
  height: 28px;
  width: auto;
  pointer-events: none;
}

/* (Optional) if you also render generic icon imgs elsewhere in the toggle */
.c2tt-toggle .c2tt-icon-img { height: 28px; width: auto; display: block; }

/* --- Remove border highlight on icon buttons & cycle icon --- */
.c2tt-toggle .c2tt-theme-btn.has-icon,
.c2tt-toggle .c2tt-theme-btn.has-icon:focus,
.c2tt-toggle .c2tt-theme-btn.has-icon:focus-visible,
.c2tt-toggle .c2tt-theme-btn.has-icon.is-active,
.c2tt-cycle-btn,
.c2tt-cycle-btn:focus,
.c2tt-cycle-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.c2tt-toggle button.is-active { box-shadow: none !important; }


.c2tt-icon-img {
	filter: none;
}