$alert-status : (
        primary: var(--bs-primary),
        secondary: var(--bs-secondary),
        success: var(--bs-success),
        warning: var(--bs-warning),
        danger: var(--bs-danger),
        info: var(--bs-info),
        light: var(--bs-light),
        dark: var(--bs-dark),
);

@mixin alert-variant($color, $status) {

  @if ($status== "outlined") {
    color  : $g-900;
    background-color : $white;
    border-left      : 8px solid $color;
  } @else {
    background-color : $color;
    @if ($color== var(--bs-info) or  $color== var(--bs-dark)) {
      color: $white;
      .alert-link {
        color : $white;
        text-decoration: underline;
      }
    } @else {
      border : 1.33px solid $g-900;
      color  : $g-900;
      .alert-link {
        color : $g-900;
        text-decoration: underline;
      }
    }
  }

  hr {
    border-top-color : $color;
  }
}

@each $state, $value in $alert-status {
  .alert-filled-#{$state} {
    @include alert-variant($value, "filled");
  }
  .alert-#{$state} {
    @include alert-variant($value, "outlined");
  }
}

.alert-dismissible {
  .btn-close {
    padding: 1rem 1rem;
    &:focus {
      box-shadow: none;
      color: $black;
      opacity: 0.75;
    }
  }
}

.alert {
  text-align: start;
  font-size: $font-size-sm;
  line-height: $line-height-20;
  padding: 0.625rem 1rem 0.625rem 0.5rem;
  position: relative;

  & > span[class*="ri-"] {
    font-size: $font-size-base;
  }
  .alert-header {
    font-weight : $font-weight-600;
    color:inherit;

    & > span[class*="ri-"] {
      font-weight: $font-weight-normal;
    }
  }
}

#notif-container {
  position: fixed;
  top: 5%;
  left: 20%;
  width: 60%;
  z-index: 3500;
  min-height: 0;

  & .alert {
    animation: slidefromtop 1s;
  }
}

.no-simple-graph {
  height: 300px;
}

#update-container {
  margin-top: 10px;
}

