@import '../../style/variables.less';

.banner {
	position: fixed;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 99999;

	color: @color-textLight;
	background: white;
	font-size: 16px;
	max-height: 100%;
	transition: bottom 0.5s ease-in-out, opacity 0.5s linear;

	box-shadow: 0px 0px 5px @color-primary;
	padding: 15px 30px;

	@media @smartphone {
		margin-top: -80px;
		padding: 15px 20px;
		overflow: auto;
	}

	&.hidden {
		pointer-events: none;
		bottom: -250px;
		opacity: 0;
	}

	.content {
		.message {
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			.info {
				flex: 1;
				line-height: 16px;

				@media @smartphone {
					font-size: 12px;
				}

				.title {
					font-size: 22px;
					color: @color-text;
					padding: 15px 0;

					@media @smartphone {
						font-size: 16px;
						padding: 5px 0 10px 0;
					}
				}

				.options {
					margin-top: 15px;

					.option {
						margin-bottom: 6px;
						margin-left: -2px;

						@media @smartphone {
							margin-bottom: 4px;
						}

						.detailExpand {
							color: @color-secondary;
						}

						a {
							svg {
								vertical-align: middle;
								margin-right: 5px;
								position: relative;
								top: -1px;
								transform: rotate(-90deg);
								transition: 0.5s ease;
								fill: @color-linkColor;
							}
						}

						.optionDetails {
							max-height: 0;
							overflow: hidden;
							transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);

							ul {
								margin-top: 5px;
								margin-bottom: 0;
								padding-left: 20px;
							}
						}

						&.expanded {
							a {
								svg {
									transform: rotate(0deg);
								}
							}

							.optionDetails {
								margin-left: 21px;
								max-height: 600px;
								transition: max-height 1s ease-in-out;
							}
						}
					}
				}
			}

			.consent {
				display: flex;
				justify-content: flex-end;

				width: 100%;
				margin-top: 20px;

				@media @smartphone {
					display: block;
					font-size: 14px;
				}

				a {
					display: inline-block;

					padding: 8px 60px;

					border: 1px solid @color-primary;
					border-radius: 99px;

					text-align: center;

					@media @smartphone {
						display: block;
						margin: 0;
						font-size: 14px;
					}

					&.learnMore {
						color: @color-primary;
					}

					&.continue {
						margin-left: 10px;
						background: @color-primary;
						color: #fff;

						@media @smartphone {
							margin-top: 10px;
							margin-left: 0;
						}
					}
				}
			}
		}
	}

	.infoExpanded {
		padding: 0 0 30px 0;
		min-height: 200px;

		ul {
			margin: 0;
			padding: 0 0 0 20px;
			list-style-type: square;
		}
	}
}