@import "~scss/_mixins";

.blocks {
	.block.blockBookmark { padding: 6px 0px; }
	.block.blockBookmark {
		.focusable { border-radius: 4px; }
		.loaderWrapper { border-radius: 4px; border: solid 1px var(--color-shape-secondary); height: 48px; width: 100%; }

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

		.inner { 
			display: flex; border: 1px solid var(--color-shape-secondary); transition: border-color $transitionCommon; 
			position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05);
		}
		.inner::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;
		}

		.inner:hover { border-color: var(--color-shape-primary); }
		.inner:hover::after { opacity: 1; }
		.inner.bgColor { border: 0px; }
		
		.inner {
			.side.left { width: 100%; padding: 16px; position: relative; }
			.side.right { border-radius: 0px 8px 8px 0px; overflow: hidden; display: none; }

			.name { @include text-common; line-height: 20px; font-weight: 500; @include clamp2; }
			.descr { @include text-small; line-height: 16px; color: var(--color-text-secondary); @include clamp2; }
			.archive { position: absolute; right: 10px; top: 10px; z-index: 1; }
		}
		
		.inner.isVertical { display: flex; flex-direction: column; }
		.inner.isVertical {
			.side.left { width: 100%; border-radius: 0px; }
			.side.right { aspect-ratio: 7/3; width: 100%; border-radius: 0px; }

			.link,
			.name { margin-bottom: 4px; }
			.descr { @include clamp3; }
		}

		.inner.withImage {
			.sides { align-items: stretch; }
			.side.left { width: calc(100% - 28%); padding: 16px 12px 16px 16px; }
			.side.right { padding: 16px; width: 28%; min-height: 90px; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; aspect-ratio: 7/3; max-height: 122px; }
			.side.right {
				.img { width: 100%; height: 100%; position: static; left: auto; top: auto; border-radius: 4px; }
			}
		}
		.inner.withImage:not(.isVertical) {
			.side.left { display: flex; flex-direction: column; justify-content: center; }
		}

		.inner.withImage.isVertical {
			.side.left { width: 100%; }
			.side.right { width: 100%; padding: 0px 16px 16px 16px; max-height: unset; }
		}

		.link { 
			@include text-small; height: 18px; line-height: 18px; color: var(--color-text-secondary); @include text-overflow-nw; display: flex; gap: 0px 6px;
			align-items: center; 
		}
		.img { position: absolute; width: calc(100% + 4px); top: 0px; left: -2px; height: 100%; object-fit: cover; display: block; }
		.fav { width: 14px; height: 14px; object-fit: cover; }
	}
	
	.block.blockBookmark > .wrapContent { border-radius: 6px; }
	.block.blockBookmark > .wrapContent > .selectionTarget > .dropTarget { padding-top: 0px; padding-bottom: 0px; }

	.block.blockBookmark > .wrapContent > .selectionTarget.isSelectionSelected::after { left: 0px; width: 100%; border-radius: 8px; }
	.block.blockBookmark.withContent > .wrapContent > .selectionTarget.isSelectionSelected::after { border-radius: 8px; }
}