@use "../../../ppcp-button/resources/css/mixins/apm-button" as apm-button;

$border-color: #c3c3c3;
$background-ident-color: #fbfbfb;

.ppcp-field-hidden {
	display: none !important;
}

.ppcp-field-disabled {
	cursor: not-allowed;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	opacity: 0.5;
}

.ppcp-active-spacer {
	th, td {
		padding: 0;
		height: 1rem;
	}
}

// Prevents spacing after button group.
.ppcp-button-preview-inner {
	line-height: 0;
}

.ppcp-button-apm {
	@include apm-button.button;
}

.ppcp-status-text {
	padding-top: 4px;

	.error {
		color: red;
		font-weight: bold;
	}

	.success {
		color: green;
		font-weight: bold;
	}
}

.ppcp-align-label-center {
	th {
		text-align: center;
	}
}

.ppcp-valign-label-middle {
	th {
		vertical-align: middle;
	}
}

// Box indented fields.
@media screen and (min-width: 800px) {
	.ppcp-settings-field {
		border-left: 1px solid transparent;
		border-right: 1px solid transparent;

		&.active {
			background-color: $background-ident-color;
			border: 1px solid $border-color;

			th {
				padding-left: 20px;
			}
		}

		&.ppcp-field-indent {
			background-color: $background-ident-color;
			border: 1px solid $border-color;

			th, &.ppcp-settings-field-heading td  {
				padding-left: 40px;
			}

			th, td {
				border-top: 1px solid $border-color;
			}

			& + .ppcp-field-indent {
				th, td {
					border-top: 1px solid $background-ident-color;
				}
			}
		}
	}
}