$prefixCls: za-message;

@mixin message-theme($color, $background, $border) {
  color: $color;
  background-color: $background;
  border-color: $border;
  @include onepx(top right bottom left, $border);
}

.#{$prefixCls} {
  display: flex;
  align-items: center;
  position: relative;
  padding: r(5) r(8);
  min-height: r(30);
  font-size: r(12);
  @include message-theme($button-default-border, $button-default-activebg, $button-default-border);

  &.theme-primary {
    @include message-theme($button-primary-border, $button-primary-activebg, $button-primary-border);
  }

  &.theme-info {
    @include message-theme($button-info-border, $button-info-activebg, $button-info-border);
  }

  &.theme-success {
    @include message-theme($button-success-border, $button-success-activebg, $button-success-border);
  }

  &.theme-warning {
    @include message-theme($button-warning-border, $button-warning-activebg, $button-warning-border);
  }

  &.theme-error {
    @include message-theme($button-error-border, $button-error-activebg, $button-error-border);
  }
}