bramw_baserow/web-frontend/assets/scss/components/_alert.scss

.alert {
  border: 1px solid;
  border-radius: 3px;
  margin: 30px 0;
  padding: 16px;

  @include alert-style($color-primary-100, $color-primary-300, $color-primary-900, $color-primary-700, $color-primary-400);

  &.alert-has-icon {
    position: relative;
    padding-left: 72px;
  }

  &.alert-with-shadow {
    box-shadow: 0 2px 6px 0 rgba($black, 0.16);
  }
}

.alert-icon {
  position: absolute;
  left: 16px;
  top: 16px;
  background-color: #fff;
  border: 4px solid;
  width: 40px;
  height: 40px;
  line-height: 32px;
  text-align: center;
  border-radius: 100%;
}

.alert-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

.alert-content {
  margin: 0;
}

.alert-close {
  @include absolute(10px, 10px, auto, auto);
}

.alert-success {
  @include alert-style($color-success-100, $color-success-300, $color-success-900, $color-success-700, $color-success-400);
}

.alert-warning {
  @include alert-style($color-warning-100, $color-warning-300, $color-warning-900, $color-warning-700, $color-warning-400);
}

.alert-error {
  @include alert-style($color-error-100, $color-error-300, $color-error-900, $color-error-700, $color-error-400);
}