@use '../../shared/styles/variables' as *;

.notification {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 1200;

  width: min(520px, calc(100vw - 32px));
  //min-height: 76px;
  padding: 18px 18px;
  border-radius: 18px;
  background: $color-surface;
  overflow: hidden;

  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 32px;
  align-items: flex-start;
  gap: 14px;

  box-shadow: $shadow-notification;

  opacity: 0;
  transform: translateY(14px) scale(0.98);
  pointer-events: auto;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;

  &.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
}

.notification__action {
  width: fit-content;
  margin-top: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: $blue;
  font: inherit;
  font-size: $font-size-14;
  font-weight: 700;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.notification__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: $blue;
  transform-origin: left center;
  animation-name: notification-progress;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

.notification__icon {
  margin-top: 3px;
}

.notification__content {
  min-width: 0;
  margin-top: 3px;
  text-align: left;
}

.notification__title {
  color: $color-text;
  font-size: $font-size-20;
  font-weight: 600;
  line-height: 1.2;
}

.notification__description {
  margin-top: 7px;
  color: $gray50;
  font-size: $font-size-14;
  font-weight: 500;
  line-height: 1.35;
}

.notification__close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 10px;
  background: $transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: $gray50;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease;

  &:hover {
    background: $color-bg;
    color: $color-text;
  }
}

.notification--success {
  .notification__icon,
  .notification__title {
    color: $blue;
  }
}

.notification--error {
  .notification__icon,
  .notification__title {
    color: $red;
  }

  .notification__progress {
    background: $red;
  }
}

@keyframes notification-progress {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

@media (max-width: 640px) {
  .notification {
    right: 16px;
    bottom: 16px;
    min-height: 68px;
    padding: 15px;
  }

  .notification__title {
    font-size: $font-size-17;
  }
}
