.wp-block-give-donation-form {
	position: relative;

	.control-popup {
		display: flex;
		flex-flow: row wrap;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 9;
		background-color: rgba(0, 0, 0, 0.8);
		text-align: center;
		color: #fff;
		opacity: 0;
		transition: opacity 0.3s ease;
		overflow: hidden;

		&:hover {
			opacity: 1;
			transition: opacity 0.3s ease;

			.control-button > div {
				transform: translateY(0);
				opacity: 1;
				transition: transform 0.3s ease 0.15s, opacity 0.3s ease 0.15s;
				cursor: pointer;
			}

			.control-button.edit-form > div {
				transition: transform 0.3s ease 0.20s, opacity 0.3s ease 0.20s;
			}
		}

		& a {
			color: #fff;
			text-decoration: none;
			outline: 0;

			&:hover {
				color: #fff;
			}

			&:active {
				color: #fff;
			}

			&:focus {
				color: #fff;
			}
		}

		& > * {
			width: 50%;
			cursor: pointer;
		}

		.dashicons {
			margin-right: 5px;
		}

		.control-button {
			display: flex;
			flex-flow: row wrap;
			align-items: center;
			transition: background-color 0.3s ease;

			& > div {
				display: inline-block;
				width: 100%;
			    position: relative;
			    transform: translateY(-25px);
			    opacity: 0;
			    transition: transform 0.3s ease, opacity 0.3s ease;
			    font-size: 1.5rem;
			    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);

				& > * {
					vertical-align: middle;
				}
			}

			&:hover {
				transition: background-color 0.3s ease;
				background-color: rgba(0, 0, 0, 0.5);
			}
		}
	}

	.give-form-wrap {
		transition: transform 0.3s ease, opacity 0.3s ease;
	}

	&:hover .give-form-wrap {
		transition: transform 0.3s ease, opacity 0.3s ease;
		opacity: 0.3;
		transform: scale(0.9);
	}

	form[id*=give-form] #give-gateway-radio-list>li input[type=radio] {
		display: inline-block;
	}
}
