@import "../../widgets/common/ext.cx.common";
@import "../../widgets/common/ext.cx.highlight";
@import "mediawiki.mixins";

.cards.link {
	animation-name: card-show-animation;
	animation-duration: 0.5s;
	position: relative;
	padding: 0;
	// Make sure the container has enough space to do the
	// animation of second card. Height of one card = 100px
	// For animation 60 px.
	min-height: 170px;

	.card {
		.mw-ui-item;
		padding: 0;

		&:nth-of-type(1) {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			transition: top 0.15s;

			// On mouse over of first card, push the second card a bit down.
			&:hover + .card:nth-of-type(2) {
				top: 60px;
			}
		}

		&:nth-of-type(2) {
			position: relative;
			top: 30px;
			transition: top 0.3s;
		}
	}
}

.card__remove-link {
	@vertical-margin: 10px;
	@horizontal-margin: 15px;
	.mw-ui-item;
	.mw-ui-one-whole;
	float: none;
	padding: @vertical-margin @horizontal-margin;
	font-size: large;
	color: @gray-dark;
	.background-image-svg('../images/clear.svg', '../images/clear.png');
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	background-position: left 10px center;
	background-size: 15px;
	padding: 5px 10px 5px 32px;
	cursor: pointer;
	clear: both;
	border-top: 1px solid #dddddd;
}

.card__add-link {
	@vertical-margin: 10px;
	@horizontal-margin: 15px;
	.mw-ui-item;
	.mw-ui-one-whole;
	padding: @vertical-margin @horizontal-margin;
	font-size: large;
	color: @gray-dark;
	.background-image-svg('../images/add.svg', '../images/add.png');
	background-repeat: no-repeat;
	background-position: left 10px center;
	background-size: 15px;
	background-color: #FFFFFF;
	padding: 5px 10px 5px 32px;
	cursor: pointer;
	border-top: 1px solid #dddddd;
}

.card__link-image-container {
	.mw-ui-item;
	.mw-ui-three-tenths;
	min-height: 125px;
	background-color: #FFFFFF;
	overflow: hidden;
	padding: 0;
	position: relative;

	img {
		min-width: 100%;
		min-height: 100%;
		position: absolute;
	}

	&:empty {
		.background-image-svg('../images/link_lightgray.svg', '../images/link_lightgray.png');
		background-repeat: no-repeat;
		background-color: @gray-lighter;
		background-position: center center;
		border-right: 1px solid #eeeeee;
	}
}

.card__link-info {
	.mw-ui-item;
	.mw-ui-seven-tenths;
	background-color: #FFFFFF;
	padding: 0;

	.card__link-container {
		.mw-ui-item;
		.mw-ui-one-whole;

		overflow: hidden;
		text-overflow: ellipsis;
		text-align: left;
		padding: 4px;
		padding-bottom: 15px;
		min-height: 65px;

		.card__link-text {
			color: #0645ad;
			font-size: large;
			white-space: nowrap;
		}
	}

	.card__missing-link-message {
		margin: 0;
		padding: 0;
		font-size: medium;
	}
}

.card.missinglink {
	.card__link-image-container  {
		.background-image-svg('../images/question-mark.svg', '../images/question-mark.png');
		background-repeat: no-repeat;
		background-color: @gray-lighter;
		background-position: center center;
		border-right: 1px solid #eeeeee;
	}

	.card__add-link,
	.card__remove-link {
		display: none;
	}
}

.card.redlink {
	.card__link-image-container {
		.background-image-svg('../images/link_flagged_lightgray.svg', '../images/link_flagged_lightgray.png');
		background-repeat: no-repeat;
		background-color: @gray-lighter;
		background-position: center center;
		border-right: 1px solid #eeeeee;
	}

	.card__link-text {
		color: red;
	}

	.card__add-link,
	.card__mark-missing-link {
		display: none;
	}

	.card__remove-link {
		display: block;
	}
}

.card__link-instruction {
	.mw-ui-item;
	.mw-ui-one-whole;
	color: @gray-dark;
	font-size: large;
	border-top: 1px solid #dddddd;
	clear: both;
	padding-top: 10px;

	.shortcut-info {
		font-size: small;
		color: #aaaaaa;
	}
}

[contenteditable] {
	// Links that cannot be adapted will be represented in gray with a dashed underline.
	// The dashed underline will only appear for the links on the current paragraph.
	// Links from other paragraphs will not show the dashed underline to avoid too much visual noise.
	&:focus .cx-target-link-unadapted {
		border-bottom: 1px dashed #ccc;
	}

	.cx-target-link-unadapted {
		color: #777;

		&:hover {
			color: @gray-darker;
		}
	}

	.cx-link {
		cursor: pointer;
	}
}

.card__mark-missing-link {
	.card__add-link;
	.background-image-svg('../images/flag_gray.svg', '../images/flag_gray.png');
}

.external {
	background-position: right center;
	background-repeat: no-repeat;
	.background-image-svg('../images/external_link.svg', '../images/external_link.png');
	padding-right: 13px;
}