woocommerce-paypal-payments/modules/ppcp-settings/resources/css/components/screens/dashboard/_tab-settings.scss

.ppcp-r-settings {
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.ppcp-r-settings-card {
	&.ppcp-r-settings-card--expert-settings {
		.ppcp-r-settings-card__header {
			margin-bottom: 48px;
		}

		> .ppcp-r-settings-card__content > .ppcp-r-settings-block:not(.ppcp-r-settings-block--tertiary) {
			padding-bottom: 32px;
			margin-bottom: 32px;

			&:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
				border-bottom: none;
			}
		}
	}
}

.ppcp-r-settings-block {
	&--primary {
		padding-bottom: 48px;
		margin-bottom: 48px;
		border-bottom: 1px solid $color-gray-700;

		> .ppcp-r-settings-block__header {
			.ppcp-r-settings-block__title {
				@include font(16, 20, 700);
				color: $color-black;
			}

			.ppcp-r-settings-block__description {
				margin-top: 8px;
			}
		}
	}

	&--secondary {
		> .ppcp-r-settings-block__header {
			.ppcp-r-settings-block__title {
				@include font(16, 20, 600);
				color: $color-gray-900;
				margin-bottom: 8px;
			}
		}
	}

	&--tertiary {
		padding-bottom: 0;
		margin-bottom: 24px;

		> .ppcp-r-settings-block__header {
			align-items: center;

			.ppcp-r-settings-block__title {
				color: $color-gray-800;
				@include font(14, 20, 400);
			}
		}
	}

	&--separated-settings {
		> .ppcp-r-settings-block__content {
			gap: 0;

			> .ppcp-r-settings-block {
				border-bottom: 1px solid $color-gray-500;
				padding-bottom: 32px;
				margin-bottom: 32px;

				&:last-child {
					border: none;
					padding: 0;
					margin: 0;
				}
			}
		}
	}

	&__title {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	&--toggle-content {
		> .ppcp-r-settings-block__header {
			align-items: center;
			cursor: pointer;

			* {
				user-select: none;
			}

			.ppcp-r-settings-block__action {
				transition: 0.2s transform ease-out;
			}

			&:hover {
				.ppcp-r-settings-block__action {
					transform: scale(1.2);
				}
			}
		}
	}

	&--button {
		> .ppcp-r-settings-block__header {
			align-items: center;
		}
	}

	&--content-visible {
		.ppcp-r-settings-block__toggle-content {
			transform: rotate(180deg);
		}
	}

	&__description {
		margin: 0;
		@include font(14, 20, 400);
		color: $color-gray-800;

		a {
			color: $color-blueberry;
		}

		strong {
			color: $color-gray-800;
		}
	}

	&__action {
		margin-left: auto;

		button.is-secondary {
			padding: 6px 12px;
			min-width: 166px;
			@include font(13, 20, 400);
			justify-content: center;
		}
	}

	&__toggle {
		.components-form-toggle {
			order: 1;
		}
	}

	&__content {
		display: flex;
		flex-direction: column;
		gap: 32px;
		margin-top: 32px;
	}

	&__header {
		display: flex;
		gap: 48px;

		&-inner {
			display: flex;
			flex-direction: column;
		}
	}

	&__mismatch-wrapper {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	&--order-intent {
		.ppcp-r-settings-block__content .ppcp-r-settings-block__title {
			font-size: 14px;
			margin-bottom: 4px;
			color: $color-gray-800;
		}
	}

	input[type='text'] {
		border-color: $color-gray-700;
		width: 282px;
		color: $color-gray-800;

		&::placeholder {
			color: $color-gray-700;
		}
	}

	&__sandbox {
		button.is-secondary {
			@include small-button;
		}

		.ppcp-r-connection-status__data {
			margin-bottom: 24px;
		}
	}


	.ppcp-r__radio-wrapper {
		align-items: flex-start;
	}

	.ppcp-r__radio-content {
		label {
			font-weight: 600;
		}
	}

	.ppcp-r__radio {
		padding-top: 2px;
	}
}


.ppcp-r-table {
	&__hooks-url {
		width: 70%;
		padding-right: 20%;
		text-align: left;
		vertical-align: top;
	}

	&__hooks-events {
		vertical-align: top;
		text-align: left;
		width: 40%;

		span {
			display: block;
		}
	}

	td.ppcp-r-table__hooks-url, td.ppcp-r-table__hooks-events {
		padding-top: 12px;
		color: $color-gray-800;
		@include font(14, 20, 400);

		span {
			color: inherit;
			@include font(14, 20, 400);
		}
	}

	th.ppcp-r-table__hooks-url, th.ppcp-r-table__hooks-events {
		@include font(14, 20, 700);
		color: $color-gray-800;
		border-bottom: 1px solid $color-gray-600;
		padding-bottom: 4px;
	}
}