/* Importing FandomIcons, by [[User:Owlnai]] */
@import "/load.php?mode=articles&articles=u:dev:MediaWiki:FandomIcons.css&only=styles";

/* Override hardcoded inline styles */
.skin-fandomdesktop .LightboxModal {
	height:75vh !important;
}
/* Wrapper styling */
.modalWrapper {
	border:none;
	background:transparent;
	border-radius:15px;
}
/* Wrapper in wrapper styling, gridding */
.LightboxModal .WikiaLightbox {
	background: var(--theme-page-background-color);
	display:grid;
	grid-template-columns: 2.5fr 1fr;
	grid-template-rows:1fr auto;
	grid-template-areas:"media siderail" "carousel siderail";
	position:relative;
}
/* The image container */
.LightboxModal .media {
	max-height: 100% !important;
	padding:5px 0;
	display:flex;
	align-items:center;
	margin:auto;
	grid-area:media;
}
	/* why? */
.LightboxModal.pinned-mode .media {
	margin:0;
}
.LightboxModal .media img {
	width:100%;
	height:100%;
	object-fit: contain;
	object-position: center;
}
/* The box with the info, at the right */
.LightboxModal .LightboxHeader {
	grid-area:siderail;
	position:initial;
	width:auto;
	opacity:1 !important;
	display:grid;
	background:var(--theme-page-background-color--secondary)!important;
	grid-template-columns:1fr 1fr auto;
	grid-template-rows: repeat(4, auto);
	grid-template-areas:
		"share button close"
		"name name name"
		"link link link"
		"info info info";
	align-content: start;
	column-gap:1ch;
	row-gap:1.2rem;
	border:none!important;
	box-shadow: none!important;
	padding:1.5rem;
	height:100%;
}
/* stuff inside the right box */
.LightboxModal .LightboxHeader .more-info-button span {
	white-space: nowrap;
}
.LightboxModal .LightboxHeader .more-info-button{
	grid-area:button;
}
.LightboxModal .LightboxHeader .share-button{
	grid-area:share;
}
.LightboxModal .LightboxHeader .close {
	grid-area:close;
}
.LightboxModal .LightboxHeader h1 {
	grid-area:name;
}
.LightboxModal .see-full-size-link {
	grid-area:link;
	border:0;
	margin:0;
	padding:0;
}
.LightboxModal .see-full-size-link::after {
	content:"external";
	font-family:"FANDOM-Icons";
	font-size:0.9em;
	margin-left:.5ch;
}
.LightboxModal .LightboxHeader .user-details {
	grid-area:info;
	white-space: unset!important;
}
.LightboxModal .LightboxHeader .close svg {
	transition:fill .2s
}
.LightboxModal .LightboxHeader .close:hover svg {
	fill:var(--theme-link-color);
}
/* Pics carousel at the bottom */
.LightboxModal .LightboxCarousel {
	opacity:1 !important;
	position:initial;
	grid-area:carousel;
	align-self:end;
	box-shadow: none;
}
.LightboxModal .LightboxCarousel .LightboxCarouselContainer {
	margin:0 20px;
}
.LightboxModal .LightboxCarousel .LightboxCarouselContainer li {
	border:none;
	background:rgb(var(--theme-border-color--rgb), 0.2);
}
	/* Useless piece of junk */
.LightboxModal .toolbar {
	display:none;
}
/* Arrows, at the top */
.LightboxModal .lightbox-arrows {
	opacity: 1 !important;
	position:absolute;
	left: 20px;
	top:50px;
	display:flex;
	flex-direction:row-reverse;
	align-items:center;
	gap:10px;
}
.LightboxModal .lightbox-arrows .arrow--dark-theme.disabled:hover {
	background-color: #000;
}

.LightboxModal .lightbox-arrows .arrow--light-theme.disabled:hover {
	background-color: #fff;
}
.LightboxModal .lightbox-arrows .arrow svg {
	width: 15px !important;
	height: 15px !important
}
	/* Un-absolute-positioning arrows */
.LightboxModal .lightbox-arrows .arrow {
	position: unset;
	width: 32px;
	height: 32px;
	opacity: 1 !important;
}
	/* STOP HIDING MY ARROWS PLS */
