/* Luanti cloud-save status and dialog UI. */

#tuuchen-save-status {
	position: fixed;
	z-index: 2147483645;
	right: 14px;
	top: 14px;
	padding: 9px 13px;
	border: 1px solid rgb(126 231 167 / 30%);
	border-radius: 10px;
	background: rgb(6 20 14 / 94%);
	color: #eafff2;
	font:
		600 12px/1.35 system-ui,
		sans-serif;
	box-shadow: 0 8px 30px rgb(0 0 0 / 30%);

	&[data-state="saved"] {
		color: #7ee7a7;
	}

	&[data-state="saving"] {
		color: #fff3a3;
	}

	&[data-state="local"] {
		color: #b8d9c5;
	}

	&[data-state="quota"] {
		color: #ffd27a;
	}

	&[data-state="error"],
	&[data-state="conflict"] {
		color: #ff9d93;
	}
}

.tuuchen-save-modal {
	position: fixed;
	z-index: 2147483647;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgb(1 8 5 / 82%);
	font-family: system-ui, sans-serif;

	& .tuuchen-save-card {
		position: relative;
		width: min(430px, 100%);
		padding: 25px;
		border: 1px solid #315f48;
		border-radius: 16px;
		background: #0c2017;
		color: #ecfff3;
		box-shadow: 0 24px 80px #000;

		h2 {
			margin: 0 38px 10px 0;
			font-size: 22px;
		}

		p {
			color: #b8d9c5;
			line-height: 1.5;
		}

		input {
			box-sizing: border-box;
			width: 100%;
			padding: 12px;
			border: 1px solid #47775e;
			border-radius: 9px;
			background: #07150f;
			color: white;
			font: inherit;
		}

		button {
			padding: 11px 15px;
			border: 0;
			border-radius: 9px;
			background: #68dfa0;
			color: #062012;
			font-weight: 800;
			cursor: pointer;

			&.secondary {
				background: #203d30;
				color: #dffff0;
			}

			&.tuuchen-save-close {
				position: absolute;
				top: 14px;
				right: 14px;
				width: 34px;
				height: 34px;
				padding: 0;
				background: transparent;
				color: #b8d9c5;
				font-size: 24px;
				line-height: 1;

				&:hover {
					background: #203d30;
					color: #fff;
				}
			}
		}
	}
}

.tuuchen-save-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.tuuchen-save-error {
	color: #ffaaa2 !important;
}