/*
 * b.circular — top bar placement for H2A Accessibility Tools
 */

.h2a-accessibility-wrapper--topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 36px;
	padding: 0 1.5rem;
	background: #000000;
}

.h2a-accessibility-wrapper--topbar .h2a-accessibility-button {
	gap: 0;
	padding: 0.35rem 0.5rem;
	border: none;
	border-radius: 0;
	background: transparent;
	color: #ffffff;
	font-size: 0.875rem;
	font-weight: 400;
}

.h2a-accessibility-wrapper--topbar .h2a-accessibility-button-icon {
	display: none;
}

.h2a-accessibility-wrapper--topbar .h2a-accessibility-panel {
	position: fixed;
	top: 2.5rem;
	right: 1rem;
	bottom: auto;
	left: auto;
	transform: none;
}

body.h2a-has-topbar {
	padding-top: 36px;
}

@media (max-width: 600px) {
	.h2a-accessibility-wrapper--topbar .h2a-accessibility-panel {
		top: 2.75rem;
		right: 0.75rem;
		left: auto;
		transform: none;
		width: calc(100vw - 1.5rem);
		max-width: 420px;
	}
}