@import './tilda-feed-block-text-1.0.css';
@import './tilda-popup-1.1.css';
@import './tilda-feed-popup-1.0.css';

.tn-atom:has(.t-redactor__tte-view) {
	width: inherit;
}

.tn-atom > figure {
	margin: 0;

	img {
		width: 100%;
	}
}

.tn-atom .t-redactor__video-container {
	/* Aspect Ratio 16 / 9 */
	padding-bottom: 56.25%;
	height: 0;
	position: relative;
	& video {
		object-fit: cover;
	}

	& video,
	& iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
	}
}

[data-tilda-mode='edit'] .tn-atom .t-redactor__tte-view {
	pointer-events: none;

	.t-redactor__embedcode--preview {
		pointer-events: auto;
	}
}

.tn-atom .t-redactor__tte-view {
	width: inherit;

	h2.t-redactor__h2 {
		--font-scale: 1.8;
		font-size: 1.8em;
	}

	h3.t-redactor__h3 {
		--font-scale: 1.6;
		font-size: 1.6em;
	}

	h4.t-redactor__h4 {
		--font-scale: 1.3;
		font-size: 1.3em;
	}

	h2.t-redactor__h2,
	h3.t-redactor__h3,
	h4.t-redactor__h4 {
		--lh-ratio: 0.84;
	}

	blockquote.t-redactor__preface {
		--font-scale: 1.2;
		font-size: 1.2em;
	}
	blockquote.t-redactor__quote {
		border-left: 3px solid currentColor;
	}

	.t-redactor__callout {
		color: currentColor;
		/* В зеро отступ слева становится динамическим, потому что иконка внутри меняет размеры вместе с текстом */
		padding-left: max(55px, calc(1em * 1.75));
	}
	.t-redactor__callout-icon {
		display: flex;
	}

	.t-redactor__callout-icon svg {
		width: max(24px, 1em);
		height: max(24px, 1em);
	}

	.t-redactor__callout-text {
		--lh-ratio: 0.9;
	}

	.t-redactor__callout_fontSize_big {
		--font-scale: 1.1;
		font-size: 1.1em;
	}

	.t-redactor__callout_fontSize_default {
		--font-scale: 0.9;
		font-size: 0.9em;
	}

	.t-redactor__callout_fontSize_small {
		--font-scale: 0.8;
		font-size: 0.8em;
	}

	figure hr {
		color: inherit;
	}

	figure figcaption {
		--font-scale: 0.8;
		font-size: max(16px, 0.8em);
	}

	.t-table__cell-content {
		font-size: max(14px, 0.7em);
	}

	.t-redactor__text,
	blockquote.t-redactor__quote {
		font-size: 1em;
		/* Наследуем line-height чтобы стили обычной статьи (tx24) не перекрывали */
		line-height: inherit;
	}

	/*
		Общая формула line-height для элементов с --font-scale
		Переменная lh-px задается через JS высоту строки базового текста в пикселях.
	*/
	h2.t-redactor__h2,
	h3.t-redactor__h3,
	h4.t-redactor__h4,
	blockquote.t-redactor__preface,
	.t-redactor__callout-text,
	figure figcaption {
		--default-text-lh: calc(1em / var(--font-scale) * 1.55);
		line-height: calc(var(--lh-px, var(--default-text-lh)) * var(--font-scale) * var(--lh-ratio, 1));
	}

	.t-redactor__highlightcode {
		overflow-x: scroll;
	}

	@media screen and (max-width: 640px) {
		.t-redactor__callout_fontSize_big {
			font-size: 1em;
		}
		.t-redactor__callout_fontSize_default {
			font-size: 0.8em;
		}
		.t-redactor__callout_fontSize_small {
			font-size: 0.7em;
		}
	}
}

.tn-atom .t-redactor__embedcode--preview {
	border: 1px solid #ccc;
	background-color: #f8f8f8;
	padding: 1em;
	overflow: hidden;
	box-sizing: border-box;
	font-size: 0.85em;
	line-height: 1em;
	border-radius: 5px;
	overflow-x: scroll;

	&::-webkit-scrollbar {
		display: none;
	}

	code {
		display: block;
		margin-top: 10px;
	}

	summary {
		font-weight: 600;
		cursor: pointer;
	}
}

.t-zero-feed__loading {
	pointer-events: none;
	position: relative;
}

.t-zero-feed__loading > .tn-molecule {
	opacity: 0.2;
}

.t-zero-feed__loading [data-fe-role='post']:not(:has([data-fe-post-processed])) {
	opacity: 0;
}

.t-zero-feed__button-loading {
	pointer-events: none;
}

.t-zero-feed__button-loading .tn-atom {
	opacity: 0.6;
}

.t-zero-feed__button-loading .tn-atom__button-content {
	opacity: 0;
}

.t-zero-feed__loading::before,
.t-zero-feed__button-loading::before {
	content: '';
	box-sizing: border-box;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	height: 30px;
	border-radius: 50%;
	border: 2px solid #ccc;
	border-top-color: #333;
	animation: t-zero-feed-spinner 0.6s linear infinite;
	max-height: 70%;
	min-height: 15px;
	aspect-ratio: 1;
	z-index: 5;
}

.t-zero-feed__scroll-loader {
	position: relative;
	height: 60px;
	width: 100%;
	margin-top: -1px; /* для предотвращения перекрытия соседними блоками */
}

.t-zero-feed__scroll-loader::before {
	content: '';
	display: none;
	box-sizing: border-box;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 30px;
	border-radius: 50%;
	border: 2px solid #ccc;
	border-top-color: #333;
	animation: t-zero-feed-spinner 0.6s linear infinite;
	aspect-ratio: 1;
}

.t-zero-feed__scroll-loader_visible::before {
	display: block;
}

[data-fe-total='0'] {
	--t-zero-feed-not-found: 'Nothing found';
}

[data-fe-role='feed']:not([data-fe-total]) {
	[data-fe-role='parts'],
	[data-fe-role='posts'] {
		opacity: 0;
	}
}

[data-fe-total='0']:not([data-fe-empty-state='custom']) [data-fe-role='empty-state'],
[data-fe-role='feed']:not([data-fe-total='0']) [data-fe-role='empty-state'],
.t-zero-feed__not-found [data-fe-role='empty-state'] {
	display: none;
}

[data-fe-total='0'] [data-fe-role='posts'] > .tn-molecule,
[data-fe-total='0'] [data-fe-role='more'] {
	display: none !important;
}

[data-fe-total='0'] [data-fe-role='posts']::before {
	content: var(--t-zero-feed-not-found);
	width: 100%;
	min-height: 40vh;
	max-height: 350px;
	border: 1px solid rgba(130, 130, 130, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(130, 130, 130, 0.7);
	font-size: 18px;
}

[data-fe-total='0'][data-fe-empty-state='empty']:not(.t-zero-feed__not-found),
[data-fe-total='0'][data-fe-empty-state='custom']:not(.t-zero-feed__not-found) {
	[data-fe-role='posts']::before {
		display: none;
	}
}

@keyframes t-zero-feed-spinner {
	to {
		transform: rotate(360deg);
	}
}