/*--------------------------------------------------------------
>>> SEARCH:
----------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# BUTTONS
--------------------------------------------------------------*/

.satus-text-field--search {
	position: absolute;
	z-index: 1;
	right: 60px;

	width: calc(100vw - 72px);
	margin: 0;
	padding-right: 36px;
}

.satus-text-field--search:focus {
	box-shadow: 0 0 0 4px rgba(13, 110, 253, .25);
}

.search-mode .satus-text-field--search {
	display: block;
}

.search-mode--results {
	border-bottom-right-radius: unset;
	border-bottom-left-radius: unset;
}

.satus-text-field--search>.satus-button {
	position: absolute;
	z-index: 9;
	top: 0;
	right: 0;

	width: 26px;
	min-width: 26px;
	height: 26px;
	margin: 4px;
	padding: 3px;
}

.satus-text-field--search[results] {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.search-results {
	top: 56px;

	height: calc(100vh - 56px);
}

.search-results .satus-modal__surface {
	position: absolute;
	top: -10px;
	left: 12px;

	width: calc(100% - 72px);
	min-width: unset;
	max-width: unset;
	max-height: calc(100vh - 56px);
	margin: 0;
	padding: 0;

	transform: none;
	transform-origin: top;
	animation: none;

	opacity: 1;
	border: 1px solid var(--satus-text-field-border);
	border-top: none;
	border-radius: 4px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	background-color: var(--satus-text-field-background);
	box-shadow: none;
}

.search-results .satus-section>* {
	width: 100%;
	height: 40px;
	min-height: unset;
	padding: 0 16px;
}

.search-results .satus-select__label {
	text-align: left;
}

.search-results .satus-section--label {
	font-size: 15px;
	font-weight: 500;

	display: block;

	width: calc(100% - 16px);
	max-width: 900px;
	margin: 8px auto 0 12px;
}