.bio-message {
	display: grid;
	padding: 16px;
	border-radius: 2px;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"content close";

	color: $color-primary;
	background-color: mix($color-primary, white, 17%);
	border-left: 4px solid $color-primary;

	@each $key, $value in $components-colors {
		&.-#{$key} {
			color: $value;
			background-color: mix($value, white, 17%);
			border-left: 4px solid $value;
		}
	};

	>.bio-message-close {
		grid-area: close;
		user-select: none;
		margin-left: 8px;
		> * {
			display: block;
		}
	}

	>.bio-message-content {
		grid-area: content;
	}
}