:root {
	--flag-width: 40px;
}

body {
	background-color: var(--background-color);
	color: var(--text-color);

	#profileHeader,
	.nav-pills .nav-link.active {
		background-color: var(--background-color);
		color: var(--text-color);
	}

	.card {
		background-color: var(--secondary-background-color);
	}

	a {
		color: var(--text-link-color);
		&:hover {
			transition: var(--transition);
			color: color-mix(
				in lab,
				var(--text-link-color),
				var(--primary-color) 20%
			);
		}
	}

	.nav-link {
		transition: none;
	}
}

.light > #footer-socialNetworks-github-svg-path {
	fill: none;
}

.dark #footer-socialNetworks-github-svg-path {
	fill: #ffffff;
}

.text-secondary {
	color: var(--text-secondary-color);
}

#theme-toggle:focus {
	outline: 0;
}

#theme-toggle svg {
	height: 18px;
}

button#theme-toggle {
	border: none;
	font-size: 26px;
	margin: auto 4px;
}

body.dark #moon {
	vertical-align: middle;
	display: none;
}

body:not(.dark) #sun {
	display: none;
}

#sun {
	width: 24px;
	height: 24px;
	stroke: currentColor;
}

.navbar-nav {
	display: flex;
	place-items: center;
	place-content: center;
}

.navbar-nav .nav-item.site-settings {
	padding-top: 0;
	padding-bottom: 0;
	display: flex;
	flex-direction: row;
	place-items: center;
	place-content: center;

	&.translation {
		.nav-link {
			height: 100%;
			display: flex;
			place-items: center;
			place-content: center;
		}
	}

	#theme-toggle {
		height: 100%;
		display: flex;
		place-items: center;
		place-content: center;
		margin: auto;
	}

	& .lang-selector {
		padding-left: 0;
		padding-right: 0;
		list-style-type: none;
		margin-left: 8px;
		display: flex;

		a:has(.selected-lang) {
			pointer-events: none;
			cursor: default;
		}
	}
}

.translations-list {
	display: block;
	list-style-type: none;
	/*
		set the height to the taller of all flags we use to prevent page from shifting
		vertically; math is `display_width * h / w` per flag. max value is max inverse
		aspect ratio (h/w) among all flags
	*/
	height: calc(var(--flag-width) * max(650 / 1300, 500 / 750));
}

.flag-icon {
	max-width: var(--flag-width);
	margin: auto 12px auto 0;

	&.selected-lang {
		opacity: 20%;
	}
}

#contact-form,
#formulario-contacto {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	display: grid;
	grid-template-columns: min-content 1fr;
	place-items: stretch;
	place-content: center;
	row-gap: 3px;
	column-gap: 12px;

	label {
		text-align: end;
	}

	.btn-send {
		justify-self: end;
		grid-column: 1 / 3;
	}
}

body {
	.contact-form-status,
	.formulario-contacto-status,
	.contact-form-in-progress,
	.formulario-contacto-en-curso,
	.contact-form-success,
	.formulario-contacto-exito,
	.contact-form-failure,
	.formulario-contacto-falla {
		display: none;
	}

	.contact-form-status,
	.formulario-contacto-status {
		margin-bottom: 1em;
	}

	&:is(.contact-form-submitted, .formulario-contacto-enviado) {
		.contact-form-status,
		.formulario-contacto-status {
			display: block;
		}

		&:is(.contact-form-in-progress, .formulario-contacto-en-curso)
			:is(.contact-form-in-progress, .formulario-contacto-en-curso) {
			display: block;
		}

		&:is(.contact-form-success, .formulario-contacto-exito)
			:is(.contact-form-success, .formulario-contacto-exito) {
			display: block;
		}

		&:is(.contact-form-failure, .formulario-contacto-falla)
			:is(.contact-form-failure, .formulario-contacto-falla) {
			display: block;
			color: var(--text-error-color);
		}
	}
}