$color_1: #f1f1f1;
$color_2: #eee;
$color_3: rgba(238, 238, 238, 0.8);
$color_4: #141414;
$color_5: rgba(238, 238, 238, 0.3);
$color_6: white;
$font-family_1: "Ubuntu Nerd Font", sans-serif;
$background-color_1: rgba(238, 238, 238, 0.154);
$background-color_2: rgba(230, 112, 144, 0.5);
$background-color_3: rgba(238, 238, 238, 0.06);
$background-color_4: #51a4e7;
$background-color_5: transparent;
$background-color_6: #171717;
$background-color_7: rgba(23, 23, 23, 0.3);
$background-color_8: rgba(23, 23, 23, 0.7);
$background-color_9: rgba(238, 238, 238, 0.7);
$background-color_10: rgba(238, 238, 238, 0.5);

.notification.critical {
		>box {
			box-shadow: inset 0 0 0.5em 0 #e67090;
		}
	}
	.notification {
		>box {
			border-radius: 4.5px;
			padding: 9px;
			all: unset;
			box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.6);
			margin: 9px;
			border: 1px solid rgba(238, 238, 238, 0.04);
			border-radius: 15.3px;
			background-color: $background-color_6;
			color: $color_2;
			padding: 16.2px;
			border-radius: 9px;
			* {
				font-size: 16px;
				font-family: $font-family_1;
			}
		}
		&:hover {
			.close-button {
				box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
				background-color: $background-color_1;
				color: $color_1;
				background-color: $background-color_2;
			}
		}
		.title {
			margin-right: 9px;
			color: $color_2;
			font-size: 1.1em;
		}
		.time {
			color: $color_3;
		}
		.description {
			font-size: .9em;
			color: $color_3;
			min-width: 350px;
		}
		.icon {
			border-radius: 7.2px;
			margin-right: 9px;
		}
		.icon.img {
			border: 1px solid rgba(238, 238, 238, 0.03);
		}
		.actions {
			button {
				all: unset;
				transition: 200ms;
				border-radius: 9px;
				color: $color_2;
				background-color: $background-color_3;
				box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
				border-radius: 7.2px;
				font-size: 1.2em;
				padding: 4.5px 9px;
				margin: 9px 4.5px 0;
				* {
					font-size: 16px;
					font-family: $font-family_1;
				}
				&:focus {
					box-shadow: inset 0 0 0 1px #51a4e7;
					background-color: $background-color_1;
					color: $color_1;
				}
				&:hover {
					box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
					background-color: $background-color_1;
					color: $color_1;
				}
				&:active {
					box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
					background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
					background-color: $background-color_4;
					color: $color_4;
					&:hover {
						box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
					}
				}
				&:checked {
					box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
					background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
					background-color: $background-color_4;
					color: $color_4;
					&:hover {
						box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
					}
				}
				&:disabled {
					box-shadow: none;
					background-color: $background-color_5;
					color: $color_5;
				}
				&:first-child {
					margin-left: 0;
				}
				&:last-child {
					margin-right: 0;
				}
			}
			button.on {
				box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
				background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
				background-color: $background-color_4;
				color: $color_4;
				&:hover {
					box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
				}
			}
			button.active {
				box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
				background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
				background-color: $background-color_4;
				color: $color_4;
				&:hover {
					box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
				}
			}
		}
		button.close-button {
			all: unset;
			transition: 200ms;
			border-radius: 9px;
			color: $color_2;
			background-color: $background-color_5;
			background-image: none;
			box-shadow: none;
			margin-left: 9px;
			border-radius: 7.2px;
			min-width: 1.2em;
			min-height: 1.2em;
			* {
				font-size: 16px;
				font-family: $font-family_1;
			}
			&:focus {
				box-shadow: inset 0 0 0 1px #51a4e7;
				background-color: $background-color_1;
				color: $color_1;
			}
			&:hover {
				box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
				background-color: $background-color_1;
				color: $color_1;
				background-color: $background-color_2;
			}
			&:active {
				box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
				background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
				background-color: $background-color_4;
				color: $color_4;
				background-image: linear-gradient(#e67090, #e67090);
				&:hover {
					box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
				}
			}
			&:checked {
				box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
				background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
				background-color: $background-color_4;
				color: $color_4;
				&:hover {
					box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
				}
			}
			&:disabled {
				box-shadow: none;
				background-color: $background-color_5;
				color: $color_5;
			}
		}
		button.close-button.on {
			box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
			background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
			background-color: $background-color_4;
			color: $color_4;
			&:hover {
				box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
			}
		}
		button.close-button.active {
			box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
			background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
			background-color: $background-color_4;
			color: $color_4;
			&:hover {
				box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
			}
		}
	}