@use '../../base/mixins/breakpoints' as break;
@use '../../base/functions' as *;

.search {
	&-wrapper {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		border: 2px solid transparent;
		border-radius: var(--radius-small);
	}

	&-input {
		border: 2px solid transparent;
		border-radius: var(--radius-small);
		outline: none;
		padding: var(--padding-extra-small) var(--padding-medium);
		width: 100%;
		font-family: var(--txt-body-family), sans-serif;
		min-width: 300px;
		font-size: var(--txt-body-size);
		color: var(--neutral-1);

		&::placeholder {
			font-size: var(--txt-body-size);
			font-family: var(--txt-body-family), sans-serif;
		}

		@include break.min-mobile {
			min-width: 500px;
		}
	}

	&-actions {
		position: absolute;
		right: 0;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;

		hr {
			width: 1px;
			height: 20px;
			margin: 0 10px;
			background-color: var(--color-midnight);
		}

		.general-icon {
			color: var(--action-secondary);
		}
	}
}

.search-result-highlight {
	border-radius: 2px;
	background-color: var(--color-daffodil);
}