$color_gray: #333;
$color_light_gray: #ccc;
$color_white: #fff;

@import 'shortcode';

#gdpr-visitor-consent-form {
	color: $color_gray;
	display: none;

	h3,
	label {
		color: $color_gray;
	}

	.overlay {
		background-color: rgba(0,0,0,0.6);
		height: 100vh;
		left: 0;
		position: fixed;
		top: 0;
		width: 100vw;
		z-index: 10000;
	}

	.form {
		@import 'toggle';

		background-color: $color_white;
		border: 4px solid $color_gray;
		border-radius: 8px;
		left: 50%;
		max-height: 90vh;
		max-width: 90vw;
		overflow-y: scroll;
		padding: 20px;
		position: fixed;
		top: 5vh;
		transform: translateX(-50%);
		width: 600px;
		z-index: 100000;

		h3 {
			margin-bottom: 20px;
			text-align: center;
		}

		button.close {
			background-color: transparent;
			border: none;
			box-shadow: none;
			height: 30px;
			margin: 0;
			opacity: 1;
			padding: 0;
			position: absolute;
			right: 12px;
			top: 12px;
			width: 30px;

			&:active,
			&:focus,
			&:hover {
				background-color: transparent;
				border: none;
				box-shadow: none;
				opacity: 0.9;
			}

			svg {
				fill: $color_gray;
				height: 30px;
				width: 30px;
			}
		}

		.group {
			margin-bottom: 60px;

			> label {
				font-size: 14px;
				font-weight: bold;
			}

			button.details-toggle {
				background-color: transparent;
				border: none;
				color: $color_gray;
				float: right;
				font-size: 12px;
				margin: 0;
				padding: 0;

				&:active,
				&:focus,
				&:hover {
					background-color: transparent;
					border: none;
					color: $color_gray;
				}

				span,
				svg {
					float: left;
				}

				span {
					display: block;
					line-height: 20px;
				}

				svg {
					fill: $color_gray;
					height: 20px;
					width: 20px;

					&.rotated {
						transform: rotate(180deg);
					}
				}
			}

			p.description {
				font-size: 12px;
				margin: 10px 0;
			}

			@import 'rules';
		}

		.button-wrapper {
			margin: 40px 0 20px;
			text-align: center;
		}
	}
}