@import "variables";

.column-status {
	width: 4em;
	text-align: center;
	vertical-align: middle;

	.dashicons {
		&-yes {
			color: $sg-green;
		}

		&-no {
			color: #ddd;
		}
	}
}


.hamail-address {

	&-notice-sent {
		margin: 1em 0;
		color: $sg-red;
		font-size: 1.2em;
	}

	.block {
		display: block;
		margin: 5px 0;
	}

	.inline-block {
		display: inline-block;
		margin: 5px 10px 5px 0;
	}
	&-group {
		margin: 0;
		padding: 15px;
		background-color: #f9f9f9;
		& + & {
			background-color: $sg-lighter-gray;
		}

		h4 {
			font-size: 1.2em;
			color: $sg-slate;
			margin-top: 0;
		}

		h5 {
			font-size: 1em;
			font-weight: 700;
			color: $sg-gray;
		}
	}

	&-textarea {
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	hr {
		margin: 10px 0;
		border-color: #ddd;
	}

	.regular-text {
		width: 100%;
		box-sizing: border-box;
	}

	// User filter
	&-filter {
		margin-bottom: 2em;
	}
}


.hamail-meta {

	&-title {
		margin: 20px 0 10px;
		font-size: 1em;
	}

	&-body {
		.block {
			margin: 10px 0;
		}

		.inline-block {
			margin: 5px 5px 5px 0;
			display: inline-block;
		}
	}

	&-row {

		select,
		input[type="text"],
		input[type="url"],
		input[type="password"] {
			box-sizing: border-box;
			width: 100%;
		}


	}
}

.hamail-search {

	&-type {
		margin-bottom: 10px;

		&-label {
			color: $sg-gray;
			margin-right: 0.5em;
		}
	}

	&-nav {
		width: 33%;
		float: left;
		box-sizing: border-box;
		border-top: 1px solid $sg-gray;

		&.total {
			text-align: center;
			color: $sg-gray;
		}

		&.prev {
			text-align: left;
		}

		&.next {
			text-align: right;
		}

		&-wrapper {

			&::after {
				content: "";
				display: block;
				height: 0;
				clear: left;
			}
		}
	}

	&-list {
		display: block;
		padding: 10px;
		margin: 10px 0;
		min-width: 80px;
		background: #f9f9f9;

		&.loading {
			position: relative;

			&::before {
				content: "Loading...";
				position: absolute;
				display: block;
				z-index: 21;
				top: 50%;
				left: 50%;
				color: $sg-gray;
				transform: translate(-50%, -50%);
				font-size: 18px;
			}

			&::after {
				position: absolute;
				display: block;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				content: "";
				text-align: center;
				line-height: 1;
				z-index: 20;
				background: rgba(255, 255, 255, 0.8);
			}
		}

		li {
			display: inline-block;
			margin: 5px 5px 5px 0;
			padding: 5px;
			border: 1px solid #ddd;
			border-radius: 2px;
			background: #fff;

			a {
				&:link,
				&:visited {
					color: #ccc;
					text-decoration: none;
				}

				&:hover,
				&:active {
					color: $sg-red;
					text-decoration: none;
				}
			}

		}
	}
}


.hamail-success {
	color: $sg-green;

	.dashicons {
		color: $sg-green;
	}

	&-log {
		margin: 10px 0;
		padding: 10px;
		overflow-x: scroll;
		background-color: #f9f9f9;
		border: 1px solid #ddd;
		white-space: normal;
	}
}

.hamail-instruction {
	padding: 20px 0;

	&-table {
		table-layout: auto;
		width: 100%;
		border-collapse: collapse;

		caption {
			padding: 10px;
			color: #888;
		}

		th,
		td {
			padding: 5px;
			border: 1px solid #ddd;
		}

		thead {
			th {
				border-bottom: 3px double #ddd;
				text-align: left;
			}
		}

		tbody {
			th {
				white-space: nowrap;
				font-family: monospace;
				text-align: left;
				font-weight: 500;
				color: $sg-gray;
			}
		}
	}
}