@import '_mixins';

.simpay-metabox-title {
	border: 1px solid #eee;
}

// Global settings pages
#simpay-global-settings {

	margin-right: 310px;

	// Remove right margin for sidebar promo on mobile.
	@media (max-width: 768px) {
		margin-right: 0;
	}

	// form-table is the class given to the table generated by WordPress when using the settings API
	.form-table {

		.payment-details-description-tag {
			display: inline-block;
			background: rgba( 0, 0, 0, 0.07 );
			padding: 0 3px;
		}

	} // end .form-table

	#simpay-settings-left {
		float: left;
		width: 100%;
	}

	#simpay-settings-sidebar-right {

		float: right;
		width: 270px;
		margin-right: -290px;

		// Move sidebar promo below other settings on mobile.
		@media (max-width: 768px) {
			float: left;
			margin-right: 0;
		}

		h3 {
			padding: 10px 12px;
		}
		
		.centered {
			text-align: center;
		}

		.button-large {
			font-size: 17px;
			line-height: 30px;
			height: 32px;
		}

		.sidebar-heading {
			font-size: 17px;
		}

		.postbox-nobg {
			position: relative;
			min-width: 255px;
		}

		.sidebar-container .postbox .inside {
			margin-bottom: 0;
		}
	}
}

// Form settings tabs/pages
#simpay-form-settings {

	// inside is applied to the outermost wrapper of post metaboxes
	// generated by WordPress
	.inside {
		margin: 0;
		padding: 0;
	}

	// simpay-tabs is the class for the metabox tabs ul element in the form settings
	.simpay-tabs {
		background: #fafafa;
		border-right: 1px solid #eee;
		box-sizing: border-box;
		float: left;
		line-height: 1em;
		margin: 0;
		padding: 0 0 10px;
		position: relative;
		width: 25%;

		li {
			display: block;
			margin: 0;
			padding: 0;

			&.active {
				a {
					background-color: #eee;
					color: #555;
					position: relative;
				}
			}

			.simpay-tab-item {
				border-bottom: 1px solid #eee;
				display: block;
				line-height: 20px;
				margin: 0;
				padding: 10px;
				text-decoration: none;

				&:focus {
					box-shadow: none;
				}
			}
		}

		&:after {
			background-color: #fafafa;
			border-right: 1px solid #eee;
			bottom: -9999em;
			content: "";
			display: block;
			height: 9999em;
			left: 0;
			position: absolute;
			width: 100%;
		}
	} // end .simpay-tabs

	// simpay-panels-wrap is the main wrapper we use around the tabs and metabox content where the form settings are output
	.simpay-panels-wrap {
		background: #fff;
		min-height: 350px;
		overflow: hidden;
	}

	// simpay-panel-field is the wrapping tr element for each setting field on the form settings pages
	.simpay-panel-field {

		> td {
			width: 82%;
		}

		> th {
			font-weight: normal;
			min-width: 200px;
			width: 15%;
		}

		> td,
		> th {
			padding: 5px 20px 10px 10px;
			text-align: left;
			vertical-align: text-top;
		}

		.simpay-field-text {
			max-width: 500px;
			width: 100%;
		}

		// Validation error labels, important admin text
		.error,
		.simpay-important {
			color: #a94442;
			font-weight: normal;
		}

		// Image preview
		.simpay-image-preview-wrap {
			position: relative;
			margin-top: 12px;

			// Resize & position remove icon to top-left corner of image.
			.simpay-remove-image-preview {
				position: absolute;
				top: -15px;
				left: -15px;
				cursor: pointer;
				background-color: #fff;

				&:before {
					font-size: 22px;
					line-height: 26px;
				}
			}

			.simpay-image-preview {
				max-height: 128px;
				max-width: 128px;
				border: 1px solid #ddd;
			}
		}

	} // end .simpay-panel-field

	// simpay-panel is the main wrapper for all of our form settings
	.simpay-panel {
		margin-left: 25%;
		max-width: 75%;
		padding-bottom: 30px;

		> table {
			width: 100%;

			thead th {
				border-bottom: 1px solid #eee;
				font-size: 14px;
				font-weight: bold;
				padding: 12px 0 15px 10px;
				text-align: left;
			}
		}

		> table > tbody {
			tr {

				&:first-child td,
				&:first-child th {
					padding-top: 14px;
				}

				&:last-child td,
				&:last-child th {
					border-bottom: 0;
					padding-bottom: 0;
				}
			}
		}

		// Promo under payment form settings
		.simpay-promo-under-box {
			background-color: #f4f4f4;
			border: 1px solid #e5e5e5;
			padding: 10px 20px;
			margin: 30px 15px;

			h2 {
				font-size: 18px;
				font-weight: 600;
				margin: 0;
				padding: 0;
			}

			p {
				font-size: 14px;
			}
		}

	} // end .simpay-panel

	// simpay-panel-hidden is applied to panels on the form settings that need to be hidden initially
	.simpay-panel-hidden {
		display: none;
	}
}

