Notifications

.notifications {
	.btn-notifications {
		position: absolute;
		top: 0;
		right: 0;

		width: 20rem;
		height: 20rem;

		background: $color-irma-slate;
		color: white;

		transition: background $transition;

		&:hover, &:focus {
			background: $color-irma-navy;
		}

		&.-active {
			background: $color-irma-navy;
		}

		&::after {
			content: attr(data-total);

			position: absolute;
			top: 3rem;
			right: 3rem;

			display: block;
			width: 5rem;
			height: 5rem;

			background: $color-irma-danger;
			border-radius: 5rem;

			@include font-primary-semibold;
			text-align: center;
			@include font-size-small;
			line-height: 5.6rem;
		}

		.svg-wrap {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			width: 6rem;
			height: 6rem;

			.svg {
				* {
					fill: currentColor;
				}
			}
		}		
	}

	.notifications-modal {
		$component-width: 80rem;
		$header-height: calc(10rem + 5px);
		$border-color: $color-irma-silver;
		$background-color: #FAFBFB;
		$tab-count: 1;

		position: absolute;
		top: 20rem;
		right: 0;

		width: $component-width;
		overflow: hidden;

		background: $background-color;
		visibility: hidden;
		opacity: 0;

		transition: all $transition;

		&.-active {
			visibility: visible;
			opacity: 1;
		}

		&.-active {
			.notifications-header {
				background: $color-irma-navy;
			}
		}

		@for $i from 0 through ($tab-count - 1) {
			&[data-index="#{$i}"] {
				.notifications-header {
					&::after {
						transform: translateX(#{$i * $component-width / $tab-count});
					}
				}
			}
		}

		.notifications-header {
			position: relative;

			display: flex;
			height: $header-height;

			background: $color-irma-slate;
			color: white;
			filter: drop-shadow(0 0 10px rgba(black, 0.14));
		
			&::after {
				content: '';

				position: absolute;
				bottom: 0;

				display: block;
				height: 5px;
				width: (100% / $tab-count);

				background: $color-irma-danger;

				transition: all 0.3s $ease-out-quad;
			}

			.tab {
				position: relative;

				width: (100% / $tab-count);
				height: 100%;

				text-align: left;
				font-size: 0;

				&.-active {
					.text {
						opacity: 1;
					}
				}
			}

			.text {
				padding: 0 5rem;

				opacity: 1;
				color: white;

				@include font-primary-bold;
				text-transform: uppercase;
				@include font-size-small;
				line-height: $header-height;

				transition: opacity 0.3s;
			}
		}

		.tab-panel {
			display: none;
			max-height: 75rem;
			padding: 0;
			margin: 0;
			overflow-y: auto;

			color: $color-irma-slate;

			@include font-size-small;

			&.-active {
				display: block;
			}

			.list-heading {
				padding-bottom: 3rem;

				border-bottom: 1px solid $border-color;

				.text {
					opacity: 0.7;
				}
			}

			ul {
				padding: 0;
				margin: 0;

				list-style-type: none;
			}

			.list-item {
				position: relative;

				margin: 0;

				border-bottom: 1px solid $border-color;

				a {
					display: block;
					padding: 4rem;

					color: inherit;

					text-decoration: none;

					transition: all $transition;

					&.-new {
						background: rgba($color-irma-fog, 0.15);
					}

					&:hover, &:focus {
						background: rgba($color-irma-fog, 0.35);
					}
				}
			}

			.item-title {
				@include font-primary-bold;
				@include font-size;
			}

			.item-description {
				margin-top: 1rem;

				.text {
					opacity: 0.7;
				}
			}

			.item-date {
				.text {
					opacity: 0.5;
				}
			}

			.load-previous {
				padding: 6rem 0;

				color: $color-irma-link;

				text-decoration: underline;
				text-align: center;
			}
		}
	}

	.no-results {
		padding: 4rem;
	}
}