@use "common";
@use "var";
@use "color";

#settings {
	#settings-panel {
		.settings-header {
			text-align: center;
			flex: 0 1 auto;

			.logo {
				background: color.$default-bg;
				padding: 2rem 1rem;
				border-radius: var.$block-radius var.$block-radius 0 0;

				img {
					width: 100%;
					height: auto;
					max-width: 180px;
					transform: translateX(-10%); //Center Text, not logo. logo width (40px) / image width (200px) = 20%. And centering: 20% / 2 = 10%
				}
			}

			#last_update {
				position: absolute;
				margin-top: -2em;
				padding: 0 1rem;
				width: calc(100% - 2rem);

				p {
					text-align: center;
					font-size: 0.8em;
					margin: 0;
					color: color.$subtitle;
					transform: translateX(calc(-0.5 * (12px + 0.5em))); //icon width + margin right

					span {
						margin-right: 0.5em;
						img {
							width: 12px;
							vertical-align: middle;
							animation: spotlogo 20s infinite;
						}
					}

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

		.settings-footer {
			flex: 0 1 auto;
			background: color.$default-bg;
			border-radius: 0 0 3px 3px;
			font-size: 0.7em;
			padding: var.$text-spacing;
			text-align: center;
			color: color.$default;

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

		.settings-sections {
			flex: 1 1 auto;
			overflow: auto;

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

			.settings-section {
				display: inline-block;
				margin: 1.5rem 1rem 0 1rem;
				width: calc(100% - 2 * var.$block-spacing);

				&:last-child {
					margin-bottom: 1.5rem;
				}

				h1 {
					margin: 0 0 var.$block-spacing;
					color: color.$title;
					font-size: 1.5em;
				}

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

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

						.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#nl_btn {
							flex: 0 0 auto;

							&.loading {
								background-color: color.$message;
								color: color.$post-input-bg;
								span {
									@extend .flicker;
								}
							}
						}
					}
				}

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

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