/* Native <ruby> rendering doesn't reserve extra horizontal space when the
 * furigana (rt) is wider than its base text, so without this it can visually
 * run into neighboring words. This gives each ruby group breathing room. */
ruby {
	margin: 0 0.15em;
	ruby-align: center;
}

ruby rt {
	white-space: nowrap;
}

/* When active, hides only the small furigana text - the main word/phrase
 * stays exactly as it is. */
html.wpy-hide-furigana ruby rt,
html.wpy-hide-furigana ruby rp {
	display: none !important;
}

.wp-yomigana-toggle-btn {
	cursor: pointer;
	font-size: 13px;
	line-height: 1;
	padding: 8px 14px;
	border-radius: 20px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #fff;
	color: #333;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	transition: background 0.15s ease, transform 0.15s ease;
}

.wp-yomigana-toggle-btn:hover {
	background: #f5f5f5;
	transform: translateY(-1px);
}

/* The automatically-injected button floats in the corner so it doesn't
 * require any theme markup changes. */
.wp-yomigana-toggle-floating {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 100000;
}