.ng-toast-alert {
  $icon-size: $grid-unit-y * 3;
  $border-size: ceil($grid-unit-y * 0.5);

  padding: $panel-padding-y $panel-padding-x $panel-padding-y $grid-unit-y * 7 +
    $icon-size + $border-size;
  font-weight: $font-weight-medium;
  width: $grid-unit-y * 40;
  position: relative;
  text-align: left;
  margin-bottom: $grid-unit-y * 3;

  @include themes(background, panel-bg);
  @include themes(color, color-new-heading);

  @include border-radius($panel-border-radius);
  @include box-shadow-themes(box-shadow-new-2);

  &:before {
    content: " ";
    display: block;
    position: absolute;
    width: $border-size;
    top: $grid-unit-y * 2;
    bottom: $grid-unit-y * 2;
    left: $grid-unit-y * 3;

    @include themes(background, color-new-body-light);
    @include border-radius(2px);
  }

  &:after {
    content: "\f05a";
    font-family: $font-family-awesome;
    font-weight: $font-family-awesome-weight;
    line-height: $icon-size;
    font-size: $icon-size;
    position: absolute;
    left: $grid-unit-y * 5 + $border-size;
    top: 50%;
    margin-top: -(ceil($icon-size * 0.5));

    @include themes(color, color-new-body-light);
  }

  &-dismissible {
    padding-right: $panel-padding-x + $grid-unit-x * 3;

    button.close {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: $panel-padding-x;
    }
  }

  &-warning {
    &:before {
      @include themes-value(background, $brand-warning);
    }

    &:after {
      content: "\f071";

      @include themes-value(color, $brand-warning);
    }
  }

  &-danger {
    &:before {
      @include themes-value(background, $brand-danger);
    }

    &:after {
      content: "\f06a";

      @include themes-value(color, $brand-danger);
    }
  }

  &-success {
    &:before {
      @include themes-value(background, $brand-success);
    }

    &:after {
      content: "\f058";

      @include themes-value(color, $brand-success);
    }
  }

  &-info {
    &:before {
      @include themes-value(background, $brand-info);
    }

    &:after {
      @include themes-value(color, $brand-info);
    }
  }
}