/* css for decidim_feeds */

@import '_variables.scss';

#posts__post_newElement {
	@apply fixed left-0 top-0 right-0 bottom-0 w-full h-full bg-white bg-opacity-60 z-50 justify-center items-start pt-[72px] hidden;
	&.open {
		--tw-ring-color: theme('colors.feeds.sidebar');
		@apply flex;
		.circle {
			svg {
				@apply rotate-0 motion-safe:transition-transform;
			}
		}
	}
	.circle {
		@apply w-[52px] h-[52px] p-2 bg-white rounded-[52px] shadow-feedMenu justify-center items-center inline-flex text-black;
		svg {
			@apply w-[36px] h-[36px] fill-feeds-sidebar rotate-45 motion-safe:transition-transform;
		}
	}
	.posts__post_newElement_modal_frame {
		--tw-ring-color: theme('colors.white');
		@apply p-4 gap-2 w-full shadow-feedBox rounded lg:max-w-screen-md bg-white w-[calc(100%-2rem)] max-h-[80vh] overflow-auto motion-safe:transition-all;
	}
	.posts__post_newElement_modal_content {
		@apply flex flex-col gap-2;
	}
	.category-selection {
		@apply flex gap-2 flex-wrap justify-center;
		button {
			@apply border-2 hover:bg-white hover:text-black;
			&:hover {
				background: white;
			}
			&[data-category='post'] {
				@apply border-feeds-post focus:outline-feeds-post;
				&:hover,
				&.active {
					@apply outline outline-offset-2 outline-feeds-post;
				}
			}
			&[data-category='host'] {
				@apply border-feeds-host focus:outline-feeds-host;
				&:hover,
				&.active {
					@apply outline outline-offset-2 outline-feeds-host;
				}
			}
			&[data-category='sharecare'] {
				@apply border-feeds-sharecare focus:outline-feeds-sharecare;
				&:hover,
				&.active {
					@apply outline outline-offset-2 outline-feeds-sharecare;
				}
			}
			&[data-category='survey'] {
				@apply border-feeds-survey focus:outline-feeds-survey;
				&:hover,
				&.active {
					@apply outline outline-offset-2 outline-feeds-survey;
				}
			}
			&[data-category='calendar'] {
				@apply border-feeds-calendar focus:outline-feeds-calendar;
				&:hover,
				&.active {
					@apply outline outline-offset-2 outline-feeds-calendar;
				}
			}
		}
	}
	form {
		@apply hidden opacity-0 scale-0 motion-safe:transition-transform motion-safe:transition-opacity;
		&.open {
			@apply flex flex-col gap-4 opacity-100 scale-100 motion-safe:transition-transform motion-safe:transition-opacity;
		}
		label {
			font-size: 1rem;
		}
		input,
		textarea {
			margin-block-start: 0;
		}
		.posts__post_newElement_Body {
			@apply border-0 bg-feeds-formBody;
		}
		.postType {
			@apply flex gap-2 flex-wrap justify-center;

			input[type='radio']:checked + label {
				@apply bg-primary text-white focus:outline-primary;
			}
		}
		.posts__post_newElement_Xtra {
			@apply relative hidden opacity-0 scale-0 motion-safe:transition-transform motion-safe:transition-opacity;
			&.open {
				@apply block opacity-100 scale-100 motion-safe:transition-transform motion-safe:transition-opacity;
			}
			&.posts__post_newSurvey {
				.posts__post_newSurvey-btn {
					@apply flex justify-center items-center gap-2 text-black font-medium p-4 bg-feeds-bg w-full rounded;
				}
				#newQuestion {
					--tw-ring-color: theme('colors.feeds.sidebar');
					@apply top-0 left-0 w-full h-full bg-white p-4 ring-1 rounded;
				}
			}
		}
		.posts__post_newElement_Media {
			@apply px-2 pb-2 pt-0;
			svg {
				@apply w-[24px] h-auto;
			}
			.active-uploads {
				@apply mt-0 pb-2;
			}
			button {
				@apply mt-0;
			}
		}
		.sndBtn {
			@apply self-end;
		}
	}
}

