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


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