/**
 *	Style for the search Functionality
 */

.search-wrapper-main, .search-wrapper-sticky {
	position: relative;
}

[class^="chdp-search"] {
	position: absolute;
	right: 0;
    width: 0;
	height: 100%;
    right: 100%;
    top: 0;
	opacity: 0;
	overflow: hidden;
	@extend %heading-font;
	@include transition(all 100ms ease-in-out);
	z-index: 999;
	form {
		height: 100%;
		background-color: $tertiary;

		label {
			height: 100%;
			display: flex;
			align-items: center;
			margin: 0;
			input[type="search"] {
				position: relative;
				height: 100%;
				background-color: $tertiary;
				border: 0;
				color: white;
				border-radius: 0;
				font-weight: 700;
				&::placeholder {
					color: rgba(255,255,255,0.4);
				}
				&:focus-visible {
					outline: none;
				}
			}
		}
		input[type="submit"] {
			display: none;
		}
	}
	button {
		@extend #go-to-field;
	}
}

@keyframes ripple {
  to {
    @include transform(scale(1));
    opacity: 0;
  }
}

#go-to-field {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
}
[class^="search-btn"] {
	position: relative;
	padding: 0;
}

span.ripple {
	position: absolute;
	height: 1000px;
	width: 1000px;
	border-radius: 50%;
	@include transform(scale(0));
	transform-origin: center center;
	animation: ripple 600ms cubic-bezier(0.4, 0.0, 0.2, 1);;
	background-color: rgba(255, 255, 255, 0.7);
}