/* post smilies */
.smilie-inserter {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	
	.smilie-grid {	
		display: grid;
		gap: 0.25rem;
		grid-template-columns: repeat(auto-fill, minmax(2rem, 3rem));
		justify-items: center;
		justify-content: space-evenly;
	}
	
	.more-button {
		align-self: center;
	}
}

.smilie-list {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(2rem, 8rem));
	justify-items: center;
	justify-content: space-evenly;
}

.smilie-list-popup {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fill, minmax(2rem, 3rem));
	justify-items: center;
	justify-content: space-evenly;
}

/* who's online grid */
.online-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-areas: "user time location";
	gap: 0.75rem;
	width: min(50rem, 100%);
	
	.row {
		display: grid;
		grid-template-columns: subgrid;
		justify-items: center;
		align-items: center;
		grid-column: user / location;
		padding: 0 0.75rem;
		
		&.head {
			padding-bottom: 0.75rem;
			border-bottom: 1px solid var(--color-accent);
			text-transform: lowercase;
			font-size: 1rem;
		}
		
		.user {
			grid-column: user;
			display: flex;
			flex-direction: column;
			gap: 0.25rem;
		}

		.time {
			grid-column: time;
			text-align: center;
		}

		.location {
			grid-column: location;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			gap: 0.25rem;
		}
	}
	
	@media (width < 577px) {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas: "user location";
		
		.row {
			padding: 0;
		
			.time {
				display: none;
			}

			.user {
				align-items: center;
				text-align: center;
			}
		}
	}
	
	&.today {
		grid-template-columns: repeat(2, 1fr);
		grid-template-areas: "user time";
		
		.row {
			grid-column: user / time;
			
			.time {
				display: block;
			}
		}
	}
}

/* myalerts */
.alerts-grid {
	display: grid;
	grid-template-columns: min-content auto min-content min-content;
	grid-template-areas: "avatar message date actions";
	align-items: center;
	gap: 1rem;
	
	a {
		display: block;
	}
	
	.row {
		grid-column: avatar / actions;
		display: grid;
		grid-template-columns: subgrid;
		align-items: center;
		
		.alert-avatar {
			grid-column: avatar;
			width: 4rem
		}

		.alert-message {
			grid-column: message;
			text-align: left;
		}

		.alert-date {
			grid-column: date;
			justify-self: center;
		}

		.alert-actions {
			grid-column: actions;
			display: flex;
			justify-self: center;
			gap: 0.5rem;
			font-size: 1rem;
		}
		
		&.alert--read {
			
			.alert-avatar,
			.alert-message,
			.alert-date {
				opacity: 0.75;
			}
			
			.markReadAlertButton {
				pointer-events: none;
				opacity: 0.75;
			}
		}
	}
	
	.no-alerts {
		grid-column: avatar / actions
	}
	
	@media (width < 577px) {
		
		.row .alert-avatar {
			width: 2.5rem;
		}
	}
}

/* inplayquotes */
.inplayquotes-overview {
	display: grid;
	grid-template-columns: 6rem auto;
	grid-template-areas: "character quote";
	gap: 3rem;
	
	.entry {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: character / quote;
	
		.ipq-character {
			grid-column: character;
			padding-top: 1.25rem;
		}

		.ipquote {
			grid-column: quote;
			display: flex;
			flex-direction: column;
			gap: 0.75rem;
			text-align: justify;
			isolation: isolate;
			
			.signed {
				align-self: center;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                text-align: center;
                gap: 0.25rem;
			}
			
			.quote-content {
				padding: 1rem;
				position: relative;


				&:before {
					content: "\f10e";
					font-family: "Font Awesome 7 Pro";
					font-weight: 900;
					position: absolute;
					bottom: -1rem;
					left: 0;
					font-size: 2.5rem;
					line-height: 1;
					width: 2.5rem;
					color: var(--color-secondary);
					z-index: -1;
					opacity: 0.15;
					-webkit-font-smoothing: antialiased;
				}

				&:after {
					content: "\f10d";
					font-family: "Font Awesome 7 Pro";
					font-weight: 900;
					position: absolute;
					top: -1rem;
					right: 0;
					font-size: 2.5rem;
					line-height: 1;
					width: 2.5rem;
					color: var(--color-secondary);
					z-index: -1;
					opacity: 0.15;
					-webkit-font-smoothing: antialiased;
				}
			}
		}
	}
	
	@media (width < 577px) {
		grid-template-columns: auto;
		grid-template-areas: "character"
							 "quote";
		
		.entry .ipq-character {
			padding: 0;
			
		}
	}
}

/* regeln & aufnahmestopp */
.grid-2-col.rules {
	grid-template-columns: minmax(10rem, max-content) auto;

	.row {
		align-items: center;
	}
}

.grid-2-col.stop .row .label {
		font-weight: 500;
		letter-spacing: 0.075em;
		color: var(--color-text-accent);
	}
}