ReactMarkap/src/assets/scss/components/_search.scss

.search {
	display: flex;
	padding-left: 16px;
	padding-right: 16px;
	padding-top: 12px;
	padding-bottom: 12px;
	height: 48px;
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.13);
	border-radius: 8px;

	@include for-desktop-up {
		position: relative;
		padding-right: 286px;
		max-width: 970px;
		margin-left: auto;
		margin-right: auto;
	}

	&__button {
		flex-shrink: 0;
		margin-right: 8px;
		background-color: transparent;
		border: 0 none;
		height: auto;
		width: auto;

		@include for-desktop-up {
			font-size: 18px;
			position: absolute;
			right: 0;
			top: 0;
			height: 48px;
			width: 270px;
			order: 1;
			margin-right: 0;
			background-color: $primary-blue;
			border-color: $primary-blue;
			border-radius: 0;
			border-top-right-radius: 8px;
			border-bottom-right-radius: 8px;
		}
	}

	&__button-text {
		display: none;

		@include for-desktop-up {
			display: inline;
			color: #ffffff;
		}
	}

	&__button-icon {
		width: 24px;
		height: 24px;
		color: #a8a2a2;

		@include for-desktop-up {
			color: #ffffff;
			margin-right: 16px;
		}
	}

	&__input {
		font-size: 16px;
		border: 0 none;
		padding: 0;
		color: #999999;
		width: 100%;

		&::placeholder {
			color: #999999;
		}

		@include for-desktop-up {
			order: 0;
		}
	}
}