$wBtn: 62px;
$hBtn: 53px;
.buscar {
	width: 100%;
	height: 55px;
	border: 1px solid #2f4f7e;
	border-radius: 5px;
	position: relative;
	&__input {
		width: calc(100% - #{$wBtn});
		height: $hBtn;
		padding: 0 20px;
		background-color: transparent;
		font-size: 16px;
		font-weight: bold;
		letter-spacing: 2px;
		color: #2f4f7e;
		text-transform: uppercase;
		&::placeholder {
			color: #2f4f7e;
		}
	}
	&__btn {
		width: $wBtn;
		height: $hBtn;
		position: absolute;
		background: #2f4f7e;
		border-right: 1px solid #2f4f7e;
		border-radius: 5px;
		top: 0;
		right: -1px;
		transition: 0.3s ease-in-out;
		&::after {
			content: url('../img/content/lupa.svg');
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		&:hover {
			background-color: #ed2f59;
			transition: 0.3s ease-in-out;
		}
	}
	@include breakpoint(0 576px) {
		$wBtn: 50px;
		$hBtn: 48px;

		width: calc(100% - #{$wBtn});
		height: $hBtn;
		&__input {
			height: $hBtn;
			font-size: 12px;
			letter-spacing: 1.5px;
		}
		&__btn {
			width: $wBtn;
			height: $hBtn;
		}
	}
}
