@import "includes/vars";

.maps {
	.rd__wrp-map {
		max-width: initial;
		margin: 0;
	}

	&__ {
		&disp-message-initial {
			background: $rgb-bg;
			border: 1px solid $rgb-border-grey--trans;
			border-radius: 5px;
		}
	}

	&-menu {
		background: $rgb-bg;
		font-size: 1.12rem;
		border-top: 1px solid $rgb-border-grey;
		width: 235px;

		@media only screen and (max-width: $width-screen-sm) {
			max-height: 600px;
		}

		&__ {
			&btn-chapter-scroll {
				width: 20px;
				opacity: 0;
				margin: -2px 3px;
			}

			&label-cb {
				border-bottom: 1px solid $rgb-border-grey;

				&:hover {
					background-color: $rgb-bg--alt;

					.maps-menu__btn-chapter-scroll {
						opacity: 1;
					}
				}
			}
		}
	}

	&-gallery {
		&__wrp-chapter {
			border: 1px solid $rgb-border-grey--trans;
			border-radius: 5px;
		}
	}
}

.night-mode .maps {
	&__ {
		&disp-message-initial {
			background: $rgb-bg--night;
			border-color: $rgb-border-grey--trans-night;
		}
	}

	&-menu {
		background: $rgb-bg--night;
		border-top-color: $rgb-border-grey--trans-night;

		&__label-cb {
			border-bottom-color: $rgb-border-grey--night;

			&:hover {
				background-color: $rgb-bg--alt-night;
			}
		}
	}

	&-gallery {
		&__wrp-chapter {
			background: $rgb-bg--night;
			border-color: $rgb-border-grey--trans-night;
		}
	}
}