$input-bg-static: #ddd
$input-bg-pseudo-active: #43A047
$input-bg-pseudo-static: #E53935
$input-bg-light-active: #FFFF00

// adjust only this number for dimensions
$input-width: 50px

$input-radius: $input-width / 2
$input-height: $input-width / 2
$input-light-dims: $input-height / 2.5


.cbbb-cookie-check
	position: fixed
	left: 0
	bottom: 0
	opacity: 1
	width: 100vw
	min-width: 100%
	background: white
	padding: 30px
	z-index: 99999999999999
	display: flex
	flex-flow: wrap
	box-sizing: border-box
	transition: all 0.3s linear
	border-top: 1px solid #ccc
	pointer-events: all

	&.closed
		transform: translateY(50px)
		opacity: 0
		pointer-events: none

	.box
		display: flex
		flex-flow: wrap
		align-content: flex-start
		flex: 0 0 100%

		.info

			header
				border-bottom: 1px solid #ccc
				margin-bottom: 20px
				padding-bottom: 20px

				h3
					margin: 0 0 2rem 0
					font-size: 200%

				p
					font-size: 75%
					margin-bottom: 0

		.actions
			display: flex
			flex-flow: wrap
			justify-content: space-between
			flex: 0 0 100%
			align-items: center

			a
				text-decoration: none
				font-size: 75%
				font-weight: bold
				color: black

			button
				line-height: 1
				padding: 10px 20px 10px 20px
				font-size: 1.6rem
				margin-top: 30px
				outline: 0

				@media (min-width:768px)
					margin-top: 0

			button.outline
				background: transparent
				color: inherit
				border: 0


.cbbb-cookie-wrap
	background: #f9f9f9
	padding: 30px
	box-sizing: border-box

	@media (min-width:768px )
		padding: 30px

	.cbbb-cookie-box

		.cbbb-cookie-info
			margin-bottom: 30px
			padding-bottom: 30px
			border-bottom: 1px solid #ccc

			.cbbb-cookie-title
				display: flex
				flex-flow: wrap

				h3
					margin: 0 0 10px

				p
					margin-bottom: 0

		.cbbb-cookie-options

			.cbbb-cookie-header
				margin-bottom: 60px
				display: flex
				flex-flow: wrap row

				.cbbb-cookie-header-title
					box-sizing: border-box

					@media (min-width:768px )
						flex: 0 0 80%
						padding-right: 60px

					h3
						margin: 0 0 10px

					p
						margin: 0 0 20px



			.cbbb-cookie-necessary
				display: flex
				flex-flow: wrap row
				margin-bottom: 30px
				padding-bottom: 30px
				border-bottom: 1px solid #ccc

				.cbbb-cookie-header-title
					box-sizing: border-box

					@media (min-width:768px )
						flex: 0 0 80%
						padding-right: 60px

					h3
						margin: 0 0 10px

					p
						margin: 0 0 20px


			.cbbb-cookie-controls

				.cbbb-cookie-control
					display: flex
					flex-flow: wrap row
					margin-bottom: 30px
					padding-bottom: 30px
					border-bottom: 1px solid #ccc

					&:last-of-type
						margin-bottom: 0
						padding-bottom: 0
						border-bottom: 0

					.cbbb-cookie-control-title
						box-sizing: border-box

						@media (min-width:768px )
							flex: 0 0 80%
							padding-right: 60px

						h3
							margin: 0 0 10px

						p
							margin-bottom: 0

					.cbbb-cookie-control-toggle
						margin-top: 30px

						@media (min-width:768px )
							margin-top: 0
							flex: 0 0 20%

						.cbbb-cookie-checkbox
							position: relative
							-webkit-appearance: none
							-moz-appearance: none
							appearance: none
							width: $input-width
							height: $input-height
							background-color: $input-bg-static
							border-radius: $input-radius
							// bad accessibility
							outline: none
							transition: background 450ms ease
							box-shadow: 0 0 0 3px darken($input-bg-static, 7.5%)

							&:before, &:after
								position: absolute
								display: block
								content: ""
								border-radius: 100%
								transition: background 450ms ease, transform 450ms ease


							&:before
								width: $input-width / 2
								height: $input-height
								background-color: $input-bg-pseudo-static


							// active state
							&:checked

								&:before
									background-color: $input-bg-pseudo-active
									transform: translateX(100%)

				.cbbb-cookie-save
					display: flex
					flex-flow: wrap row