/* 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;
		}
	}
}