.bt-input {
	position: relative;

	&.bt-input--icon {
		input {
			padding-left: 1.75rem;
		}
	}

	input {
		width: 100%;
		padding: 6px;
		border: 1px solid $bt-border-grey;
		box-shadow: none;
		color: $bt-base-text;
		font-size: 14px;
		font-family: 'FontAwesome', 'Inter', sans-serif;
		transition: 100ms;
		border-radius: 4px;
		text-indent: 6px;

		outline: none;

		&::-webkit-search-cancel-button {
			-webkit-appearance: none;
			background: url(../svg/common/close.svg);
			width: 10px;
			height: 10px;
			background-size: contain;
			cursor: pointer;
		}

		&::placeholder {
			color: $bt-light-grey;
		}

		&:focus {
			border: 1px solid #2684ff;
			box-shadow: 0 0 0 1px #2684ff;

			+ svg {
				fill: #2684ff;
			}
		}

		&:focus {
			&::placeholder {
				color: $bt-base-text;
			}
		}

		@include mobile {
			// Set the font size so no zoom in on mobile
			// font-size: 16px;
		}
	}

	svg {
		position: absolute;
		width: 1rem;
		height: 1rem;
		left: 0.75rem;
		top: 50%;
		transform: translateY(-50%);
		color: inherit;
		fill: $bt-light-grey;
		transition: 100ms;
	}
}
