.ct-attachment {
	.components-focal-point-picker-wrapper {
		background-color: transparent;
		// border: 1px solid #e2e4e7;
		height: 200px;
		width: 100%;
		// padding: 14px;
		box-sizing: border-box;
	}

	.components-focal-point-picker {
		align-items: center;
		cursor: pointer;
		display: flex;
		height: 100%;
		justify-content: center;
		position: relative;
		width: 100%;

		img {
			height: auto;
			max-height: 100%;
			max-width: 100%;
			width: auto;
			user-select: none;
		}
	}

	.components-focal-point-picker__icon_container {
		background-color: transparent;
		cursor: grab;
		opacity: 0.8;
		position: absolute;
		will-change: transform;
		width: 24px;
		height: 24px;
		z-index: 10000;

		&.is-dragging {
			cursor: grabbing;
		}
	}

	.components-focal-point-picker__icon {
		position: absolute;
		display: block;
		top: -12px;
		left: -12px;
		width: 100%;
		height: 100%;

		.components-focal-point-picker__icon-outline {
			fill: #fff;
		}

		.components-focal-point-picker__icon-fill {
			fill: #0e8ecc;
		}
	}

	.components-focal-point-picker_position-display-container {
		margin: 10px -10px 0 -10px;
		padding: 10px 10px 0 10px;
		display: flex;
		border-top: 1px dashed #c1c4ca;

		label {
			line-height: normal;
			margin-bottom: 5px;
			display: inline-block;
		}

		input[type='number'].components-text-control__input {
			// Needs specificity to override padding.
			max-width: 4em;
			// padding: 6px 4px;
		}

		span {
			margin: 0 0 0 0.2em;
		}
	}
}