// Global settings styles
.ppcp-r-settings {
	@include vertical-layout-event-gap(48px);
}


.ppcp-r-settings-card__content {
	> .ppcp-r-settings-block {
		&:not(:last-child) {
			border-bottom: 1.5px solid $color-gray-700;
		}
	}
}

.ppcp-r-settings-block {
	.ppcp-r-settings-block__header {
		display: flex;
		gap: 48px;

		&-inner {
			display: flex;
			flex-direction: column;
			gap: 4px;
		}
	}

	&__action {
		margin-left: auto;
	}

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

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

	&--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);
			}
		}
	}

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

		a {
			color: $color-blueberry;
		}

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

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

		.ppcp-r-settings-block__header {
			user-select: none;

			&:hover {
				cursor: pointer;
			}
		}
	}

	&--sandbox-connected {
		.ppcp-r-settings-block__content {
			margin-top: 24px;
		}

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

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

	&--expert-rdb{
		@include vertical-layout-event-gap(24px);
	}
	&--connect-sandbox {
		button.components-button {
			@include small-button;
		}

		.ppcp-r__radio-content-additional {
			.ppcp-r-vertical-text-control {
				width: 100%;
			}

			@include vertical-layout-event-gap(24px);
			align-items: flex-start;

			input[type='text'] {
				width: 100%;
			}
		}
	}

	&--troubleshooting {
		> .ppcp-r-settings-block__content > *:not(:last-child) {
			padding-bottom: 32px;
			margin-bottom: 32px;
			border-bottom: 1px solid $color-gray-500;
		}
	}

	&--settings{
		> .ppcp-r-settings-block__content > *:not(:last-child){
			padding-bottom: 32px;
			margin-bottom: 32px;
			border-bottom: 1px solid $color-gray-500;
		}
	}

	// Fields
	input[type='text'] {
		border-color: $color-gray-700;
		width: 282px;
		max-width: 100%;
		color: $color-gray-800;
	}

	input[type='text'] {
		&::placeholder {
			color: $color-gray-700;
		}
	}

	.ppcp-r {
		&__radio-wrapper {
			align-items: flex-start;
			gap: 12px;
		}

		&__radio-content {
			display: flex;
			flex-direction: column;
			gap: 4px;

			label {
				font-weight: 600;
			}
		}

		&__radio-content-additional {
			padding-left: 32px;
		}
	}

	// MultiSelect control
	.ppcp-r {
		&__control {
			border-radius: 2px;
			border-color: $color-gray-700;
			width: 282px;
			min-height: auto;
			padding: 0;
		}

		&__input-container {
			padding: 0;
			margin: 0;
		}

		&__value-container {
			padding: 0 0 0 7px;
		}

		&__indicator {
			padding: 5px;
		}

		&__indicator-separator {
			display: none;
		}

		&__value-container--has-value {
			.ppcp-r__single-value {
				color: $color-gray-800;
			}
		}

		&__placeholde, &__single-value {
			@include font(13, 20, 400);
		}

		&__option {
			&--is-selected {
				background-color: $color-gray-200;
			}
		}
	}
}

// Special settings styles

// Hooks table
.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;
	}
}

// Common settings have 48px margin&padding bottom between blocks
.ppcp-r-settings-card--common-settings .ppcp-r-settings-card__content {
	> .ppcp-r-settings-block {
		&:not(:last-child) {
			padding-bottom: 48px;
			margin-bottom: 48px;
		}
	}
}

// Expert settings have 32px margin&padding bottom between blocks
.ppcp-r-settings-card--expert-settings .ppcp-r-settings-card__content {
	> .ppcp-r-settings-block {
		&:not(:last-child) {
			padding-bottom: 32px;
			margin-bottom: 32px;
		}
	}
}


// Order intent block has 32px gap and no lines in between
// Save payment methods block has 32px gap and no lines in between
.ppcp-r-settings-block {
	&--order-intent, &--save-payment-methods {
		@include vertical-layout-event-gap(32px);

		> .ppcp-r-settings-block__content {
			@include vertical-layout-event-gap(32px);
		}
	}
}


// Most primary settings block in the expert settings have 32px space after description
.ppcp-r-settings-block--toggle-content {
	.ppcp-r-settings-block__content {
		margin-top: 32px;
	}
}

// Common settings have actions aligned top with the text, Expert settings have actions alligned middle with the text
.ppcp-r-settings-card--expert-settings {
	.ppcp-r-settings-block__header {
		align-items: center;
	}
}