/**
 * Furigana Toggle CSS
 * Version: 1.5.2
 * 
 * This file contains all the styles for the Furigana Toggle plugin.
 * CSS variables are used for easy customization.
 */

/* CSS Variables for customization */
:root {
  --ft-border-color: #ccc;
  --ft-bg-color: #f7f7f7;
  --ft-focus-color: #4da3ff;
  --ft-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  --ft-hover-shadow: 0 2px 5px rgba(0, 0, 0, .15);
  --ft-transition: box-shadow 0.2s ease;
}

/* Hide ruby parentheses */
rp {
  display: none;
}

/* Main toggle class - hide ruby text when off */
.furigana-off rt {
  display: none !important;
}

/* Button base styles */
.furigana-toggle {
  font: inherit;
  padding: .4em .9em;
  border: 1px solid var(--ft-border-color);
  border-radius: .6em;
  background: var(--ft-bg-color);
  cursor: pointer;
  box-shadow: var(--ft-shadow);
  transition: var(--ft-transition);
}

/* Button hover state */
.furigana-toggle:hover {
  box-shadow: var(--ft-hover-shadow);
}

/* Button focus state */
.furigana-toggle:focus {
  outline: 2px solid var(--ft-focus-color);
  outline-offset: 2px;
}

/* Label text */
.furigana-toggle .ft-label {
  color: inherit;
  background: none;
}

/* State text */
.furigana-toggle .ft-state {
  margin-left: .5em;
  font-weight: 600;
}

/* Floating Action Button positioning */
#furiganaToggleFab {
  position: fixed;
  z-index: 9999;
  /* Position is set dynamically via inline styles */
}

/* Hidden state utility class */
.furigana-toggle.hidden {
  display: none !important;
}

/* Menu item specific styles */
.menu-item--furigana-toggle {
  /* Identifying class for theme developers */
}

/* Dark mode support example */
@media (prefers-color-scheme: dark) {
  :root {
    --ft-border-color: #555;
    --ft-bg-color: #333;
    --ft-focus-color: #66b3ff;
    --ft-shadow: 0 1px 3px rgba(255, 255, 255, .1);
    --ft-hover-shadow: 0 2px 5px rgba(255, 255, 255, .15);
  }
}