Snapshots

.snapshots {
	$tab-color: #E2E7EB;
	$tab-color-inactive: #CCCDEE;

	position: absolute;
	top: 0;
	left: 0;

	display: flex;
	justify-content: flex-end;
	width: 100%;
	border-top: 3px solid $tab-color;

	&.-inactive {
		border-top: 3px solid $tab-color-inactive;

		.snapshots-tab {
			background: $tab-color-inactive;

			&::before {
				background: $tab-color-inactive;
			}
		}

		.btn-snapshot-new {
			opacity: 0.5;

			pointer-events: none;
		}
	}
	
	.snapshots-tab {
		position: relative;
		z-index: 1;

		display: flex;
		align-items: center;
		height: 13rem;
		min-width: 40rem;
		padding: 0 4rem;

		background: $tab-color;

		&::before {
			content: '';

			position: absolute;
			left: 0;
			z-index: -1;
			transform: skewX(35deg);
			transform-origin: left bottom;

			display: block;
			width: 20rem;
			height: 100%;

			background: $tab-color;
		}
	}

	.btn-snapshot-new {
		margin-left: 5rem;

		&::before {
			content: '\f030';

			position: absolute;
			left: -5rem;
			top: 50%;
			transform: translateY(-55%);

			@include font-icon;
			font-weight: normal;
		}
	}

	.snapshot-nav {
		margin-left: 2.5rem;

		.text {
			opacity: 0.66;
		}

		& > * {
			margin-left: 1.5rem !important;
		}
	}

	.btn-snapshot {
		display: inline-block;
		width: 7.5rem;
		height: 7.5rem;

		border: 1px solid rgba($color-irma-slate, 0.33);
		border-radius: 50%;
		color: $color-irma-slate;

		text-align: center;
		text-decoration: none;

		&.-disabled {
			opacity: 0.25;

			pointer-events: none;
		}

		&::after {
			display: block;

			@include font-icon;
			@include font-size-other(14px);
			line-height: 7.5rem;
		}
	}

	.btn-snapshot-first {
		&::after {
			content: '\f053\f053';

			transform: translateX(-0.15em);

			letter-spacing: -0.5rem;
		}
	}

	.btn-snapshot-prev {
		&::after {
			content: '\f053';

			transform: translateX(-0.1em);
		}
	}

	.btn-snapshot-next {
		&::after {
			content: '\f054';

			transform: translateX(0.1em);
		}
	}
}