@use 'variables' as *;

.simplestats-notification-wrapper {
	position: fixed;
	right: 0;
	top: 32px;
	width: 440px;
	background-color: #fff;
	bottom: 0;
	z-index: 1;
}

.simplestats-notification-inner {
	height: 100%;
}

// Vue transition class start
.simplestats-notification-enter-active {
	transition: all 0.3s ease-out;
}

.simplestats-notification-leave-active {
	transition: all 0.3s ease-out;
}

.simplestats-notification-enter-from,
.simplestats-notification-leave-to {
	transform: translateX(200px);
	opacity: 0;
}

// Vue transition class end.

.simplestats-notification-top-section {
	background-color: $primary-button-bg;
	padding: 17px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	&-left {
		color: #fff;

		span {
			font-size: 18px;
			font-weight: 700;
			vertical-align: middle;
			margin-left: 10px;
		}

		svg {
			vertical-align: middle;
		}
	}

	&-right {
		color: #fff;

		span {
			vertical-align: middle;
			text-decoration: underline;
			margin-right: 15px;
			cursor: pointer;
		}

		button {
			border: 0 none;
			background-color: transparent;
			color: #fff;
			padding: 0;
			cursor: pointer;

			svg {
				vertical-align: middle;
			}
		}
	}
}

.simplestats-notification-content-section {
	padding: 0 20px;
	overflow-y: auto;
	height: calc(100% - 54px);
}

.simplestats-empty-notification {
	color: #7c869d;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.simplestats-empty-notification-icon {
	width: 90px;
	color: #e2e4e9;
}

.simplestats-empty-notification p {
	margin: 20px 0 0 0;
}
