@use "vars/vars";
@use "vars/vars-night";

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

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

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

			@media screen and (width <= #{vars.$width-screen-sm}) {
				max-height: 600px;
			}

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

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

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

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

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

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

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

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

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

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