/**
 * Language switcher.
 *
 * Every colour and measurement comes from a custom property the settings screen
 * writes, so nobody has to edit this file to restyle it.
 */

.srt {
	--srt-gap: .5em;
	position: relative;
	display: inline-block;
	font-size: var(--srt-size, 14px);
	line-height: 1.4;
	color: var(--srt-text, #1f2937);
}

.srt ul.srt-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.srt .srt-item a {
	display: flex;
	align-items: center;
	gap: var(--srt-gap);
	padding: .5em .8em;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.srt .srt-item a:hover,
.srt .srt-item a:focus-visible {
	color: var(--srt-accent, #b91c1c);
	background: rgba(0, 0, 0, .04);
}

.srt .srt-flag {
	font-size: 1.15em;
	line-height: 1;
}

/* Dropdown ---------------------------------------------------------------- */

.srt-dropdown .srt-toggle {
	display: flex;
	align-items: center;
	gap: var(--srt-gap);
	margin: 0;
	padding: .55em .85em;
	font: inherit;
	color: inherit;
	background: var(--srt-bg, #fff);
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: var(--srt-radius, 8px);
	box-shadow: var(--srt-shadow, none);
	cursor: pointer;
}

.srt-dropdown .srt-caret {
	width: 0;
	height: 0;
	margin-left: .15em;
	border-left: .32em solid transparent;
	border-right: .32em solid transparent;
	border-top: .34em solid currentColor;
	opacity: .65;
	transition: transform .15s ease;
}

.srt-dropdown[data-open="true"] .srt-caret {
	transform: rotate(180deg);
}

.srt-dropdown .srt-list {
	position: absolute;
	z-index: 9999;
	min-width: 100%;
	margin-top: .35em;
	background: var(--srt-bg, #fff);
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: var(--srt-radius, 8px);
	box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
	max-height: 60vh;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.srt-dropdown[data-open="true"] .srt-list {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.srt-dropdown .srt-current a {
	font-weight: 600;
	color: var(--srt-accent, #b91c1c);
}

/* Inline ------------------------------------------------------------------ */

.srt-inline .srt-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .15em;
}

.srt-inline .srt-item a {
	padding: .35em .6em;
	border-radius: var(--srt-radius, 8px);
}

.srt-inline .srt-current a {
	font-weight: 600;
	color: var(--srt-accent, #b91c1c);
	background: rgba(0, 0, 0, .05);
}

/* Pinned to the screen ---------------------------------------------------- */

.srt-floating {
	position: fixed;
	z-index: 99990;
}

.srt-floating.srt-bottom-right {
	right: var(--srt-x, 20px);
	bottom: var(--srt-y, 20px);
}

.srt-floating.srt-bottom-left {
	left: var(--srt-x, 20px);
	bottom: var(--srt-y, 20px);
}

.srt-floating.srt-top-right {
	right: var(--srt-x, 20px);
	top: var(--srt-y, 20px);
}

.srt-floating.srt-top-left {
	left: var(--srt-x, 20px);
	top: var(--srt-y, 20px);
}

/* A pinned dropdown at the bottom of the screen must open upwards. */
.srt-floating.srt-bottom-right .srt-list,
.srt-floating.srt-bottom-left .srt-list {
	bottom: 100%;
	margin-top: 0;
	margin-bottom: .35em;
	transform: translateY(4px);
}

.srt-floating.srt-bottom-right .srt-dropdown[data-open="true"] .srt-list,
.srt-floating.srt-bottom-left .srt-dropdown[data-open="true"] .srt-list {
	transform: none;
}

.srt-floating.srt-bottom-right .srt-list,
.srt-floating.srt-top-right .srt-list {
	right: 0;
}

/* In a menu --------------------------------------------------------------- */

.srt-menu-item .srt-toggle {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
	padding: .35em .5em;
}

@media (max-width: 600px) {
	.srt-floating {
		--srt-x: 12px;
		--srt-y: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.srt-dropdown .srt-list,
	.srt-dropdown .srt-caret {
		transition: none;
	}
}

/* The phone copy sitting in the header, beside the menu toggle. Hidden until
   the media query in the inline styles turns it on, so it never flashes at the
   foot of the page before the script has moved it. */
.srt-hamburger {
	display: none;
	align-items: center;
	margin-left: .35em;
	position: relative;
	z-index: 9;
}

/* Whatever the theme put the toggle in, it now holds two things side by side.
   Plenty of headers stack them otherwise — the toggle is usually a block. */
.srt-host {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	flex-wrap: nowrap;
}

/* Next to a bare hamburger, a bordered white pill looks like a mistake. The
   flag stands on the header's own background; only the open list keeps a
   surface, because it has to be readable over the page. */
.srt-hamburger .srt-toggle {
	background: none;
	border: 0;
	box-shadow: none;
	padding: .25em .35em;
}

.srt-hamburger .srt-flag {
	font-size: 1.35em;
}

.srt-hamburger .srt-list {
	right: 0;
	left: auto;
}