.entry-client-area
	@extend %cf

.ca-image
	user-select: none
	@extend %cf

	img
		cursor: zoom-in

	&__meta
		@extend %cf
		padding: 1rem
		font-size: 0.875rem
		font-weight: 300

		line-height: 1

		display: flex
		justify-content: space-between
		align-items: center

		cursor: pointer

		transition: background-color 300ms ease-out

		background-color: $light

	.ca-image__id
		float: left
		flex: 1

	.ca-image__id--as-tag
		@extend .ca-preview-link

		// Specificity to override .ca-preview-link
		&.ca-image__id
			background-color: darken($light, 5)
			margin-left: 0

	&__name
		margin-bottom: $halfling
		font-weight: bold

	.icon
		transition: transform 300ms ease-in-out
		display: block




.ca-image-state
	$icon_size: 1em
	position: relative
	font-size: $icon_size
	text-align: right

	float: right
	flex: 1

	// Default state is "unselected", hide "selected"
	.when-favorite-selected
		display: none

	.is-selected &
		.when-favorite-selected
			display: block
		.when-favorite-unselected
			display: none

	.label
		font-size: 0.75em

	.ca-image-state__status
		float: right

	.ca-image-state__actions
		float: right
		text-transform: uppercase
		margin-right: $tiny
		opacity: 0
		transition: opacity 100ms ease-in
		font-size: 0.75rem
		line-height: 2rem
		color: $gray

	.image-meta:hover .image-state__actions
		opacity: 1


.ca-title
	text-align: center
	font-size: 2em
	margin-bottom: 1.4em
	margin-top: 1.4em
	@extend %cf
	display: block

.ca-preview
	position: absolute
	top: 0
	left: 0
	z-index: 5000

	width: 220px
	border: 3px solid $light
	border-radius: 3px

	display: none

	img
		display: block



.ca-preview-link
	background-color: $light
	padding: .5em
	font-size: .75em
	border-radius: 3px
	margin-left: .5em
	margin-right: .5em
	cursor: pointer