/**
 * #.# Editor Styles
 *
 * CSS for just Backend enqueued after style.scss
 * which makes it higher in priority.
 */

@import "reset";

.wp-block-gratify-block-gratify-gutenberg  {
	background: #ffffff;
	color: #444;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	font-size: 13px;
	line-height: 1.4em;
	margin: 0;
	border: 2px solid #f1f1f1;
	padding: 2rem 1rem;
	max-width: none;

	.gratify-setup-form {
		text-align: left;
	}

	.gratify-plugin-settings {
		border-top: 1px solid #CCC;
		margin: 0 -14px;
		padding: 17px 14px 0;

		label {
			margin-right: 10px;
		}

		input[type="color" i] {
			padding: 2px;
		}

		> div{
			margin-right: 20px;
			display: inline-block;
			vertical-align: middle;
			margin-bottom: 18px;

			.gratify-settings-title {
				font-size: 1em;
				margin: 0 0 1.33em ;
				font-weight: 600;
			}
		}

		> .fields {
			display: block;

			.button-text-control {
				padding: 5px;
				margin: 0;
				width: 242px;
				border-radius: 3px;
			}

			.form-group {
				margin-bottom: 15px;

				&.form-group-inline {
					display: inline-block;
					vertical-align: middle;
					margin-right: 20px;
				}
			}


		}


	}


	.gratify-search-input {
		position: relative;
		input {
			font-size: 28px;
			font-weight: 100;
			width: 100%;
			margin-bottom: 10px;
			padding: 10px 0 6px;
			border: none;
			border-bottom: 5px solid #eee;
			transition: border-color .3s ease-in;
			outline: 0;

			&:focus {
				transition: border-color .3s ease-in;
				outline: 0;
				border-color: #ed5565;
			}

			&::-webkit-input-placeholder, &:-moz-placeholder, &:-ms-input-placeholder {
				font-weight: 100;
				color: #999;
			}
		}

		.ais-SearchBox-submit {
			display: none;
		}

		.ais-SearchBox-reset {
			position: absolute;
			top: 9px;
			right: 0px;
			padding: 10px;
		}
	}

	.gratify-pagination {
		width: 100%;
		margin: 30px auto 10px;
		text-align: center;

		ul {
			font-size: 0;
			list-style-type: none;
			text-align: center;
			display: inline-block;
		}

		li {
			font-size: 14px;
			display: inline;

			&:first-child .ais-Pagination-link {
				border-top-left-radius: 4px;
				border-bottom-left-radius: 4px;
			}

			&:last-child .ais-Pagination-link {
				border-right: 1px solid #eee;
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;
			}

			&.ais-Pagination-item--selected .ais-Pagination-link {
				color: white;
				border-color: #ed5565;
				background: #ed5565;

				&:hover {
					cursor: default;
				}
			}

			&.ais-Pagination-item--disabled .ais-Pagination-link {
				cursor: not-allowed;

				&.hover {
					background: none;
				}
			}
		}

		a, .ais-Pagination-link {
			padding: 8px 12px;
			text-decoration: none;
			color: #000;
			border: 1px solid #eee;
			border-right: none;

			&:hover {
				background: #f5f5f5;
			}
		}


	}

	button.gratify-insert-button {
		padding: 8px 12px;
		text-decoration: none;
		color: #fff;
		border: 1px solid #ed5565;
		background: #ed5565;

		&:disabled {
			background-color: #CCC;
			color: #000;
			opacity: 0.4;
			border-color: #CCC;
		}
	}

	.gratify-footer {
		text-align: right;
	}
}

.gratify-hits {
	margin: 4px 0;
	padding: 10px 0;
	border-top: 2px solid #eee;
	min-height: 450px;

	ul, ul.ais-Hits.gratify-hits {
		list-style: none !important;
	}

	.hit {
		font-size: 0;
		padding: 8px 0;
		border-bottom: 1px solid #eee;
		cursor: pointer;

		&:hover {
			transition: background-color .3s ease-in;
			background-color: #eee;
		}

		&.active {
			transition: background-color .3s ease-in, color .3s ease-in;
			background-color: #ed5565;
			color: #fff;

			.hit-name {
				transition: color .3s ease-in;
				color: #fff;
			}

			.hit-price {
				transition: color .3s ease-in;
				color: #fff;
			}
		}
	}

	.hit-image {
		display: inline-block;
		width: 16%;

		img {
			max-width: 100%;
			max-height: 180px;
		}
	}

	.hit-content {
		font-size: 13px;
		font-weight: 300;
		display: inline-block;
		width: 98%;
		margin-right: 1%;
		margin-left: 1%;
		vertical-align: top;

		em {
			font-style: normal;
			background: #fbdde0;
		}

		.hit-name {
			font-size: 17px;
			line-height: 18px;
		}

		.hit-price {
			font-size: 20px;
			float: right;
			margin-left: 20px;
			margin-top: 10px;
			color: #ed5565;
		}

		.hit-price, .hit-name {
			font-weight: normal;
			margin-top: 5px;
			margin-bottom: 5px;
		}

		.hit-description {
			color: #999;
		}
	}
}