//
// Alerts
// --------------------------------------------------

.alert {
  padding: $alert-padding;
  margin-bottom: $line-height-computed;
  border-radius: $alert-border-radius;
  font-size: $font-size-large;
  line-height: $grid-unit-y * 3;
  position: relative;
  font-weight: $font-weight-regular;

  @each $theme, $map in $themes {
    .#{$theme} & {
      $box-shadow: map-get($map, box-shadow-new);

      @include box-shadow($box-shadow);
    }
  }

  // Headings for larger alerts
  h4 {
    margin-top: 0;
    color: inherit;
  }

  .alert-link {
    font-weight: $alert-link-font-weight;
  }

  .alert-title {
    font-weight: $font-weight-bold;
  }

  // Elements
  // -----------------------

  &-close {
    position: absolute;
    top: $grid-unit-y * 2;
    right: $grid-unit-y * 2 + 6;
    color: $color-white-rgba-24;

    &:before {
      content: "\f00d";
      font-family: $font-family-awesome;
      font-weight: $font-family-awesome-weight;
      vertical-align: bottom;
    }

    &:hover,
    &:focus {
      color: $color-white;
    }

    &-center {
      top: 50%;

      @include transform(translateY(-50%));
    }
  }

  &-dismissable,
  &-dismissible {
    padding-right: ($alert-padding + 20);

    // Adjust close link position
    .close {
      position: relative;
      top: -2px;
      right: -21px;
      color: inherit;
    }
  }

  // Style Variations
  // -----------------------

  &-default {
    @include alert-variant(
      "alert-default-bg",
      $alert-default-border,
      "alert-default-text",
      $alert-default-title-color
    );

    .btn-default {
      @include themes-value(background, $color-white-rgba-08);
      @include themes-value(color, $color-white-rgba-87);

      &:hover {
        @include themes-value(background, $color-white-rgba-12);
      }
    }
  }

  &-primary {
    @include alert-variant(
      "alert-primary-bg",
      $alert-primary-border,
      "alert-primary-text",
      $alert-primary-title-color
    );
  }

  &-success {
    @include alert-variant(
      "alert-success-bg",
      $alert-success-border,
      "alert-success-text",
      $alert-success-title-color
    );
  }

  &-info {
    @include alert-variant(
      "alert-info-bg",
      $alert-info-border,
      "alert-info-text",
      $alert-info-title-color
    );
  }

  &-warning {
    @include alert-variant(
      "alert-warning-bg",
      $alert-warning-border,
      "alert-warning-text",
      $alert-warning-title-color
    );
  }

  &-danger {
    @include alert-variant(
      "alert-danger-bg",
      $alert-danger-border,
      "alert-danger-text",
      $alert-danger-title-color
    );
  }
}