/* stylelint-disable no-descending-specificity */
@use "../common/mixins" as *;
@use "../common/variables" as *;

.urlslab-ImageCompare {


	@include posZero;
	position: fixed;
	background-color: $black-transparent;
	z-index: 100002;
	color: $white;

	&-top-control {
		display: flex;
		justify-content: space-between;
		padding: 0.6rem;
		width: 100%;
		height: 100px;

		&-screens {
			display: flex;
			justify-content: flex-start;

			&-item {
				cursor: pointer;
				max-width: 160px;
				height: 100%;
				padding: 0.5rem;
				border-radius: 10px;
				display: flex;
				justify-content: center;
				align-content: space-between;
				flex-direction: column;
				margin-right: 1rem;
				color: $white;

				div {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					font-size: 0.8rem;

					svg {

						@include square(1.5rem);
					}
				}

				div:last-child {
					margin-top: 0.5rem;
				}
			}

			&-item.active {
				background-color: $black-real;
			}

			&-option {
				display: flex;
				align-items: center;
			}
		}

		&-date {
			display: flex;
			align-items: center;
			font-size: 1rem;

			div {
				margin-right: 0.3em;
			}

			&-dropdown {
				background-color: transparent;
				color: $white;
			}
		}
	}

	&-panel {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.urlslab-panel-close-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;

		&-btn {

			@include square(1.875rem);
			cursor: pointer;

			svg {

				@include square(100%);
				fill: $white;
			}
		}

	}

	img-comparison-slider {
		outline: none;
		--divider-width: 4px;
		--divider-color: #000;
		--default-handle-color: #000;
		--default-handle-opacity: 0;
		--default-handle-width: 100px;

		.default-handle path {
			stroke-width: 4px;
		}

		figure {
			margin: 0;
		}

		figcaption {
			position: absolute;
			top: 1em;
			left: 1em;
			padding: 0.5em;
			line-height: 1;
			color: $black;
			background-color: rgba($white, 0.8);
		}

		[slot="second"] figcaption {
			left: auto;
			right: 1em;
			text-align: right;
		}
	}

	&-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		cursor: col-resize;
		transition: width 0.2s;
	}

	&-slider-container {

		@include scrollbar;
		height: calc(100vh - 100px);
		overflow: hidden auto;
	}

	&-img {
		width: 100%;

		&.hidden {
			display: none;
		}
	}
}