@import 'atlas-variables';

$footerBackgroundColor: $secondary-d2;
$fullscreenBackgroundColor: $dark;
$infoPanelSidebarDDColor: $secondary-l1;

.item-selector-preview {
	&.fullscreen {
		background-color: $fullscreenBackgroundColor;
		height: 100%;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 1;
	}

	.header > nav {
		padding: 0.5rem 0;

		strong {
			font-size: 1rem;
		}
	}

	.carousel {
		height: calc(100% - 6.5rem);
		padding: 3.5rem;
		text-align: center;

		@media (max-width: 768px) {
			padding: 1rem;
		}

		.sidenav-content {
			height: 100%;
			position: relative;

			.pull-left,
			.pull-right {
				position: absolute;
				top: calc(50% - 2rem);
			}

			.pull-left {
				left: 0;
			}

			.pull-right {
				right: 0;
			}
		}

		img {
			max-height: 100%;
			max-width: 100%;
		}

		.icon-arrow {
			font-size: 2rem;
			position: relative;
			z-index: 20;

			&:active,
			&:hover,
			&:focus {
				color: $white;
			}
		}

		.info-panel {
			color: $white;
			height: calc(100% - 7rem);
			text-align: left;

			.sidebar-header,
			.sidebar-body {
				min-width: $sidenav-width;
			}

			.nav-link.active {
				color: $white;
			}

			.sidebar-dd {
				color: $infoPanelSidebarDDColor;
			}
		}

		&:not(.open) img {
			left: 0;
			margin: 0 auto;
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	.footer {
		background-color: $footerBackgroundColor;
		bottom: 0;
		color: $white;
		padding: 0.75rem 1.5rem;
		position: fixed;
		text-align: center;
		width: 100%;

		> div {
			float: right;
		}
	}
}