.feeds__container {
	@apply pr-[91px] md:pr-[101px] lg:pr-0 order-1 grow min-h-[calc(100vh-72px)];
	.feeds__body {
		@apply flex-grow flex flex-wrap gap-4 items-start;
		.posts__post {
			@apply gap-4 ring-1 hover:cursor-default md:col-start-1 md:col-end-4 lg:col-start-2 lg:col-end-8 xl:col-start-2 xl:col-end-10;
			.card__grid-text {
				@apply py-2 text-pretty;
				p {
					@apply text-black;
				}
				a {
					@apply break-words break-all underline motion-safe:transition-colors hover:text-feeds-notification hover:no-underline;
				}
			}
			&[data-content] {
				@apply shadow-feedBox;
			}
			&[data-content='post'] {
				--tw-ring-color: theme('colors.feeds.post');
			}
			&[data-content='sharecare'] {
				--tw-ring-color: theme('colors.feeds.sharecare');
			}
			&[data-content='host'] {
				--tw-ring-color: theme('colors.feeds.host');
				&.host-highlight {
					@apply bg-feeds-host font-medium;
					.content-block__description {
						@apply text-white;
						button {
							@apply text-white;
						}
					}
					.card__grid-metadata {
						.posts__post_actions_submenu {
							button.openButton,
							button.openButton span {
								@apply text-white;
							}
							&:has(ul:empty) {
								@apply hidden;
							}
						}
					}
				}
				&.posts__post_host-handling {
					@apply border-t-8 border-warning;
				}
				&.posts__post_host-complete {
					@apply border-t-8 border-success;
				}
				.host-icon {
					@apply absolute -right-2 -top-2 bg-white fill-feeds-host;
				}
			}
			&[data-content='survey'] {
				--tw-ring-color: theme('colors.feeds.survey');
				.posts__post_survey {
					@apply flex flex-col gap-2 text-sm font-bold px-2;
					.posts__post_survey-question {
						@apply flex flex-col p-2 gap-2 rounded bg-feeds-bg;
						.posts__post_survey-question-answer {
							@apply font-medium flex flex-col px-2;
							.posts__post_survey-question-answerInput {
								@apply flex py-1 gap-2;
								span {
									@apply text-sm shrink-0;
								}
							}
						}
					}
				}
			}
			&[data-content='calendar'] {
				--tw-ring-color: theme('colors.feeds.calendar');
			}
			.card__grid-metadata {
				@apply gap-2 items-center flex-nowrap text-black px-2 pt-2;
				.author {
					@apply mr-auto shrink;
				}
				.posts__post_actions {
					@apply flex gap-4;
					span {
						@apply flex items-center gap-1;
					}
					.endorsers-list__trigger {
						@apply hidden;
					}
					#endorsement-button {
						@apply border-0 p-0 font-normal;
						&:hover {
							background: none;
							color: inherit;
						}
						svg {
							@apply fill-black;
						}
					}
					.posts__post_actions_submenu {
						button.openButton {
							span {
								@apply leading-[0] text-3xl text-feeds-sidebar;
							}
						}
					}
				}
			}
			.posts__post_gallery {
				li {
					transition: opacity 0.5s ease;
					opacity: 0;
					display: none;
					&.active {
						opacity: 1;
						display: block;
					}
					@supports not (aspect-ratio: 4 / 3) {
						&::before {
							float: left;
							padding-top: 75%;
							content: '';
						}

						&::after {
							display: block;
							content: '';
							clear: both;
						}
					}
				}
			}
			.posts__post_comments {
				@apply px-2;
				#comments {
					.comments__header {
						@apply flex-row justify-end h-8 items-center mb-0;
						h2 {
							@apply flex text-sm font-medium gap-1 cursor-pointer;
							svg {
								@apply w-[14px] h-auto fill-black;
							}
						}
					}
					.comment-order-by {
						@apply hidden;
					}
					.comment-threads,
					.add-comment:not(.comment__additionalreply) form.new_comment {
						@apply h-0 invisible motion-safe:transition-transform;
					}
					.comment-threads {
						.comment-thread {
							.comment__header {
								@apply -ml-8;
							}
							.author__avatar-container {
								@apply w-6 h-6;
							}
						}
					}
					.add-comment {
						@apply mt-4;
						label {
							@apply block text-md font-medium;
						}
						textarea {
							@apply block w-full sm:text-sm sm:leading-6;
						}
					}
					.add-comment:not(.comment__additionalreply) {
						@apply mt-0;
					}
				}
			}
			&.posts__post_newElement {
				--tw-ring-color: theme('colors.white');
				@apply gap-4;
				.circle {
					@apply w-[52px] h-[52px] p-2 bg-white rounded-[52px] shadow-feedMenu justify-center items-center inline-flex text-black;
					svg {
						@apply w-[36px] h-[36px] fill-feeds-sidebar rotate-45 motion-safe:transition-transform;
					}
				}
			}
		}
	}
}

.posts__aside {
	@apply shrink-0 max-lg:right-[16px] max-lg:top-[88px] max-lg:bottom-[80px] max-lg:fixed max-w-[72px] order-2 flex flex-col justify-between lg:justify-start;
	ul {
		@apply flex flex-col space-y-4;
		a {
			@apply flex flex-col items-center font-medium text-sm md:text-md text-feeds-sidebar text-center;
			svg {
				@apply w-[24px] h-auto fill-feeds-sidebar;
			}
			&.active {
				span {
					@apply font-bold;
				}
				&[data-filter='post'] {
					svg {
						@apply fill-feeds-post;
					}
				}
				&[data-filter='sharecare'] {
					svg {
						@apply fill-feeds-sharecare;
					}
				}
				&[data-filter='host'] {
					svg {
						@apply fill-feeds-host;
					}
				}
				&[data-filter='survey'] {
					svg {
						@apply fill-feeds-survey;
					}
				}
				&[data-filter='calendar'] {
					svg {
						@apply fill-feeds-calendar;
					}
				}
			}
			&[data-filter='host'] {
				@apply mt-8;
			}
		}
	}
}

// tooltip
.author__tooltip {
	&[role='tooltip'] {
		@apply bg-white text-black rounded-2xl shadow-feedMenu;
		.author__name {
			@apply text-black;
			&:hover {
				@apply no-underline;
			}
		}
		&::before {
			@apply bg-white;
		}
		.button {
			@apply border-black bg-white text-black;
		}
	}
}

// fix bottom menu overlapping content on desktops
#content {
	@apply lg:mb-28;
}

// color hacks
.content-block__description {
	@apply text-black;
}

// long text cut off
.content-block__description[data-component='accordion']
	[id*='panel'][aria-hidden='true']::after,
.content-block__description[data-component='accordion']
	[id*='panel'][aria-hidden='true']::before {
	content: none;
}

.content-block__description[data-component='accordion'] button {
	margin-block-start: 1rem;
}

// reactions icons

.posts__post_reactions_submenu {
	button {
		&[data-reaction]:not([data-reaction='']) {
			.reaction_icon {
				@apply hidden;
			}
		}
	}
}