/* ============================================================
   JHACAL Mute Button — Shared Visual Standard
   Green border + speaker icon = live (unmuted)
   Red border + diagonal strikethrough = muted

   Usage: add class "jhacal-mute-btn" to any mute button.
   Toggle class "muted" to switch state.
   ============================================================ */

.jhacal-mute-btn {
  /* Layout — works as icon-only or with text */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  /* Remove default button styling */
  background: transparent;
  padding: 0;
  /* Visual: green border when live */
  border: 2px solid #4ade80;
  border-radius: 8px;
  /* Transition */
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.jhacal-mute-btn:hover {
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.25);
}

/* Speaker SVG icon — rendered via ::before pseudo-element */
.jhacal-mute-btn .jhacal-mute-ico {
  display: block;
  width: 1.4em;
  height: 1.4em;
  /* Speaker SVG as mask so currentColor applies */
  background-color: #e5e7eb;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  /* Diagonal strikethrough line — rendered via ::after when muted */
  position: relative;
}

/* ── Muted state: red border ── */
.jhacal-mute-btn.muted {
  border-color: #f87171;
}

.jhacal-mute-btn.muted:hover {
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.25);
}

/* Diagonal strikethrough line (red) overlaid on the icon */
.jhacal-mute-btn.muted .jhacal-mute-ico::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 130%;
  height: 2px;
  background: #f87171;
  transform: translate(-50%, -50%) rotate(-45deg);
  border-radius: 1px;
  pointer-events: none;
}

/* ── Size variants ── */
.jhacal-mute-btn.mute-sm  { min-width: 32px; min-height: 32px; border-radius: 6px; }
.jhacal-mute-btn.mute-sm .jhacal-mute-ico { width: 1.1em; height: 1.1em; }

.jhacal-mute-btn.mute-md  { min-width: 40px; min-height: 40px; border-radius: 8px; }
.jhacal-mute-btn.mute-md .jhacal-mute-ico { width: 1.4em; height: 1.4em; }

.jhacal-mute-btn.mute-lg  { min-width: 52px; min-height: 52px; border-radius: 10px; }
.jhacal-mute-btn.mute-lg .jhacal-mute-ico { width: 1.8em; height: 1.8em; }

/* Ensure ios-compat min-height doesn't apply to this button */
.jhacal-mute-btn.mute-sm { min-height: 32px !important; }