/**
 * Polylang Language Switcher Styles
 *
 * Custom styles for Polylang language switcher with flag dropdown.
 * This file is automatically enqueued via wp_enqueue_style().
 *
 * Inherits visual tokens from the parent theme (Ollie) so the dropdown
 * matches native <select>/<input> styling.
 *
 * @package BlockParty
 */

/* Container and summary styling */
.sf-lang-switcher {
	position: relative;
	display: inline-block;
}

.sf-lang-switcher summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5em 1em;
	color: var(--wp--preset--color--main);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 5px;
	font-size: var(--wp--preset--font-size--small);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 0.5px 1px rgba(0, 0, 0, 0.04);
	cursor: pointer;
	user-select: none;
}

.sf-lang-switcher summary:focus-visible {
	outline-offset: 1px;
}

/* Current language flag */
.sf-lang-switcher-current {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sf-lang-switcher-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

.sf-lang-switcher-flag img {
	width: 100%;
	height: 100%;
}

/* Chevron animation */
.sf-lang-switcher-chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sf-lang-switcher[open] .sf-lang-switcher-chevron {
	transform: rotate(180deg);
}

/* Dropdown menu */
.sf-lang-switcher-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 0.5rem;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-light);
	font-size: var(--wp--preset--font-size--small);
	border-radius: 5px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	z-index: 100;
}

/* Language options */
.sf-lang-switcher-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5em 1em;
	background-color: transparent;
	text-align: left;
	color: var(--wp--preset--color--main);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease-in-out;
}

.sf-lang-switcher-option:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--main) 5%, var(--wp--preset--color--base));
}

.sf-lang-switcher-option:focus-visible {
	outline-offset: -1px;
}

.sf-lang-switcher-option-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}

.sf-lang-switcher-option-flag img {
	width: 100%;
	height: 100%;
	object-fit: cover;

	/* border-radius: 50%; */
}

.sf-lang-switcher-option-text {
	flex: 1;
}