.LightboxModal .lightbox-arrows .arrow.disabled {
	opacity: 0.2 !important;
	display: flex !important;
	cursor:default;
}
/* Share screen */
@media screen and (min-width:900px) {
	/* Un-hiding elements (except siderail) */
	.LightboxModal.share-mode .LightboxCarousel, 
	.LightboxModal.share-mode .media {
		display:block;
	}
	.LightboxModal.share-mode .lightbox-arrows {
		display:flex;
	}
		/* Positioning share screen */
	.LightboxModal.more-info-mode .more-info, .LightboxModal.share-mode .share {
		grid-area:siderail;
	}
}
.LightboxModal.more-info-mode .more-info, .LightboxModal.share-mode .share {
	background:var(--theme-page-background-color--secondary);
	padding:1.5rem;
}
	/* Width: auto */
.LightboxModal .share .content :is(
	.share-form,
	.bottom-forms>div:first-child,
	.bottom-forms,
	.bottom-forms .wds-textarea
) {
	width:auto;
	margin:0;
	padding:0;
}
	/* Hiding useless junk */
.LightboxModal .more-info .hero, 
.LightboxModal .share .hero,
#shareEmailForm,
.share-form .wds-textarea:not(:last-of-type) {
	display:none;
}
	/* Buttons */
.LightboxModal .more-info .close, .LightboxModal .share .close, .LightboxModal .LightboxHeader .close {
	padding:0;
	place-self:start;
	margin:.5ch 0 0 1ch;
}
	/* Social media icons */
.share-form .social-links {
	margin:1rem 0;
}
.LightboxModal .share .content .social-links ul {
	display:flex;
	gap:1ch;
}
.LightboxModal .more-info .content .social-links li, .LightboxModal .share .content .social-links li {
	float:none; /* WHAT THE HELL WHO IS STILL USING FLOATS AND CLEARFIXES IN 2023 */
	margin:0;
}
	/* Textarea with link */
.LightboxModal .share .content .bottom-forms>div textarea {
	line-height: 1.5;
	margin-top:.5rem;
}
.LightboxModal .share .content .bottom-forms>div textarea:focus {
	border-bottom:1px solid var(--theme-page-text-color)
}
#LightboxModal .share .bottom-forms .wds-textarea {
	margin:0;
}
/* Responsiveness */
@media screen and (max-width:900px) {
	.skin-fandomdesktop .LightboxModal {
		height:90vh !important;
		width:90vw !important;
		margin:auto;
	}
	.LightboxModal .WikiaLightbox {
		grid-template-columns: 1fr;
		grid-template-rows:auto 1fr auto;
		grid-template-areas:
			"siderail"
			"media"
			"carousel";
	}
	.LightboxModal .LightboxHeader {
		grid-template-columns:1fr repeat(3, auto);
		grid-template-rows:repeat(3, auto);
		grid-template-areas:
			"name share button close"
			"link link link link"
			"info info info info";
		gap:2px 0;
	}
	.LightboxModal .LightboxHeader .user-details {
		margin:0;
	}
	.LightboxModal .LightboxHeader .wds-button span {
		display:none;
	}
	.LightboxModal .LightboxHeader .close {
		margin-left:6px;;
		padding:0;
	}
	.LightboxModal .LightboxHeader .share-button, .LightboxModal .LightboxHeader .more-info-button, .LightboxModal .LightboxHeader .see-full-size-link, .LightboxModal .LightboxHeader .user-details {
		display:initial;
	}
	.LightboxModal .media {
		max-width:90vw;
		max-height:90vh !important;
	}
	/* Unhiding arrows for smaller viewports */
	.LightboxModal .lightbox-arrows {
		position:initial;
	}
	.LightboxModal .lightbox-arrows .arrow {
		position:absolute;
		top:50%;
		opacity:1 !important;
	}
	.LightboxModal .lightbox-arrows .arrow.disabled {
		display: none !important;
	}
	.LightboxModal .lightbox-arrows .next {
		right: 16px
	}
	.LightboxModal .lightbox-arrows .previous {
		left: 16px
	}
	/* Repositioning share screen */
	.LightboxModal.more-info-mode .more-info, .LightboxModal.share-mode .share {
		grid-area:1/1/-1/-1;
	}
}