.btn-languages {
	position: relative;
	display: inline-block;
	max-inline-size: 100%;
	color: #17251c;
	font: 500 .875rem/1.4 system-ui, sans-serif;
}

.btn-languages > summary {
	display: flex;
	align-items: center;
	gap: .55rem;
	box-sizing: border-box;
	min-inline-size: 8.5rem;
	min-block-size: 44px;
	padding: .35rem .65rem;
	border: 1px solid #758579;
	border-radius: .5rem;
	background: #fff;
	cursor: pointer;
	list-style: none;
}

.btn-languages > summary::-webkit-details-marker { display: none; }
.btn-languages > summary::after { content: "▾"; }
.btn-languages[open] > summary::after { content: "▴"; }

.btn-languages-label {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.btn-languages > ul {
	position: absolute;
	z-index: 10;
	inset-block-start: calc(100% + .25rem);
	inset-inline-end: 0;
	box-sizing: border-box;
	min-inline-size: 100%;
	margin: 0;
	padding: .25rem;
	border: 1px solid #758579;
	border-radius: .5rem;
	background: #fff;
	box-shadow: 0 .25rem .75rem #17251c26;
	list-style: none;
}

.btn-languages li > :is(a, span) {
	display: flex;
	align-items: center;
	min-block-size: 44px;
	padding: .25rem .65rem;
	color: inherit;
}

.btn-languages li a:hover,
.btn-languages [aria-current="page"] { background: #edf3ec; }
.btn-languages :is(a, summary):focus-visible { outline: 2px solid #235676; outline-offset: 2px; }

@media (max-width: 600px) {
	.btn-languages > summary { min-inline-size: 0; }

	.btn-languages > ul {
		position: static;
		margin-block-start: .25rem;
	}
}