/* Patterns - Interaction - Search */
////
/// @group Patterns-Search
/// Patterns - Interaction - Search

///
.search {
	position: relative;

	&:empty {
		// Service Studio Preview
		& {
			-servicestudio-height: 40px;
		}
	}

	&-input {
		position: relative;

		&:empty {
			// Service Studio Preview
			& {
				-servicestudio-background-color: get-background-color('neutral-0');
				-servicestudio-border-radius: 4px;
				-servicestudio-height: 40px;
			}
		}

		&:after {
			align-items: center;
			color: get-text-color('neutral-6');
			content: '\f002';
			display: flex;
			font: normal normal normal 14px/1 FontAwesome;
			height: 100%;
			left: 16px;
			position: absolute;
			top: 0;
		}
	}

	&-preview {
		display: none;
	}

	.form-control {
		&[data-input] {
			padding-left: var(--space-xl);
		}
	}
}

.form {
	.search {
		input[data-input] {
			margin-bottom: var(--space-none);
		}
	}
}

// IsRTL -------------------------------------------------------------------------
///
.is-rtl {
	.search {
		&-input:after {
			left: auto;
			right: 16px;
		}

		.form-control[data-input] {
			padding-left: var(--space-base);
			padding-right: var(--space-xl);
		}
	}
}

// Layout Native ------------------------------------------------------------------
///

.layout-native {
	.header {
		.search {
			input[data-input] {
				&,
				&:empty {
					border: var(--border-size-none);
					padding-left: var(--space-xl);
				}
			}
		}
	}

	.header-right {
		.search {
			background-color: get-background-color('transparent');
			padding: var(--space-none);
			position: static;

			&.open {
				.search {
					&-glass {
						.search {
							&-round,
							&-stick-bottom {
								height: 24px;
								right: 17px;
							}
							&-round {
								border-radius: var(--border-radius-none);
								box-shadow: inset 0 0 0 3px get-background-color('neutral-6');
								transform: rotate(135deg);
								width: 3px;
							}

							&-stick-bottom {
								background-color: get-background-color('neutral-6');
								top: 12px;
								transform: rotate(45deg);
							}
						}
					}

					&-input {
						transform: translate(0, 0);
					}
				}
			}

			&-glass {
				display: inline-block;
				height: 44px;
				position: relative;
				width: 40px;
			}

			&-round {
				border-radius: var(--border-radius-circle);
				box-shadow: inset 0 0 0 3px get-background-color('neutral-6');
				height: 16px;
				margin-top: -10px;
				position: absolute;
				right: 13px;
				top: 50%;
				transition: all 300ms ease;
				width: 16px;
			}

			&-stick-bottom {
				background-color: get-background-color('neutral-6');
				content: '';
				height: 10px;
				position: absolute;
				right: 12px;
				top: 23px;
				transform: rotate(-45deg);
				transition: all 300ms ease;
				width: 3px;
			}

			&-input {
				left: var(--os-safe-area-left);
				position: absolute;
				right: 0;
				top: var(--os-safe-area-top);
				transform: translate(0, calc(-100% - var(--os-safe-area-top)));
				transition: all 300ms ease;

				input[data-input] {
					&,
					&:empty {
						height: 34px;
						padding-left: var(--space-xl);
						transition: none;
					}
					&:focus {
						border-bottom: var(--border-size-s) solid get-border-color('transparent');
					}
				}

				::-webkit-input-placeholder {
					color: get-text-color('neutral-6');
				}
			}
		}
	}

	.header-content {
		.search {
			input[data-input] {
				&,
				&:empty {
					border-radius: var(--border-radius-none);
					height: var(--header-size);
				}
			}
		}
	}
}

// Hide Search on page transitions
.slide-from-left-enter .layout-native .header-right .search-input,
.slide-from-left-leave .layout-native .header-right .search-input,
.slide-from-right-enter .layout-native .header-right .search-input,
.slide-from-right-leave .layout-native .header-right .search-input,
.slide-from-top-enter .layout-native .header-right .search-input,
.slide-from-top-leave .layout-native .header-right .search-input,
.slide-from-bottom-enter .layout-native .header-right .search-input,
.slide-from-bottom-leave .layout-native .header-right .search-input,
.fade-enter .header-right .layout-native .search-input,
.fade-leave .header-right .layout-native .search-input {
	display: none;
}