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

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

		.settings-box {
			background: color.$default-bg;
			border-radius: var.$block-radius;
			box-shadow: 2px 2px var.$block-shadow 0px color.$over-img-shadow;
		}

		.settings-header {
			text-align: center;

			.logo {
				display: block;
				border-radius: var.$block-radius;
				background: color.$default-bg-light;
				padding: var.$block-spacing;

				&:has(+ .last_update) {
					padding: 2 * var.$block-spacing;
				}
				
				img {
					width: 65%;
				}
			}

			.last_update {
				position: absolute;
				margin-top: -2 * var.$block-spacing;
				line-height: 2 * var.$block-spacing;
				padding: 0 var.$block-spacing;
				width: calc(100% - 2 * var.$block-spacing);

				p {
					font-size: 0.8em;
					margin: 0;
					color: color.$subtitle;

					span {
						margin-right: var.$elem-spacing;
						img {
							width: 12px;
							vertical-align: center;
							animation: spotlogo 20s infinite;
						}
					}

					abbr {
						text-decoration: none;
						vertical-align: center;
					}
				}
			}
		}

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

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

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

		.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;
					border-radius: var.$block-radius var.$block-radius 0 0;
					color: color.$title;
					font-size: 1.75em;
					background: color.$default-bg-light;
				}

				.settings-section-body {
					padding: var.$block-spacing;

					.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.$message;
								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;
						}
					}
				}
			}
		}
	}
}