:root {
  /*NOTIFICATION-CONTAINER*/
  --notification-container-width: 23rem;
  --notification-container-padding: 0.58rem;

  /*NOTIFICATION*/
  --notification-border-radius: 5px;
  --notification-margin-top: 0.55rem;
  --notification-min-height: 4.1rem;
  --notification-color: var(--title-color);
  --notification-background-color: var(--container-color);
  --notification-blur: blur(8px);

  /*NOTIFICATION-ICON*/
  --notification-icon-font-size: 1.5rem;
  --notification-icon-with: 2.9rem;
  --notification-icon-padding: 1.1rem 1rem;

  /*NOTIFICATION-DATA*/
  --notification-data-padding: 0.58rem 0;

  /*NOTIFICATION-TITLE*/
  --notification-tittle-font-size: 0.88rem;

  /*NOTIFICATION-MESSAGE*/
  --notification-message-font-size: 0.76rem;

  /*NOTIFICATION-CLOSE-BUTTON*/
  --notification-close-btn-display: initial;
  --notification-close-btn-font-size: 1rem;
  --notification-close-btn-padding: 0.58rem;
}

.notification-container {
  z-index: 100;
  position: fixed;
  width: var(--notification-container-width);
  /* min-width: 90vw; */
  padding: var(--notification-container-padding);
}

/*
  CSS regex with work 'top'
*/

.notification-container[class*='top'] {
  top: 0;
}

.notification-container[class*='left'] {
  left: 0;
}

.notification-container[class*='right'] {
  right: 0;
}

.notification-container[class*='bottom'] {
  bottom: 0;
}

/*.notification > * {
  pointer-events: none;
}*/

.notification {
  width: 100%;
  display: flex;
  user-select: none;
  border-width: 1px;
  border-style: solid;
  position: relative;
  white-space: pre-wrap;
  color: var(--notification-color);
  margin-top: var(--notification-margin-top);
  /* min-height: var(--notification-min-height); */
  backdrop-filter: var(--notification-blur);
  border-radius: var(--notification-border-radius);
  -webkit-backdrop-filter: var(--notification-blur);
  background-color: var(--notification-background-color);
  /* box-shadow: 0px 0px 20px -1px rgba(0, 0, 0, 0.5); */
  /* -webkit-overflow-scrolling: touch; */
  transition: transform 0.2s, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.notification-link {
  width: 100%;
  display: flex;
  color: inherit
}
.notification--success {
  border-color: var(--bs-success);
}

.notification--error {
  border-color: var(--bs-danger);
}

.notification--warning {
  border-color: var(--bs-warning);
}

.notification--info {
  border-color: var(--bs-info);
}

.notification--move {
  transform: translate3d(var(--notification-translateX), 0, 0);
  opacity: var(--notification-opacity);
  transition: transform 0s;
}

.notification-container[class*='top'] .notification--show {
  animation: showNotificationFadeUp 0.3s linear;
}

.notification-container[class*='bottom'] .notification--show {
  animation: showNotificationFadeDown 0.3s linear;
}

@keyframes showNotificationFadeDown {
  from {
    transform: translate3d(0, -25px, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0px, 0);
    opacity: 1;
  }
}

@keyframes showNotificationFadeUp {
  from {
    transform: translate3d(0, 25px, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0px, 0);
    opacity: 1;
  }
}

.notification--close {
  animation-duration: 0.5s, 0.2s;
  animation-fill-mode: forwards, none;
  animation-delay: 0s, 0.5s;
  animation-timing-function: ease-in, linear;
}

.notification--close.close--link {
  animation-name: scaleNotification, collapseNotification;
}

.notification-container[class*='left'] .notification--close.close--click {
  animation-name: reboundLeftNotification, collapseNotification;
}

.notification-container[class*='right'] .notification--close.close--click {
  animation-name: reboundRightNotification, collapseNotification;
}

.notification-container[class*='left'] .notification--close.close--timeout,
.notification--close.close--left {
  animation-name: toLeftNotification, collapseNotification;
}

.notification-container[class*='right'] .notification--close.close--timeout,
.notification--close.close--right {
  animation-name: toRightNotification, collapseNotification;
}

@keyframes scaleNotification {
  0% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 0;
    transform: scale3d(0.5, 0.5, 0.5);
  }
}

