$border-color: #ccc;
$backgrount-color: #fff;

.cherry-search{
	position: relative;
	form.cherry-search__form {
		display: flex;
		margin-bottom: 0;
		&:after{
			display:none;
		}
		button.search-submit {
			display: inline-block;
			flex: 0 1 auto;
			padding: 5px 15px;
			width: inherit;
			white-space: nowrap;
			&:before {
				display:none;
			}
			.screen-reader-text {
				position: relative !important; /**Sorry but this important use to kill the property of WordPress.**/
			}
		}
	}
	&__label{
		flex: 1 1 auto;
	}
	&__field.search-field[ type="search" ]{
		width: 100%;
		box-sizing: border-box;
	}
	&__results-list{
		display: none;
		position: absolute;
		width: 100%;
		border: 1px solid $border-color;
		border-top:none;
		background-color: $backgrount-color;
		z-index: 9999;
		&.show{
			display: block;
		}
		ul{
			margin: 0 0 0 0;
			li{
				margin: 0 0 0 0;
			}
		}
		&::-webkit-scrollbar {
			width: 8px;
			height: 10px;
			margin-left: -3px;
			&-button {
				width: 0px;
				height: 0px;
			}
			&-thumb {
				background-color: #ccc;
				border: none;
				&:hover, &:active {
					background-color: #ccc;
				}
			}
			&-track {
				background-color: #f7f7f7;
				border: none;
				opacity: 0.5;
				border-radius: 5px;
			}
			&-corner {
				background: transparent;
			}
		}
	}
	&__results-item{
		list-style: none;
		border-top: 1px solid $border-color;
		background-color: $backgrount-color;
		transition: all 0.4s ease-in-out;
		margin: 0;
		text-align: left;
		&:hover{
			background-color: #f6f6f6;
		};
		&:first-child{
			border-top: none;
		};
		a{
			text-decoration: none;
			border: none;
			padding: 5px;
			display: flex;
			box-shadow: none;
		}
	}
	&__more-button{
		list-style: none;
		border-top: 1px solid $border-color;
		background-color: $backgrount-color;
		transition: all 0.4s ease-in-out;
		text-align: center;
		padding: 10px;
		cursor: pointer;
		&:hover{
			background-color: #f6f6f6;
		};
	}
	&__item-thumbnail{
		flex: 0 1 15%;
		margin: 0px 10px 0 0 ;
		min-width: 15%;
		img{
			width: 100%;
			height: auto;
		}
	}
	&__item-attr{
		font-size: 14px;
		flex: 1 1 auto;
	}
	&__item-title, &__item-content, &__item-author{
		display: block;
		width: 100%;
	}
	&__item-content, &__item-author{
		margin: 5px 0 0 0;
	}
	&__item-author{
		font-size: 12px;
	}
	&__spinner_holder{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	&__spinner {
		width: 50px;
		height: 30px;
		display:none;
		opacity: 0.3;
		margin-bottom: 5px;
		margin-top: 5px;
		&.show{
			display: block;
		}
		& > div {
			background-color: #000;
			margin: 0 1px;
			height: 100%;
			width: 6px;
			display: inline-block;
			animation: sk-stretchdelay 1.1s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
		}
		& .rect{
			&2{
				animation-delay: -1.0s;
			}
			&3{
				animation-delay: -0.9s;
			}
			&4{
				animation-delay: -0.8s;
			}
			&5{
				animation-delay: -0.7s;
			}
		}
	}
	&__message{
		padding: 6px 10px;
		display: none;
		&.show{
			display: block;
		}
	}
}
@keyframes sk-stretchdelay {
	0% {
		transform: scaleY(0.4);
	}
	25% {
		transform: scaleY(0.9);
	}
	50% {
		transform: scaleY(0.2);
	}
	80% {
		transform: scaleY(0.4);
	}
	100%{
		transform: scaleY(0.4);
	}
}