.vis-alerts {
  position: relative;

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

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

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

    &-success {
      .alert-variant(fade(@alert-success-bg, 75%); @alert-success-border; @alert-success-text);
    }
    &-info {
      .alert-variant(fade(@alert-info-bg, 75%); @alert-info-border; @alert-info-text);
    }
    &-warning {
      .alert-variant(fade(@alert-warning-bg, 75%); @alert-warning-border; @alert-warning-text);
    }
    &-danger {
      .alert-variant(fade(@alert-danger-bg, 75%); @alert-danger-border; @alert-danger-text);
    }
  }

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

  &-text {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
  }
}