@keyframes reboundRightNotification {
  30% {
    transform: translate3d(-10%, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(110%, 0, 0);
    opacity: 0;
  }
}

@keyframes reboundLeftNotification {
  30% {
    transform: translate3d(10%, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(-110%, 0, 0);
    opacity: 0;
  }
}

@keyframes toRightNotification {
  to {
    transform: translate3d(110%, 0, 0);
    opacity: 0;
  }
}

@keyframes toLeftNotification {
  to {
    transform: translate3d(-110%, 0, 0);
    opacity: 0;
  }
}

@keyframes collapseNotification {
  from {
    margin-top: 6px;
    margin-bottom: 0px;
  }
  to {
    margin-top: 0px;
    margin-bottom: calc(var(--notification-height) * -1);
  }
}

.notification-progress-bar {
  width: 100%;
  height: 5px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

.notification--success > .notification-progress-bar {
  background-color: var(--bs-success);
}

.notification--error > .notification-progress-bar {
  background-color: var(--bs-danger);
}

.notification--warning > .notification-progress-bar {
  background-color: var(--bs-warning);
}

.notification--info > .notification-progress-bar {
  background-color: var(--bs-info);
}

.notification-container[class*='bottom'] .notification:last-child .notification-progress-bar {
  animation: timeOutNotification forwards var(--notification-duration) ease-out;
}

.notification-container[class*='top'] .notification:first-child .notification-progress-bar {
  animation: timeOutNotification forwards var(--notification-duration) ease-out;
}

@keyframes timeOutNotification {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

.notification:is(.notification--hover, .notification--move) .notification-progress-bar {
  animation-play-state: paused !important;
}

.notification:matches(.notification--hover, .notification--move) .notification-progress-bar {
  animation-play-state: paused !important;
}

/*.notification-container[class*='bottom'] .notification:last-child:is(.notification--hover, .notification--move) .notification-progress-bar {
  animation-play-state: paused;
}

.notification-container[class*='bottom'] .notification:last-child:matches(.notification--hover, .notification--move) .notification-progress-bar {
  animation-play-state: paused;
}

.notification-container[class*='top'] .notification:first-child:is(.notification--hover, .notification--move) .notification-progress-bar {
  animation-play-state: paused;
}

.notification-container[class*='top'] .notification:first-child:matches(.notification--hover, .notification--move) .notification-progress-bar {
  animation-play-state: paused;
}*/

.notification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--notification-icon-with);
  padding: var(--notification-icon-padding);
  font-size: var(--notification-icon-font-size);
}

.notification-data {
  margin-top: auto;
  margin-bottom: auto;
  padding: var(--notification-data-padding);
  overflow: hidden;
}

.notification-title {
  font-size: var(--notification-tittle-font-size);
}

.notification-message {
  /* text-align: justify;
    text-justify: inter-word; */
  font-size: var(--notification-tittle-font-size);
}

/*.notification-success > .notification-icon::before {
  content: '\e9c3';
}

.notification-warning > .notification-icon::before {
  content: '\f071';
}

.notification-info > .notification-icon::before {
  content: '\f06a';
  font-size: 1em;
}

.notification-error > .notification-icon::before {
  content: '\f7b9';
  font-size: 1.22em;
}
.notification-close-btb::before {
  content: '\f00d';
}
*/

.notification-close-btn {
  cursor: pointer;
  pointer-events: fill;
  margin-left: auto;
  vertical-align: top;
  -webkit-tap-highlight-color: transparent;
  display: var(--notification-close-btn-display);
  padding: var(--notification-close-btn-padding);
  font-size: var(--notification-close-btn-font-size);
}

@media screen and (max-width: 500px) {
  :root {
    /*NOTIFICATION CONTAINER*/
    --notification-container-width: 100%;
    /*NOTIFICATION-DATA*/
    --notification-data-padding: 0.58rem 0.98rem 0.58rem 0;

    /*NOTIFICATION-CLOSE-BUTTON*/
    --notification-close-btn-display: none;
  }
}