/**
 * Focal Point
 */
$white: #fff;
$black: #000;
$duration: .2s;
$easing: cubic-bezier(.4, 0, .2, 1);

.image-focal {
	position: relative;
	display: flex;
	justify-content: center;

	.attachment-media-view & {
		max-height: 90%;
		max-height: calc(100% - 42px);
		margin-bottom: 16px;
	}

	&__wrapper {
		display: inline-flex;
		position: relative;
		overflow: hidden;
	}

	img.details-image {
		display: block;
		margin: 0 !important;
		max-height: 100% !important;
	}

	&__clickarea {
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	&__point {
		position: absolute;
		z-index: 20;
		top: 50%;
		left: 50%;
		width: 1px;
		height: 1px;
		cursor: move;

		&:hover,
		&:focus {
			&::after {
				box-shadow: 0 0 0 9999px rgba($black, .25);
			}
		}

		&::before,
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			border-radius: 50%;
			transform: translate(-50%, -50%);
		}

		&::before {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background-color: rgba($black, .5);
			transition: all $duration $easing;

			body.focal-point-dragging & {
				background-color: rgba($black, 1);
			}
		}

		&::after {
			width: 50px;
			height: 50px;
			max-width: 5vw;
			max-height: 5vw;
			border: 1px solid rgba($white, .5);
			box-shadow: 0 0 0 9999px rgba($black, 0);
			transition: box-shadow $duration $easing;

			.attachment-media-view & {
				width: 100px;
				height: 100px;
				max-width: 5vw;
				max-height: 5vw;
			}

			body.focal-point-dragging & {
				border-color: rgba($white, 1);
				box-shadow: 0 0 0 9999px rgba($black, .5);
			}
		}
	}
}