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

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

			.logo {
				background: rgba(255, 255, 255, .4);
				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: rgba(255, 255, 255, .4);
			border-radius: 0 0 3px 3px;
			font-size: 0.7em;
			padding: 0.3rem;
			text-align: center;
			color: #888;

			a {
				color: #777;
				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: .3rem;
							@extend .clickable;
							@include common.no-text-overflow();
						}

						.download {
							color: color.$legend;
	
							&:hover {
								color: #0078A8;
							}
						}
					}
				}

				&.newsletter {
					input#email {
						width: calc(100% - 6em);

						&:disabled {
							color: #999;
							background: rgba(255,255,255,0.2);
						}
					}
					button#nl_btn {
						margin-left: 1em;
						margin-bottom: 1em;

						&.subscribe .fa {
							@extend .fa-send;
						}
						&.unsubscribe .fa {
							@extend .fa-unsubscribe;
						}
						&.loading {
							background-color: color.$message;
							color: white;
							span {
								@extend .flicker;
							}
						}
					}
				}
			}
		}
	}
}