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

.ppcp-r-select-box-wrapper {
	margin: 0 auto;
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
}

.ppcp-r-select-box {
	position: relative;
	width: 100%;
	border: 1px solid $color-gray-500;
	outline: 1px solid transparent;
	border-radius: 8px;
	display: flex;
	gap: 32px;
	align-items: center;
	box-sizing: border-box;
	padding: 28px 16px 28px 32px;


	&.selected {
		border-color: $color-blueberry;
		outline-color: $color-blueberry;
		box-shadow: $shadow-selection-box;
	}

	&__radio-value {
		@include hide-input-field;

		&:checked {
			+ .ppcp-r-select-box__radio-presentation {
				background: $color-white;
				width: 20px;
				height: 20px;
				border: 6px solid $color-blueberry;
			}
		}
	}

	&__checkbox-value {
		@include hide-input-field;

		&:not(:checked) + .ppcp-r-select-box__checkbox-presentation img {
			display: none;
		}

		&:checked {
			+ .ppcp-r-select-box__checkbox-presentation {
				width: 20px;
				height: 20px;
				border: none;

				img {
					border-radius: 2px;
				}
			}
		}
	}

	&__content {
		display: flex;
		gap: 18px;
	}

	&__title {
		@include font(16, 24, 600);
		color: $color-blueberry;
		margin: 0 0 4px 0;
		display: block;
	}

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

	&__radio-presentation {
		@include fake-input-field(20px);
	}

	&__checkbox-presentation {
		@include fake-input-field(2px);
	}
	&__additional-content{
		position: relative;
		z-index: 1;
	}

	@media screen and (max-width: 480px) {
		gap: 16px;
		padding: 18px 16px;
		&__description {
			margin: 0 0 8px 0;
		}
		&__content {
			gap: 12px;
		}
	}
	@media screen and (max-width: 380px) {
		&__content > img {
			max-width: 32px;
		}
	}
}