/* ==========================================================================
   TopShop — Dropdown
   Власна заміна нативного <select>: він рендериться засобами ОС і
   виглядає по-різному в Windows/macOS/Android, тому не вписується
   в дизайн-систему (ТЗ §40).
   ========================================================================== */

.ts-dropdown {
	position: relative;
	display: inline-flex;
	flex: none;
}

/* --- Плаваючий підпис ----------------------------------------------------
   Сидить на рамці кнопки. Фон білий, щоб "розривати" лінію під собою.
   ------------------------------------------------------------------------ */

.ts-dropdown__label {
	position: absolute;
	top: -7px;
	left: var(--ts-space-3);
	z-index: 1;
	padding-inline: var(--ts-space-1);
	background: var(--ts-color-bg);
	font-size: var(--ts-text-2xs);
	color: var(--ts-color-muted);
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
}

/* --- Кнопка --------------------------------------------------------------- */

.ts-dropdown__trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-2);
	min-height: 44px;
	min-width: 0;
	padding: var(--ts-space-2) var(--ts-space-3);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border-strong);
	border-radius: var(--ts-radius-md);
	font-size: var(--ts-text-sm);
	color: var(--ts-color-text);
	text-align: left;
	transition: border-color var(--ts-duration-fast) var(--ts-ease),
		box-shadow var(--ts-duration-fast) var(--ts-ease);
}

.ts-dropdown__trigger:hover {
	border-color: var(--ts-color-primary);
}

.ts-dropdown__trigger[aria-expanded="true"] {
	border-color: var(--ts-color-primary);
	box-shadow: var(--ts-shadow-focus);
}

.ts-dropdown__value {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ts-dropdown__icon {
	flex: none;
	display: inline-flex;
	color: var(--ts-color-text);
}

.ts-dropdown__chevron {
	flex: none;
	color: var(--ts-color-faint);
	transition: transform var(--ts-duration-base) var(--ts-ease);
}

.ts-dropdown__trigger[aria-expanded="true"] .ts-dropdown__chevron {
	transform: rotate(180deg);
}

/* Компактний варіант — лише іконка (перемикач вигляду) */
.ts-dropdown--compact .ts-dropdown__trigger {
	gap: var(--ts-space-1);
	padding-inline: var(--ts-space-2);
}

/* --- Панель --------------------------------------------------------------- */

.ts-dropdown__panel {
	position: absolute;
	top: calc(100% + var(--ts-space-2));
	left: 0;
	z-index: var(--ts-z-dropdown);
	min-width: 100%;
	padding: var(--ts-space-1);
	background: var(--ts-color-surface);
	border: 1px solid var(--ts-color-border);
	border-radius: var(--ts-radius-lg);
	box-shadow: var(--ts-shadow-lg);
	/* Не даємо панелі вилізти за екран на вузьких вікнах */
	max-height: min(60vh, 420px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ts-dropdown__panel[hidden] {
	display: none;
}

.ts-dropdown__panel:focus {
	outline: none;
}

/* Сортування ширше за кнопку: пункти довгі й не мають переноситись */
.ts-dropdown:not(.ts-dropdown--compact) .ts-dropdown__panel {
	min-width: 248px;
}

/*
 * Компактна кнопка вужча за свої ж пункти ("Списком" + іконка), тому
 * min-width: 100% давав горизонтальний скролбар. Тут ширину диктує вміст.
 */
.ts-dropdown--compact .ts-dropdown__panel {
	min-width: max-content;
	overflow-x: hidden;
}

/* Праворуч екрана панель відкривається від правого краю */
.ts-dropdown--end .ts-dropdown__panel {
	left: auto;
	right: 0;
}

/* --- Пункти --------------------------------------------------------------- */

.ts-dropdown__option {
	display: flex;
	align-items: center;
	gap: var(--ts-space-2);
	padding: var(--ts-space-3);
	border-radius: var(--ts-radius-md);
	font-size: var(--ts-text-sm);
	line-height: 1.3;
	color: var(--ts-color-text);
	cursor: pointer;
	white-space: nowrap;
}

/*
 * Один стиль і для наведення мишею, і для клавіатурної навігації:
 * інакше користувач клавіатури не бачить, де він зараз.
 */
.ts-dropdown__option:hover,
.ts-dropdown__option.is-active {
	background: var(--ts-color-surface-sunken);
}

.ts-dropdown__option.is-selected {
	color: var(--ts-color-primary);
	font-weight: var(--ts-weight-semibold);
}

.ts-dropdown__option-label {
	flex: 1 1 auto;
}

.ts-dropdown__option-icon {
	flex: none;
	display: inline-flex;
	color: currentColor;
}

.ts-dropdown__check {
	flex: none;
	opacity: 0;
	color: var(--ts-color-primary);
}

.ts-dropdown__option.is-selected .ts-dropdown__check {
	opacity: 1;
}

/* --- Панель каталогу: розкладка ------------------------------------------ */

/*
 * Перемикач вигляду доступний і на телефоні, як у x-kom.
 * Там обидва режими в одну колонку і різняться орієнтацією картки:
 * сітка — велике фото зверху, список — фото ліворуч і більше товарів
 * на екрані. Обидва доречні, тому вибір лишається за користувачем.
 */
.ts-toolbar__view {
	flex: none;
}

.ts-toolbar__sort {
	display: flex;
	align-items: center;
	gap: var(--ts-space-2);
	margin-left: auto;
}

/* На вузьких екранах панель сортування прилипає до правого краю */
@media (max-width: 559px) {
	.ts-toolbar__sort .ts-dropdown__panel {
		left: auto;
		right: 0;
	}
}