// Styles that apply to both global & form/CPT settings pages
#simpay-global-settings,
#simpay-form-settings {

	// There is an issue with Chosen not having a width when elements are hidden to begin with so we set one here explicitly
	.chosen-container {
		min-width: 20em;
		max-width: 30em;
	}

	// simpay-field is applied to all settings input elements
	.simpay-field {

		&.simpay-small-text {
			width: 7em;
		}

		&.simpay-medium-text {
			width: 15em;
		}

		// WP core's "regular-text" class is 25em width.

	} // end .simpay-field

	// specifically radio input fields
	.simpay-field-radios {

		> i {
			margin-left: 5px;
			vertical-align: middle;
		}
	}

	// for radio fields that should be displayed inline
	.simpay-field-radios-inline {
		margin: 0;

		> li {
			display: inline-block;
			margin-right: 10px;

			&:last-child {
				margin-right: 0;
			}
		}
	} // end .simpay-field-radios-inline

	// for select (textarea) elements
	.simpay-field-select {
		max-width: 20em !important;
	}

	// Common attributes for both left and right positioned currency symbols
	.simpay-currency-symbol {
		background-color: #f2f2f2;
		border: 1px solid #ddd;
		margin: 0;
		padding: 5px 8px;
		font-size: 14px;
	}

	// Specific styles for the left currency symbol
	.simpay-currency-symbol-left {
		border-right: none;
		margin-right: -4px;
	}

	// Specific styles for the right currency symbol
	.simpay-currency-symbol-right {
		border-left: none;
		margin-left: -4px;
	}

	// Amount input
	.simpay-amount-input {
		margin: 0;
		padding: 5px;
		font-size: 14px;
		width: 6em;
	}

	// Error messages
	.simpay-error {
		color: #f00;
	}

	// Docs links
	.simpay-docs-link-wrap {

		color: #666;
		float: right;
		font-size: 13px;
		font-style: italic;
		padding: 20px;

		a {
			.dashicons-editor-help {
				color: #666;
				text-decoration: none;
				width: 17px;
				height: 17px;
				font-size: 17px;
				padding-left: 4px;
			}
		}
	}

	// Pro or account upgrade link button
	.simpay-upgrade-btn {
		background-color: #428bca;
		border: 1px solid #2d6ca2;
		border-radius: 5px;
		color: #fff;
		display: inline-block;
		font-size: 13px;
		font-weight: normal;
		padding: 5px 10px;
		text-decoration: none;
		white-space: nowrap;

		&:hover {
			background-color: #037ad0;
			border: 1px solid #025794;
		}
	}
}

// This is for the section where users can easily copy the shortcode
#simpay-get-shortcode {

	input {
		&.simpay-shortcode {
			border: 1px solid #ddd;
		}
	}
}

// System Status page
#simpay-system-status-report {
	textarea {
		font-family: monospace;
		min-height: 200px;
		padding: 5px 20px;
		white-space: pre;
		width: 100%;
	}
}

.simpay-system-status-report-panel {

	margin: 20px 0;

	thead th {
		font-weight: bold;
	}

	tbody td,
	thead th {
		font-size: 14px;
		vertical-align: top;
	}

	tbody {

		.label {
			width: 30%;
		}

		tr:nth-child(odd) td {
			background-color: rgba(0, 0, 0, .02);
		}

	}

	dl {
		margin: 0;
		padding: 0;
	}

	dt {

		float: left;
		font-style: italic;
		margin: 0 4px 0 0;

	}

	dd {
		margin: 0;
	}

	mark {

		background-color: transparent;
		font-weight: bold;

		&.ok {
			color: green;
		}

		&.error {
			color: red;
		}

		&.warning {
			color: #ffb900;
		}
	}

}