.hamecache-divider{
	margin: 3em 0;
}

#wpadminbar .dashicons{
	font-family: Dashicons;
}

.hamecache-message{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
	background-color: #F3801F;
	color: #fff;
	p{
		padding: 1em;
		margin: 0 auto;
		max-width: 768px;
		text-align: center;
	}
	&-success {
		background-color: #79C698;
	}
	&-error{
		background-color: #ff0000;
	}
}

.hamecache-error{
	margin: 1em 0;
	padding: 1em;
	background: #ffc1c3;
	color: red;
	border-radius: 2px;
	p:last-child{
		margin-bottom: 0;
	}
}

.hamecache-label{
	display: inline-block;
	margin: 0 10px 10px 0;
	padding: 5px;
	border: 1px solid #ddd;
	background-color: #f9f9f9;
}

.hamecache-rule{

	&-list{
		margin: 2em 0;
		padding: 0;
		counter-reset: rules;
	}


	$rule-divider: 1px solid #ddd;
	&-item{
		list-style: none;
		margin: 0;
		padding: 1em 1em 1em 40px;
		counter-increment: rules;
		position: relative;
		border-top: $rule-divider;
		&:nth-child(even){
			background-color: #f4f4f4;
		}
		&:last-child{
			border-bottom: $rule-divider;
		}
		&:before{
			transform: translateY( -50% );
			content: counter(rules);
			position: absolute;
			width: 40px;
			text-align: center;
			font-size: 20px;
			top: 50%;
			left: 0;
			font-family: "Noto Serif", serif;
			font-style: italic;
			color: #bbb;
		}
	}

	&-url{
		position: relative;
		margin-bottom: 10px;
		input{
			background-color: #fff;
			padding: 10px 15px;
			font-size: 16px;
			border-radius: 3px;
		}
	}
	&-status{
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY( -50% );
		.dashicons-yes{
			color: green;
		}
		.dashicons-no{
			color: darkgray;
		}
	}

	&-action{
		font-size: 12px;
		display: inline-block;
		margin-right: 1em;
		span{
			color: #888;
		}
		code{

		}
	}

}