.OpalNotification__container {
	position: fixed;
	top: 10px;
	right: 20px;
	z-index: 300;
	width: 400px;
}
	.OpalNotification__container .OpalNotification__bar {
		position: relative;
		right: -200px;
		box-sizing: border-box;
		margin: 10px 0;
		padding: 10px 40px 10px 20px;
		width: 400px;
		border-radius: 3px;
		background: hsl(208,18%,40%);
		box-shadow: 0 2px 4px rgba(0,0,0,.3);
		color: #fff;
		opacity: 0;
		transition: right .2s linear, opacity .2s linear;
	}

	.OpalNotification__container .OpalNotification__bar[view_type=primary] {
		background: hsl(208,94%,54%);
	}
	.OpalNotification__container .OpalNotification__bar[view_type=success] {
		background: hsl(148,76%,40%);
	}
	.OpalNotification__container .OpalNotification__bar[view_type=danger] {
		background: hsl(348,92%,58%);
	}

	.OpalNotification__container .OpalNotification__bar[has_icon][icon_size=xs] {
		padding-left: 48px;
	}
	.OpalNotification__container .OpalNotification__bar[has_icon][icon_size=s] {
		padding-left: 52px;
	}
	.OpalNotification__container .OpalNotification__bar[has_icon][icon_size=m] {
		padding-left: 56px;
	}

	.OpalNotification__container .OpalNotification__bar[shown] {
		right: 0;
		opacity: 1;
	}
		.OpalNotification__container .OpalNotification__icon {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 16px;
			margin: auto;
		}

		.OpalNotification__container .OpalNotification__btnHide {
			position: absolute;
			top: 0;
			right: 10px;
			bottom: 0;
			margin: auto;
			padding: 0;
			width: 24px;
			height: 24px;
			border: 0;
			background: transparent;
			color: #fff;
			opacity: .7;
			cursor: pointer;
			transition: opacity .1s linear;

			&:hover {
				opacity: 1;
			}

			&:focus {
				outline: none;

				body:not(._noFocusHighlight) & {
					outline: 1px solid hsl(208,94%,54%);
				}
			}

			&:active {
				transform: translateY(1px);
			}

			&[hide] {
				display: none;
			}
		}
			.OpalNotification__container .OpalNotification__btnHideIcon {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				display: block;
				margin: auto;
				width: 16px;
				height: 16px;
			}

@component OpalNotification {
}