@import '../settings/base';

$alert_css_prefix: #{$css_prefix}_c_alert;

@mixin type($type, $color, $bgColor, $border_color: null) {
  &--#{$type} {
    color: $color;
    background-color: $bgColor;
    @if $border_color {
      border-color: $border_color;
    }
  }
}

.#{$alert_css_prefix} {
  position: relative;
  padding: 12px 20px;
  border-radius: 2px;

  &--with_desc {
    .#{$alert_css_prefix}__message {
      font-size: 16px;
      line-height: 20px;
      font-weight: bold;
    }
  }

  &--is_closable {
    padding-right: 60px;
  }

  &--center {
    .#{$alert_css_prefix}__message {
      text-align: center;
    }

    .#{$alert_css_prefix}__desc {
      text-align: center;
    }
  }

  &--dark {
    &.#{$alert_css_prefix} {
      @include type(error, $color_gray_k9, $color_primary_o5);
      @include type(info, $color_gray_k9, $color_blue);
      @include type(success, $color_gray_k9, $color_gr);
      @include type(warning, $color_gray_k9, $color_ye);
    }
  }

  &--light {
    border-width: 1px;
    border-style: solid;
    &.#{$alert_css_prefix} {
      @include type(error, $color_red_r5, $color_red_r1, $color_red_r2);
      @include type(info, $color_blue_b5, $color_blue_b1, $color_blue_b2);
      @include type(success, $color_gr_g5, $color_gr_g1, $color_gr_g2);
      @include type(warning, $color_ye_y5, $color_ye_y1, $color_ye_y2);
    }
  }

  &__message {
    font-size: 14px;
    line-height: $lineheight_small;
  }

  &__desc {
    margin-top: 8px;
    font-size: 14px;
    line-height: $lineheight_base;
  }

  &__icon_close {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 12px;
    color: $color_gray_k9;
  }
}