/**
 * Language switcher.
 *
 * Layout only. Colour, size and spacing come from the Switcher screen and are
 * written as a small inline stylesheet, so a switcher nobody has styled
 * inherits the theme exactly as it used to.
 */

.nik-tr-switcher {
	display: flex;
	flex-wrap: wrap;
	gap: .5em 1em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nik-tr-switcher--inline {
	display: inline-flex;
	vertical-align: middle;
}

.nik-tr-switcher__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nik-tr-switcher__link {
	display: inline-block;
	text-decoration: none;
}

.nik-tr-switcher__link.is-current {
	font-weight: 600;
	cursor: default;
}

/* The dropdown. A <details> element, so it opens without a line of script. */

.nik-tr-switcher--dropdown {
	display: inline-flex;
	position: relative;
	gap: 0;
}

.nik-tr-switcher__details {
	position: relative;
}

.nik-tr-switcher__details > summary {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

/* Safari draws its own marker through a pseudo-element of its own. */
.nik-tr-switcher__details > summary::-webkit-details-marker {
	display: none;
}

.nik-tr-switcher__arrow {
	width: 0;
	height: 0;
	border-left: .32em solid transparent;
	border-right: .32em solid transparent;
	border-top: .36em solid currentColor;
	transition: transform .15s ease;
}

.nik-tr-switcher__details[open] .nik-tr-switcher__arrow {
	transform: rotate(180deg);
}

.nik-tr-switcher__menu {
	position: absolute;
	z-index: 999;
	top: calc(100% + 4px);
	left: 0;
	min-width: 100%;
	margin: 0;
	padding: 4px 0;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 6px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.nik-tr-switcher__menu .nik-tr-switcher__link {
	display: block;
	white-space: nowrap;
	padding: .35em .9em;
}

/*
 * Inside the open panel the languages are rows, not buttons. The chosen
 * background, frame and corners belong to the control and to the panel;
 * giving them to every row as well draws a frame inside a frame. The extra
 * class is there so this outranks the generated declarations, which are
 * appended after this file.
 */
.nik-tr-switcher .nik-tr-switcher__menu .nik-tr-switcher__link {
	background: none;
	border: 0;
	border-radius: 0;
}

.nik-tr-switcher .nik-tr-switcher__menu .nik-tr-switcher__link:hover,
.nik-tr-switcher .nik-tr-switcher__menu .nik-tr-switcher__link:focus {
	background: rgba(0, 0, 0, .06);
}

/* Pinned to the screen, when the plugin places the switcher itself. */

.nik-tr-switcher-float {
	position: fixed;
	z-index: 9990;
	--nik-tr-x: 20px;
	--nik-tr-y: 20px;
}

.nik-tr-switcher-float .nik-tr-switcher {
	margin: 0;
}

.nik-tr-switcher-float--top-left,
.nik-tr-switcher-float--top-center,
.nik-tr-switcher-float--top-right {
	top: var(--nik-tr-y);
}

.nik-tr-switcher-float--bottom-left,
.nik-tr-switcher-float--bottom-center,
.nik-tr-switcher-float--bottom-right {
	bottom: var(--nik-tr-y);
}

.nik-tr-switcher-float--top-left,
.nik-tr-switcher-float--bottom-left {
	left: var(--nik-tr-x);
}

.nik-tr-switcher-float--top-right,
.nik-tr-switcher-float--bottom-right {
	right: var(--nik-tr-x);
}

.nik-tr-switcher-float--top-center,
.nik-tr-switcher-float--bottom-center {
	left: 50%;
	transform: translateX(-50%);
}

/* Pinned along the bottom, the list has to open upwards to be on the screen. */
.nik-tr-switcher-float--bottom-left .nik-tr-switcher__menu,
.nik-tr-switcher-float--bottom-center .nik-tr-switcher__menu,
.nik-tr-switcher-float--bottom-right .nik-tr-switcher__menu {
	top: auto;
	bottom: calc(100% + 4px);
}

/* Pinned to the right edge, it has to grow leftwards for the same reason. */
.nik-tr-switcher-float--top-right .nik-tr-switcher__menu,
.nik-tr-switcher-float--bottom-right .nik-tr-switcher__menu {
	left: auto;
	right: 0;
}

@media print {
	.nik-tr-switcher-float {
		display: none;
	}
}