/**
 * POV Switcher - floating trigger button
 *
 * Positioning and structural styling only for the button the plugin injects
 * itself (#pov-switch-trigger). Kept separate from layout-order.css so the
 * ordering logic and the trigger's appearance can be edited independently.
 */

.pov-switch-trigger {
	position: fixed;
	/* Vertically centered within the bottom third of the viewport (the
	   bottom third spans 66.667%-100%; its midpoint is 83.333%), rather
	   than the middle of the whole screen. */
	bottom: 16.667%;
	left: 0;
	transform: translateY(50%);
	z-index: 9999;

	margin: 0;
	padding: 0.75em 0.75em;
	border-style: solid;
	border-color: rgba(99, 99, 107, 0.1);
	border-width: 1px 1px 1px 0;
	border-radius: 0 4px 4px 0; /* match group block */

	background-color: #fff;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	line-height: 1.2;
	cursor: pointer;

	writing-mode: vertical-rl;
	text-orientation: mixed;
}

.pov-switch-trigger:hover,
.pov-switch-trigger:focus-visible {
	background-color: #fff;
}

/* Flip the vertical text 180deg (rotating the label, not the button box,
   so the button's position and hit area are unaffected). */
.pov-switch-trigger__label {
	display: inline-block;
	transform: rotate(180deg);
}

/* The reordering only applies below the breakpoint, so hide the trigger above it. */
@media (min-width: 1180px) {
	.pov-switch-trigger {
		display: none;
	}
}