woocommerce-paypal-payments/modules/ppcp-wc-gateway/resources/css/common.scss

@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-button-dummy {
		display: flex;
		min-height: 25px;
		align-items: center;
		justify-content: center;
		background: #0001;
		position: relative;

		&:before {
			content: '';
			position: absolute;
			left: 12px;
			top: 50%;
			transform: translateY(-50%);
			width: 42px;
			height: 24px;
			background-image: var(--apm-button-dummy-background, none);
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center left;
		}
	}
}

.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;
	}
}

.ppcp-notice {
	background: #fff;
	border: 1px solid #c3c4c7;
	border-left-width: 4px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
	margin: 5px 15px 2px 0;
	padding: 1px 12px;

	p, .form-table td & p {
		margin-top: 4px;
		margin-bottom: 4px;
	}

	.highlight {
		background: transparent;
		font-weight: 600;
	}
}

.ppcp-notice-success {
	border-left-color: #00a32a;

	.highlight {
		color: #00a32a;
	}
}

.ppcp-notice-warning {
	border-left-color: #dba617;

	.highlight {
		color: #dba617;
	}
}

.ppcp-notice-error {
	border-left-color: #d63638;

	.highlight {
		color: #d63638;
	}
}

// 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;
				padding-right: 40px;
			}

			.ppcp-notice  {
				margin-left: 40px;
				margin-right: 10px;
				padding: 1px 12px;

				p {
					margin: .5em 0;
					padding: 2px;
				}
			}

			.ppcp-notice-list {
				list-style-type: disc;
				padding-left: 20px;
			}

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

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

	.ppcp-settings-field-select {
		p.description {
			margin-bottom: 1em;
		}
	}
}