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

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

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

  &__button {
    margin-top: 10px;
    padding: 6px 12px;
    background-color: $accent;
    border-radius: $default_border_radius;
    color: #fff;
    border: none;
    cursor: pointer;
  }

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

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