src/static/scripts/components/link/feedLink/_feedLink.scss
@use "../../../../style/vars";

.feedLink {
	$imgSize: 1.65rem;
	
	> .linkWrapper {
		display: flex;
		align-items: center;
		width: 100%;
		height: 2.15rem;

		* {
			color: vars.$text-color;
			font-weight: 400;
		}

		&:hover {
			* {
				color: vars.$primary;
			}
		}

		> .imageWrapper {
			width: $imgSize;
			height: $imgSize;
			margin-right: .5rem;

			> img {
				width: $imgSize;
				height: $imgSize;
				border-radius: 50%;
			}

			&.default {
				border-radius: 50%;
				border: 1px dashed vars.$primary;
			}

			&.noBorderRadius {
				&, & > img {
					border-radius: 0;
				}
			}

			&.nsfw {
				position: relative;
				overflow: hidden;
				border-radius: 50%;

				> img {
					filter: blur(3px);

				}

				&::after {
					content: "18+";
					position: absolute;
					width: $imgSize;
					line-height: $imgSize;
					text-align: center;
					top: 0;
					left: 0;
					color: vars.$text-color;
					font-size: .65rem;
					filter: drop-shadow(0 0 2px black) drop-shadow(0 0 4px black);
				}
			}
		}

		> .linkText {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			transition: color 0.25s ease;
			font-size: 1.075rem;
			line-height: 1.15;
			display: block;

			> div {
				display: flex;
				transition: inherit;
			}

			.subtext {
				font-size: 0.6rem;
			}
		}
	}
}