@import (reference) '../../../../assets/styles/shared';

:local(.Notification) {
	bottom: 0;
    position: absolute;
    right: 0;
    left: 0;
    max-height: 150px;
    overflow-y: auto;
    background-color: @color-almostblack;
    overflow-x: hidden;
}

:local(.Notification__container) {
  background: transparent;
  position: relative;
}

:local(.Notification__body) {
  color: #383b41;
  border-radius: 2px;
  background-color: @color-white;
  padding: 8px 11px;
  display: flex;
  align-items: center;
}

:local(.Notification__bodyText) {
	display: flex;
	flex-grow: 1;
  max-width: 330px;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  margin-right: 5px;
}

:local(.Notification__close) {
  border: 0;
  background: url(../../../../assets/images/notification-close.svg);
  background-repeat: no-repeat;
  min-width: 23px;
  min-height: 23px;
  cursor: pointer;
}

:local(.Notification__close:focus) {
  outline: none;
}

:local(.Notification__msgContainer) {
}

:local(.Notification__toast) {
	padding: 0;
	margin: 5px 10px;
	font-size: 14px;
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	letter-spacing: normal;
	color: #383b41;
	max-height: unset;
 	overflow-y: auto;
 	min-height: 47px;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: translate(0px, 15px);
  }

  50% {
    opacity: 1;
    transform: translate(0px);
  }
}

:local(.zoomIn) {
  animation-name: zoomIn;
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  to {
    opacity: 0;
  }
}

:local(.zoomOut) {
  animation-name: zoomOut;
}

:local(.animate) {
  animation-duration: 600ms;
}