@import "~scss/_mixins";

.blocks {
	.block.blockLink {
		.focusable { border-radius: 4px; }

		.isArchived {
			.cardName { color: var(--color-control-active); }
			.cardName span::before { display: none; }
		}

		.loading, .deleted { color: var(--color-control-active); display: flex; gap: 0px 6px; align-items: center; }
		.loading, .deleted {
			.name { display: inline-block; vertical-align: top; max-width: calc(100% - 26px); position: relative; @include text-overflow-nw; }
		}

		.loading {
			.loaderWrapper { width: 20px; height: 20px; display: inline-block; vertical-align: top; position: relative; margin: 0px; }
			.loader { width: 20px; height: 20px; margin: -10px 0px 0px -10px; }
		}
		.deleted {
			.icon.ghost { width: 24px; height: 24px; }
		}

		.linkCard {
			.sides { display: flex; flex-direction: row; }
			.side { transition: border-color $transitionCommon; }
			.side.left { width: 100%; position: relative; display: flex; }
			.side.right { display: none; overflow: hidden; }

			.side.left {
				.txt { width: 100%; }
			}

			.cover { position: relative; height: 100%; background-size: cover !important; background-color: unset; }
			.cardName { display: flex; flex-direction: row; gap: 0px 6px; align-items: center; position: static; }
			.cardName {
				.name { transition: color $transitionCommon, border-color $transitionCommon; font-weight: 500; }
				.iconObject { flex-shrink: 0; }
			}
			.cardDescription { @include text-small; line-height: 16px; @include clamp2; margin: 2px 0px 0px 0px; }
			.cardDescription:empty { margin: 0px; }

			.cardType { @include text-small; color: var(--color-text-secondary); line-height: 16px; margin: 2px 0px 0px 0px; }
			.cardType:empty { margin: 0px; }
			.cardType {
				.item { position: relative; display: inline-block; vertical-align: top; margin: 0px 10px 0px 0px; }
				.item::after { 
					content: ""; display: block; position: absolute; right: -6px; top: 50%; width: 2px; height: 2px; background: var(--color-text-secondary); 
					margin: -1px 0px 0px 0px;
				}

				.item:last-child { margin: 0px; }
				.item:last-child::after { display: none; }
			}
		}

		.linkCard.c20.withIcon {
			.cardName { position: relative; }
			.cardName {
				.iconObject { position: absolute; left: 0; top: 0; }
				.name { text-indent: 24px; }
			}
		}

		.linkCard.c48.withIcon {
			.sides { min-height: 80px; }
			.side.left { padding: 16px 16px 16px 80px; flex-grow: 1; }
			.iconObject { position: absolute; left: 16px; top: 15px; background-color: var(--color-shape-highlight-medium); border-radius: 10px; }
		}

		.linkCard.c48.withIcon.withCover.isVertical {
			.sides { min-height: 62px; }
			.side.left { padding: 24px 16px 16px 16px; z-index: 10; }
			.iconObject { top: -32px; transform: none; }
		}

		.linkCard.withCover {
			.sides { align-items: stretch; }
			.side.left { width: calc(100% - 28%); border-radius: 8px 0px 0px 8px !important; border-right-width: 0px; }
			.side.right { width: 28%; display: block; border: 1px solid var(--color-shape-secondary); border-left: 0px; }
		}

		.linkCard.isVertical { display: block; }
		.linkCard.isVertical {
			.sides { flex-direction: column-reverse; }
			.side.left { width: 100%; border-right-width: 1px; }
			.side.right { aspect-ratio: 7/3; width: 100%; border-radius: 8px 8px 0px 0px !important; border: 1px solid var(--color-shape-secondary); border-bottom: 0px; }
		}

		.linkCard.withCover.isVertical {
			.side.left { border-radius: 0px 0px 8px 8px !important; }
		}

		.linkCard.withCover.isVertical.text { padding-top: 0px; }
	}

	.block.blockLink.text {
		.linkCard {
			.side.left { height: 26px; vertical-align: top; gap: 0px 6px; flex-direction: row; align-items: center; width: 100%; }
			.side.right { display: none !important; }

			.relationItem { display: flex; align-items: center; gap: 0px 6px; }
			.relationItem {
				.div { width: 2px; height: 18px; line-height: 18px; display: inline-block; vertical-align: top; flex-shrink: 0; flex-grow: 0; }
				.div {
					.inner { width: 2px; height: 2px; border-radius: 100%; display: inline-block; vertical-align: middle; background: var(--color-control-active); }
				}
			}

			.cardName { flex-wrap: nowrap; vertical-align: top; max-width: 100%; }
			.cardName {
				.name { @include text-overflow-nw; line-height: 19px; border-color: inherit; }
			}

			.cardDescription { @include text-small; }
			.cardDescription {
				.description { @include text-overflow-nw; width: 100%; }
			}

			.cardType { @include text-small; @include text-overflow-nw; color: var(--color-text-secondary); flex-shrink: 0; flex-grow: 0; }
		}

		.linkCard.c2 {
			.cardName { max-width: 70%; }
			.cardDescription { max-width: 30%; }
			.cardType { max-width: 30%; }
		}

		.linkCard.c3 {
			.cardName { max-width: 60%; }
			.cardDescription { max-width: 30%; }
			.cardType { max-width: 10%; }
		}
	}

	.block.blockLink.card { padding: 6px 0px; }
	.block.blockLink.card {
		.linkCard { box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05); border-radius: 8px; }
		.linkCard {
			.side::after { 
				content: ''; position: absolute; left: 0px; top: 0px; border-radius: inherit; width: 100%; height: 100%; 
				background: rgba(0,0,0,0.03); transition: $transitionAllCommon; pointer-events: none; opacity: 0; z-index: 1;
			}

			.side.left { padding: 16px; border: 1px solid var(--color-shape-secondary); border-radius: 8px; flex-direction: column; justify-content: center; }
			.side.right { border-radius: 0px 8px 8px 0px; }

			.sides.withBgColor {
				.side { border: 0px; }
			}

			.cardName { @include text-common; line-height: 20px; }
			.cardName .name { @include clamp2; font-weight: 500; }

			.archive { position: absolute; right: 10px; top: 10px; z-index: 1; }
		}
	}

	.block.blockLink.text:hover {
		.linkCard {
			.cardName .name { border-color: var(--color-text-primary); }
		}
	}

	.block.blockLink.card:hover {
		.linkCard {
			.side { border-color: var(--color-shape-primary); }
			.side::after { opacity: 1; }
		}
	}

	.block.blockLink > .wrapContent > .selectionTarget > .dropTarget.isOver.middle {
		.side.left { background: none !important; }
	}

	.block.blockLink > .wrapContent > .dropTarget.targetTop { display: block; height: 2px; bottom: -7px; }
	.block.blockLink.text > .wrapContent > .selectionTarget > .dropTarget { padding: 2px 0px; }
	.block.blockLink.card > .wrapContent > .selectionTarget.isSelectionSelected::after { border-radius: 8px; left: 0px; width: 100%; }
}