@import "themes";
@import "globals/variables";
@import "globals/helpers";

.link {
	width: 85%;

	@include break-point-min($bp-wide) {
		@include full-width;
		cursor: pointer;
	}
}

.link-wrap {
	border-bottom: 1px solid #ccc;

	@include on-theme(light-n-dark) {
		border-top: 0;
	}

	@include on-theme(dark) {
		border-color: $dark-bg-color-1;
	}

	&:first-child {
		border-top: 0;
	}
}

.link-thumb {
	width: 70px;
	max-width: 70px;
	min-width: 70px;

	div {
		@include size(60px);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 70px;
		background-color: #333;
		margin: 0;
		border-radius: 5px;
		box-shadow: inset 0 1px 3px #333;

		@include on-theme(light-n-dark) {
			box-shadow: none;
		}

		@include on-theme(dark) {
			background-color: $dark-bg-color-1;
		}
	}
}

.link-title {
	$link-active-bg: $focus-item;
	@include activeState($link-active-bg);
	font-weight: 600;
	font-size: 15px;
	color: $black-blueish;
	outline: 0;

	@include on-theme(dark) {
		font-weight: 500;
		color: $dark-text-color-1;
	}

	&:focus {
		box-shadow: 3px 0 0 $link-active-bg, -3px 0 0 $link-active-bg;
		border-radius: 3px;

		@include on-theme(dark) {
			background-color: $active-bg;
			box-shadow: 3px 0 0 $active-bg, -3px 0 0 $active-bg;
		}
	}
}

.link-domain {
	color: $red;

	@include on-theme(dark) {
		color: $dark-label-color-1;
	}
}

.link-sub {
	color: #777;

	@include on-theme(dark) {
		color: $dark-text-color-2;
	}
}

.link-selected {
	background-image: linear-gradient(#4286F5, #194FDB);

	@include on-theme(light) {
		background: {
			image: none;
			color: $light-active-item;
		};
	}

	@include on-theme(dark) {
		background: {
			image: none;
			color: $active-bg;
		}
	}

	.link-title {
		color: white;
		text-shadow: 0 1px 0 $black;

		&:visited {
			color: whiteSmoke;
		}

		&:focus {
			background-color: transparent;
			box-shadow: none;
		}

		@include on-theme(dark) {
			color: $dark-text-color-1;
		}
	}

	.link-domain,
	.link-sub {
		color: $col_active-link-subtext;
	}
}

$nsfw:     #d13;
$stickied: #71b0d3;

.link-label {
	font-size: 11px;
	margin-left: 5px;

	&.nsfw {
		color: $nsfw;
	}

	&.stickied {
		color: $stickied;
		letter-spacing: .3px;
	}
}

.summary-label {
	border-radius: 5px;
	padding: 1px 3px;

	&.nsfw {
		background-color: $nsfw;
		color: white;
	}

	&.stickied {
		background-color: $stickied;
		color: white;
	}
}

.link-title:visited {
	color: #888;
}

.to-comments {

	@include break-point-min($bp-wide) {
		display: none;
	}
}

.comments-icon {
	@include size(24px);
	background-image: url('../img/comment_24.png');
	background-repeat: no-repeat;
	background-size: 24px;
	margin: 0 auto;

	@include on-theme(light) {
		opacity: .7;
	}

	@include on-theme(dark) {
		background-image: url('../img/comment-dark@1x.png');
	}

	@include break-point-hdpi {
		background-image: url('../img/comment_48.png');
		opacity: .7;

		@include on-theme(dark) {
			background-image: url('../img/comment-dark@2x.png');
		}
	}
}
