@import "../../scss/xmat-vars";
@import "../../scss/xmat-mixins";

$theme-types: primary, accent, warn;
$custom-types: success, info, warning, error, question, disabled;

xmat-alert-box {
  padding: 2px 0;
  display: block;
  overflow: hidden;
  font-size: mat-font-size($xmat-typography-config, body-1);
  mat-card.xmat-alert-box {
    @each $type in $theme-types {
      $bg: map-get($xmat-colors, $type);
      &.xmat-alert-box-#{$type} {
        background-color: $bg;
        color: xmat-best-text-color($bg);
      }
    }
    @each $type in $custom-types {
      $bg: map-get($xmat-colors, $type);
      $color: map-get($xmat-colors, #{$type}-text);
      &.xmat-alert-box-#{$type} {
        background-color: $bg;
        color: $color;
      }
      &.xmat-alert-box-fade.xmat-alert-box-#{$type} {
        background-color: rgba($bg, 0.5);
        color: rgba($color, 0.5);
      }
    }
  }
  &.xmat-alert-box-fade {
    mat-card.xmat-alert-box {
      @each $type in $theme-types {
        $bg: rgba(map-get($xmat-colors, $type), 0.5);
        &.xmat-alert-box-#{$type} {
          background-color: $bg;
          color: xmat-best-text-color($bg);
        }
      }
      @each $type in $custom-types {
        $bg: map-get($xmat-colors, $type);
        $color: map-get($xmat-colors, #{$type}-text);
        &.xmat-alert-box-#{$type} {
          background-color: rgba($bg, 0.5);
          color: rgba($color, 0.5);
        }
      }
    }
  }
}