@use "../global/variables" as *;

.el-notification {
  border: 2px solid $primary !important;
  transition: all 0.3s ease !important;

  &__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: $primary_dark;
    animation: progress-animation linear forwards;

    &.success {
      background-color: $success;
    }
    &.error {
      background-color: $error;
    }
    &.info {
      background-color: $info;
    }
    &.warning {
      background-color: $warning;
    }
  }

  &__button {
    margin-top: 10px;
    padding: 6px 12px;
    background-color: $primary;
    border-radius: $less_border_radius;
    color: $main;
    border: none;
    cursor: pointer;
  }

  .el-notification__closeBtn {
    color: $primary !important;
  }
}

@keyframes progress-animation {
  0% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}