.alert {
  position: fixed;
  right: 0;
  bottom: 0;
  top: $alert-top;
  left: $alert-left;
  background: $alert-bg;
  z-index: $zindex-alert;
  overflow: hidden;
  outline: 0;
  -webkit-overflow-scrolling: touch;
}

.alert-dialog {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  width: $alert-dialog-width;
  height: $alert-dialog-height;
  background: $alert-dialog-bg;
  padding: $alert-dialog-padding;
  border-radius: $alert-dialog-border-radius;
  animation: bounceIn $alert-animation-duration ease-in-out;
}

.alert-addon {
  font-size: $alert-addon-font-size;

  i {
    display: block;
  }
}

.alert-body {
  padding: $alert-body-padding;
}

.alert-footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  padding: 0.8rem;
  justify-content: space-around;
  border-top: 1px solid $alert-footer-border-color;
  border-radius: 0 0 $alert-dialog-border-radius $alert-dialog-border-radius;
  cursor: pointer;
  color: $alert-btn-color;

  &:hover {
    background: $alert-btn-hover-bg;
  }
}