woocommerce-paypal-payments/modules/ppcp-settings/resources/css/components/reusable-components/_fields.scss

.ppcp-r__radio-value {
	@include hide-input-field;

	&:checked + .ppcp-r__radio-presentation {
		position: relative;

		&::before {
			content: '';
			width: 12px;
			height: 12px;
			border-radius: 12px;
			background-color: $color-blueberry;
			display: block;
			position: absolute;
			transform: translate(-50%, -50%);
			left: 50%;
			top: 50%;
		}
	}
}

.ppcp-r__radio-presentation {
	@include fake-input-field(20px);
}

.ppcp-r__checkbox-presentation {
	@include fake-input-field(2px);
}

.ppcp-r__radio-wrapper {
	display: flex;
	gap: 18px;
	align-items: center;
	position: relative;

	label {
		@include font(13, 20, 400);
		color: $color-gray-800;
	}
}

.ppcp-r__radio-description {
	@include font(13, 20, 400);
	margin: 0;
	color: $color-gray-800;
}

.ppcp-r__radio-content-additional {
	padding-left: 38px;
	padding-top: 18px;
}


.ppcp-r-app {
	@include disabled-state('base');
	@include disabled-state('checkbox');

	.components-base-control__label {
		@include font(13, 16, 600);
		color: $color-gray-900;
		text-transform: none;
	}

	.components-base-control__input {
		border: 1px solid $color-gray-700;
		border-radius: 2px;
		box-shadow: none;

		&:focus {
			border-color: $color-blueberry;
		}
	}

	.components-base-control__help {
		margin-bottom: 0;
	}

	// Text input fields.
	input[type='text'] {
		@include font(14, 20, 400);
		@include primaryFont;
		padding: 7px 11px;
		border-radius: 2px;
	}

	// Select lists.
	select {
		@include font(14, 20, 400);
		padding: 7px 27px 7px 11px;
	}

	// Checkboxes.
	.components-checkbox-control {
		position: relative;

		input {
			margin: 0;
			border-color: $color-gray-600;

			&:checked {
				background-color: $color-blueberry;
				border-color: $color-blueberry;
			}
		}

		.components-checkbox-control__input-container {
			margin: 0;
		}

		.components-base-control__field {
			margin: 0;
		}
	}
	// Custom styles.
	.ppcp-r-vertical-text-control {
		.components-base-control__field {
			display: flex;
			flex-direction: column;
			gap: 0;
			margin: 0;
		}
	}
}

.ppcp-r-app, .ppcp-r-modal__container {
	// Form toggle styling.
	.components-form-toggle {
	  &.is-checked {
		> .components-form-toggle__track {
		  background-color: $color-blueberry;
		}
		.components-form-toggle__track {
		  border-color: $color-blueberry;
		}
	  }
	  .components-form-toggle__input {
		&:focus {
		  + .components-form-toggle__track {
			box-shadow: none;
		  }
		}
		&:focus-visible + .components-form-toggle__track {
		  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff,
					 0 0 0 calc(var(--wp-admin-border-width-focus)*2) $color-blueberry;
		}
	  }
	}

	// Form inputs.
	.components-text-control__input {
	  &:focus,
	  &[type="color"]:focus,
	  &[type="date"]:focus,
	  &[type="datetime-local"]:focus,
	  &[type="datetime"]:focus,
	  &[type="email"]:focus,
	  &[type="month"]:focus,
	  &[type="number"]:focus,
	  &[type="password"]:focus,
	  &[type="tel"]:focus,
	  &[type="text"]:focus,
	  &[type="time"]:focus,
	  &[type="url"]:focus,
	  &[type="week"]:focus {
		border-color: $color-blueberry;
	  }
	}

	// Radio inputs.
	.components-radio-control__input[type="radio"] {
	  &:checked {
		background-color: $color-blueberry;
		border-color: $color-blueberry;
	  }
	  &:focus {
		box-shadow: none;
	  }
	  &:focus-visible {
		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff,
				   0 0 0 calc(var(--wp-admin-border-width-focus)*2) $color-blueberry;
	  }
	}

	// Checkbox inputs.
	.components-checkbox-control__input[type="checkbox"] {
	  &:focus {
		box-shadow: none;
	  }
	  &:focus-visible {
		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff,
				   0 0 0 calc(var(--wp-admin-border-width-focus)*2) $color-blueberry;
	  }
	}
  }