@use "@styles/common";
@use "@styles/var";
@use "@styles/color";

#settings {
	#settings-panel {
		gap: var.$block-spacing;

		.settings-box {
			box-shadow: var.$map-shadow;
		}

		.settings-header {
			padding: 2 * var.$block-spacing;
			border-radius: var.$block-radius var.$block-radius;
			@include common.topo-bg(radial, circle farthest-side at 50% 50%, color.$default-bg-light, 40%);

			img {
				display: block;
				margin: 0 auto;
				object-fit: contain;

				&.logo-icon {
					width: 40%;
				}
				&.logo-title {
					width: 70%;
					margin-top: var.$block-spacing;
				}
			}

			.last_update {
				margin-top: var.$block-spacing - var.$elem-spacing; //Gap counts for 1 $elem-spacing
				font-size: 0.8em;
				color: color.$subtitle;

				.find-me-spot {
					color: color.$spot;
					animation: spin 20s infinite;
				}
			}
		}


		.settings-sections {
			flex: 1 1 auto;
			overflow: auto;
			border-radius: var.$block-radius;

			#settings-sections-scrollbox {
				height: 100%;
				width: 100%;
			}

			.settings-section {
				display: inline-block;
				width: 100%;

				& + .settings-section {
					margin-top: var.$block-spacing;
				}

				h1 {
					margin: 0;
					padding: var.$block-spacing;
					color: color.$title;
					font-size: 1.75em;
					border-radius: var.$block-radius var.$block-radius 0 0;
					@include common.topo-bg(linear, 0deg, color.$default-bg);
				}

				.settings-section-body {
					padding: var.$block-spacing;
					border-radius: 0 0 var.$block-radius var.$block-radius;
					background: color.$default-bg;

					.radio {
						&:not(:first-child) {
							margin-top: var.$elem-spacing;
						}

						label {
							margin-left: var.$text-spacing;
							@extend .clickable;
							@include common.no-text-overflow();

							&:hover {
								color: color.$default-hover;
							}
						}

						.download {
							color: color.$default;
	
							&:hover {
								color: color.$download-hover;
							}
						}
					}
				}

				&.newsletter {
					.newsletter-form {
						display: flex;
						align-items: stretch;
						gap: var.$block-spacing;
						margin-bottom: var.$block-spacing;

						input#email {
							flex: 1 1 auto;
							min-width: 0;

							&:disabled {
								color: color.$default-disabled;
								background: color.$default-bg-trans-disabled;
							}
						}

						button.manage {
							flex: 0 0 auto;

							&.loading {
								background-color: color.$main;
								color: color.$post-input-bg;

								.spot-icon {
									@extend .flicker;
								}
							}
						}
					}
				}

				&.admin {
					.admin-actions {
						display: flex;
						flex-wrap: wrap;
						gap: var.$block-spacing;

						a.button {
							flex: 0 0 auto;
							min-width: 0;
						}
					}
				}
			}
		}

		.settings-footer {
			flex: 0 1 auto;
			display: flex;
			justify-content: center;
			font-size: 0.7em;
			color: color.$default-inv;
			text-shadow: var.$elem-shadow;

			a {
				color: color.$default-inv;
				text-decoration: none;

				&:hover {
					color: color.$default-inv-hover;
				}
			}
		}
	}

	#title {
		left: calc(100% + var(--button-width) + 2 * var.$block-spacing);
		max-width: calc(100vw - var.$block-spacing - (var(--button-width) + 2 * var.$block-spacing) * 2);
		transition: max-width 0.5s;
		@include common.no-text-overflow();

		span {
			font-size: 1.3em;
			line-height: calc(var.$block-spacing / 1.3);
			vertical-align: center;
		}
	}

	#legend {
		.track {
			white-space: nowrap;
			.line {
				width: 2em;
				display: inline-block;
				border-radius: 2px;
				vertical-align: middle;
			}

			.desc {
				font-size: 1em;
				margin-left: 0.5em;
				color: color.$legend;
			}
		}
	}
}