/*============================
    42. Notifications
============================*/

@use "../utils/mixins" as *;
@use '../variables' as *;

.notification-itemone {
	padding: 20px;
	margin-bottom: 16px;
	border-radius: $border-radius-md;
	box-shadow: $box-shadow;
	position: relative;
	transition: all 0.6s;
	cursor: pointer;
	&:hover {
		background-color: $light;
		transform: translateY(-10px);
		.btn-error {
			opacity: 1;
		}
	}
	.avatar {
		width: 48px;
		height: 48px;
	}
	h6 {
		span {
			color: $gray-900;
			font-weight: $font-weight-semibold;
		}
	}
	p {
		color: $gray-900;
		@include respond-below(sm) {
			font-size: 14px;
		}
	}
	.btn-error {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 20px;
		margin: auto;
		height: 32px;
		opacity: 0;
		transition: all 0.6s;
		display: flex;
		align-items: center;
		@include respond-below(lg) {
			top: 20px;
			bottom: unset;
			font-size: 13px;
			padding: 5px 10px;
			height: 30px;
		}
	}
}
.notification-header {
	margin-bottom: 40px;
    @include respond-below(lg) {
        margin-bottom: 20px;
    }
	.notirange-picker {
		border: 1px solid $gray-100;
		padding: 7px 14px;
		font-size: 14px;
		color: $gray-900;
		border-radius: $border-radius-sm;
		box-shadow: $box-shadow;
	}
}