@import "~ui/styles/variables";

.vis-alerts {
  position: relative;
}

  .vis-alerts-tray {
    position: absolute;
    bottom: 5px;
    left: 0px;
    right: 0px;
    list-style: none;
    padding: 0;

    transition-property: opacity;
    transition-delay: 50ms;
    transition-duration: 50ms;
  }

  .vis-alerts-icon {
    margin: 0;
    padding: 0 10px;
    flex: 0 0 auto;
    align-self: center;
  }

  .vis-alerts-text {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
  }

  .vis-alerts-close {
    cursor: pointer;
  }

  .vis-alert {
    margin: 0 10px 10px;
    padding: 5px 10px 5px 5px;
    color: @alert-vis-alert-color;
    border-radius: @alert-border-radius;
    border: 1px solid;
    border-color: @alert-vis-alert-border;
    display: flex;
  }

  .vis-alert-success {
    .alert-variant(fade(@alert-success-bg, 75%); @alert-success-border; @alert-success-text);
  }

  .vis-alert-info {
    .alert-variant(fade(@alert-info-bg, 75%); @alert-info-border; @alert-info-text);
  }

  .vis-alert-warning {
    .alert-variant(fade(@alert-warning-bg, 75%); @alert-warning-border; @alert-warning-text);
  }

  .vis-alert-danger {
    .alert-variant(fade(@alert-danger-bg, 75%); @alert-danger-border; @alert-danger-text);
  }