@import '_mixins';



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


	// simpay-panel is the main wrapper for all of our form settings
	.simpay-panel {

		table.simpay-multi-subscriptions {

			padding-bottom: 10px;

			> tbody tr td,
			> thead tr th {
				padding: 0 10px 0 0;
			}

			> thead tr:first-child th {
				font-weight: normal;
			}

			// Custom label input
			.simpay-multi-plan-custom-label .simpay-label-input {
				min-width: 8em;
				max-width: 15em;
				width: 100%;
			}

			// Setup fee amount input
			.simpay-multi-plan-setup-fee {
				min-width: 6.5em;

				.simpay-amount-input {
					width: 4em;
				}
			}

			// Max charges input
			.simpay-multi-plan-max-charges input.small-text {
				width: 50px;
			}

			// "Default" radio buttons
			.simpay-field-radios ul li {
				text-align: center;
			}

			.sort-handle {
				cursor: move;
			}

			tr.simpay-multi-sub {

				.chosen-container-single {
					width: 280px !important;
				}
			}
		}
	} // end .simpay-panel

	// Custom fields metaboxes wrapper
	.simpay-metaboxes-wrapper {

		.toolbar {
			border-top: 1px solid white;
			border-bottom: 1px solid #eee;
			margin: 0;
			overflow: hidden;
			padding: 9px 12px;

			&:first-child {
				border-top: 0;
			}

			&:last-child {
				border-bottom: 0;
			}
		}

		.simpay-metaboxes {
			border-bottom: 1px solid #eee;
		}

		.simpay-metabox-sortable-placeholder {
			background-color: #f5f5f5;
			border: 1px dashed #bbb;
			margin-bottom: 9px;
		}

		.simpay-metabox {
			background: #fff;
			border-bottom: 1px solid #eee;
			margin: 0 !important;

			select {
				font-weight: 400;
			}

			&:last-of-type {
				border-bottom: 0;
			}

			.handlediv {
				background-position: 6px 5px;
				height: 26px;
				width: 27px;

				&:before {
					content: "\f142" !important;
					cursor: pointer;
					display: inline-block;
					font: 400 20px/1 "Dashicons";
					line-height: .5 !important;
					padding: 8px 10px;
					position: relative;
					right: 12px;
					top: 0;
				}
			}

			&.closed {

				.handlediv {
					&:before {
						content: "\f140" !important;
					}
				}

				h3 {
					border: 0;
				}
			}

			h3 {
				cursor: move;
				font-size: 1em;
				margin: 0;
				overflow: hidden;
				padding: .75em .75em .75em 1em;

				button, div.simpay-field-type {
					float: right;
				}

				.simpay-field-type {
					color: gray;
					font-weight: normal;
					line-height: 26px;
					position: relative;
					padding-right: 10px;
					text-decoration: none;
				}

				strong {
					font-weight: 700;
					line-height: 26px;
				}

				select {
					font-family: sans-serif;
					max-width: 20%;
					margin: .25em .25em .25em 0;
				}

				&.fixed {
					cursor: pointer !important;
				}
			} // end .simpay-metabox h3

			table {
				background-color: #fdfdfd;
				border-top: 1px solid #eee;
				padding: 1em;
				position: relative;
				width: 100%;

				&.simpay-inner-table {
					border: none;
					padding: 0 1em;
				}
			}

			.simpay-remove-field-link {
				color: #f00;
				margin-left: 10px;
				text-decoration: none;
			}
		} // end .simpay-metabox
	} // end .simpay-metaboxes-wrapper

	.simpay-field-metabox {

		// Dashicon for move handle icon. We make it more specific to not mess up dashicons on the users entire site
		.custom-field-dashicon {
			font-size: 1.3em;
			margin-right: 10px;
			vertical-align: middle;
		}
	}

	.simpay-multi-subs-wrap {

		table {
			// CSS standardize selector less qualified
			td.simpay-multi-sub-default {
				text-align: center;
			}
		}
	}

	#_amount[disabled="disabled"] {
		background: #eee;
	}

	// Make subscriptions tab have a minimum height so Chosen does not get cutoff at the bottom.
	// And it may need to scroll horizontally if too narrow.
	#subscription-options-settings-panel {
		min-height: 600px;
		overflow-x: auto;

		.simpay-plan-frequency {
			vertical-align: bottom;
		}
	}
}

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

	// Remove icon using dashicon "dismiss"
	// Subscription plan remove
	// Checkout overlay image remove
	.simpay-remove-icon {
		display: inline-block;
		padding: 5px;
		text-decoration: none;

		&:before {
			background: none;
			color: #b4b9be;
			content: "\f153";
			display: block;
			font: normal 16px/20px dashicons;
			height: 20px;
			speak: none;
			text-align: center;
			width: 20px;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		&:hover:before {
			color: #c00;
		}
	}
}