/**
 * TabNav-P Search Enhancement
 * Adds integrated search functionality to tabnav-p components
 */

/* ========================================
   Wrapper Container
   ======================================== */

.tn-search-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	width: fit-content;
	max-width: 100%;
}

.tn-search-wrapper .tn {
	min-width: 0;
	flex-shrink: 1;
}

/* ========================================
   Search Button
   ======================================== */

.tns-search-button {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: rgb(232, 232, 237);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
	flex-shrink: 0;
}

.tns-search-button .form-icons {
	font-size: 18px;
	margin: 0;
}

.tns-search-button svg {
	color: #000000;
	stroke: #000000;
}

.tns-search-button:hover {
	background-color: rgb(209, 209, 214);
	transform: scale(1.05);
}

.tns-search-button:active {
	transform: scale(0.95);
}

.tns-search-button:focus {
	outline: 2px solid rgb(232, 232, 237);
	outline-offset: 2px;
}

/* Dark mode search button */
.theme-dark .tns-search-button,
body[data-color-scheme="dark"] .tns-search-button {
	background-color: rgb(51, 51, 54);
}

.theme-dark .tns-search-button .form-icons,
body[data-color-scheme="dark"] .tns-search-button .form-icons {
	filter: brightness(0) invert(1);
}

.theme-dark .tns-search-button svg,
body[data-color-scheme="dark"] .tns-search-button svg {
	color: #ffffff;
	stroke: #ffffff;
}

.theme-dark .tns-search-button:hover,
body[data-color-scheme="dark"] .tns-search-button:hover {
	background-color: rgb(72, 72, 74);
}

.theme-dark .tns-search-button:focus,
body[data-color-scheme="dark"] .tns-search-button:focus {
	outline-color: rgb(51, 51, 54);
}

/* ========================================
   Search Container
   ======================================== */

.tns-search-container {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	padding: 0 16px;
	opacity: 1;
	pointer-events: all;
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 3;
}

.tns-search-container.tns-search-hidden {
	opacity: 0;
	pointer-events: none;
	transform: translateX(20px);
}

.tns-search-inner {
	display: flex;
	align-items: center;
	width: 100%;
}

/* ========================================
   Tab Hiding When Search Active
   ======================================== */

.tn-platter.tns-active .tn-mask {
	opacity: 0;
	pointer-events: none;
}

.tn-platter.tns-active .tn-indicator {
	opacity: 0;
}

/* Paddle buttons also hide when search is active */
.tn-platter.tns-active .tn-paddle {
	pointer-events: none;
	opacity: 0;
}

/* ========================================
   Search Input Styling
   ======================================== */

.tns-search-container .form-textbox {
	max-width: none;
	margin: 0;
	flex: 1;
}

.tns-search-container .form-textbox.form-textbox-with-lefticon {
	background-color: rgb(232, 232, 237);
	border: none;
	border-radius: 28px;
	height: 36px;
	max-height: 36px;
}

.tns-search-container .form-textbox .form-textbox-input {
	background-color: transparent;
	border: none;
	border-radius: 28px;
	color: #1d1d1f;
	height: 36px;
	max-height: 36px;
	padding: 0 1rem 0 3.5rem;
	line-height: 36px;
	font-size: 14px;
}

.tns-search-container .form-textbox-label {
	color: #6e6e73;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	transition: opacity 0.2s ease;
}

/* Hide label when input has value or is focused */
.tns-search-container .form-textbox-input.form-textbox-entered ~ .form-textbox-label,
.tns-search-container .form-textbox-input:focus ~ .form-textbox-label {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-50%);
}

/* Icon positioning */
.tns-search-container .form-textbox-with-lefticon .form-textbox-lefticon {
	top: 50%;
	transform: translateY(-50%);
}

/* Dark mode search input */
.theme-dark .tns-search-container .form-textbox.form-textbox-with-lefticon,
body[data-color-scheme="dark"] .tns-search-container .form-textbox.form-textbox-with-lefticon {
	background-color: rgb(51, 51, 54);
}

.theme-dark .tns-search-container .form-textbox .form-textbox-input,
body[data-color-scheme="dark"] .tns-search-container .form-textbox .form-textbox-input {
	color: #f5f5f7;
}

.theme-dark .tns-search-container .form-textbox-label,
body[data-color-scheme="dark"] .tns-search-container .form-textbox-label {
	color: #a1a1a6;
}

/* ========================================
   Mobile Responsive Styles
   ======================================== */

@media only screen and (max-width: 734px) {
	.tn-search-wrapper {
		gap: 8px;
	}

	.tns-search-button {
		width: 36px;
		height: 36px;
	}

	.tns-search-button .form-icons {
		font-size: 16px;
	}

	.tns-search-container .form-textbox.form-textbox-with-lefticon {
		height: 32px;
		max-height: 32px;
	}

	.tns-search-container .form-textbox .form-textbox-input {
		height: 32px;
		max-height: 32px;
		line-height: 32px;
		font-size: 16px;
		padding: 0 1rem 0 3rem;
	}

	.tns-search-container .form-textbox-label {
		font-size: 16px;
	}
}

/* ========================================
   Elevated Tabnav Variant Support
   ======================================== */

.tn.tn-elevated ~ .tns-search-button {
	width: 44px;
	height: 44px;
}

.tn.tn-elevated ~ .tns-search-button .form-icons {
	font-size: 18px;
}

.tn.tn-elevated .tns-search-container .form-textbox.form-textbox-with-lefticon {
	height: 44px;
	max-height: 44px;
}

.tn.tn-elevated .tns-search-container .form-textbox .form-textbox-input {
	height: 44px;
	max-height: 44px;
	line-height: 44px;
	font-size: 17px;
}

.tn.tn-elevated .tns-search-container .form-textbox-label {
	font-size: 17px;
}

@media only screen and (max-width: 734px) {
	.tn.tn-elevated ~ .tns-search-button {
		width: 36px;
		height: 36px;
	}

	.tn.tn-elevated ~ .tns-search-button .form-icons {
		font-size: 16px;
	}
}