// Name:            Alerts
//
// Component:       `alert`
//
// Modifiers:       `alert-info`
//                  `alert-success`
//                  `alert-warning`
//                  `alert-danger`
//                  `alert-dismissible`
//                  `alert-alt`
//                  `alert-icon`
//                  `page-alert`
//
// Markup:
//
// <!-- alert -->
// <div class="alert" role="alert">
//     <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span></button>
//     <p></p>
// </div>
//
// ========================================================================


// Variables
// ========================================================================
$alert-padding-horizontal:        20px !default;

$alert-list-padding-left:         13px !default;
$alert-list-item-padding-left:    7px !default;

$alert-icon-font-size:            $font-size-icon !default;
$alert-icon-padding-left:         45px !default;

$alert-close-opacity:             0.6 !default;
$alert-close-hover-opacity:       1 !default;


// link-color
$alert-primary-link-color:        $brand-primary-active !default;
$alert-success-link-color:        $brand-success-active !default;
$alert-info-link-color:           $brand-info-active !default;
$alert-warning-link-color:        $brand-warning-active !default;
$alert-danger-link-color:         $brand-danger-active !default;

// default
$alert-alt-color:                 $text-color !default;
$alert-alt-bg:                    rgba($bg-color-base, (80/100)) !default;
$alert-alt-close-color:           $gray !default;
$alert-alt-close-opacity:         0.6 !default;
$alert-alt-close-hover-opacity:   1 !default;

$alert-alt-primary-border:        $brand-primary !default;
$alert-alt-primary-text:          $brand-primary !default;

$alert-alt-success-border:        $brand-success !default;
$alert-alt-success-text:          $brand-success !default;

$alert-alt-info-border:           $brand-info !default;
$alert-alt-info-text:             $brand-info !default;

$alert-alt-warning-border:        $brand-warning !default;
$alert-alt-warning-text:          $brand-warning !default;

$alert-alt-danger-border:         $brand-danger !default;
$alert-alt-danger-text:           $brand-danger !default;

// Dark
$alert-dark-text:                  $color-white !default;

$alert-dark-alt-primary-border:    darken($brand-primary-active, 15%) !default;
$alert-dark-alt-success-border:    darken($brand-success-active, 15%) !default;
$alert-dark-alt-info-border:       darken($brand-info-active, 15%) !default;
$alert-dark-alt-warning-border:    darken($brand-warning-active, 15%) !default;
$alert-dark-alt-danger-border:     darken($brand-danger-active, 15%) !default;

$alert-dark-primary-bg:            $brand-primary !default;
$alert-dark-success-bg:            $brand-success !default;
$alert-dark-info-bg:               $brand-info !default;
$alert-dark-warning-bg:            $brand-warning !default;
$alert-dark-danger-bg:             $brand-danger !default;

$alert-social-icon-size: 30px !default;
$alert-social-padding-left: 65px !default;

$alert-social-text: $color-white !default;

// Component: Alert
// ========================================================================

.alert {
  padding-right: $alert-padding-horizontal;
  padding-left: $alert-padding-horizontal;
  ul {
    padding-left: $alert-list-padding-left;
    li {
      padding-left: $alert-list-item-padding-left;
    }
  }
  .panel > & {
    margin: 0;
  }

  h4 {
    margin-top: 0;
    color: inherit;
  }

  & > *:last-child {
    margin-bottom: 0;
  }
}


// Alternate styles
// -------------------------

.alert-alt {
  color: $alert-alt-color;
  background-color: $alert-alt-bg;
  border: none;
  border-left: 3px solid transparent;
  a,
  .alert-link {
    text-decoration: none;
  }
}



// Modifier: `alert-dismissible`
// -------------------------

.alert-dismissible {
  padding-right: ($alert-padding-horizontal + 20);
  .close {
    top: 0;
    text-decoration: none;
    opacity: $alert-close-opacity;
    &:hover,
    &:focus {
      opacity: $alert-close-hover-opacity;
    }
  }
  &.alert-alt {
    .close {
      color: $alert-alt-close-color;
      opacity: $alert-alt-close-opacity;
      &:hover,
      &:focus {
        color: $alert-alt-close-color;
        opacity: $alert-alt-close-hover-opacity;
      }
    }
  }
}


// Modifier: `alert-icon`
// -------------------------

.alert-icon {
  position: relative;
  padding-left: $alert-icon-padding-left;
  > .icon {
    position: absolute;
    top: ($alert-padding + 3px);
    left: $alert-padding-horizontal;
    font-size: $alert-icon-font-size;

    @include icon-fixed-width();
  }
}

// Modifier: `alert-avatar`
// -------------------------

.alert-avatar {
  position: relative;
  padding-top: $alert-padding-horizontal;
  padding-bottom: $alert-padding-horizontal;
  padding-left: (($avatar-size + $alert-padding + 20px));
  > .avatar {
    position: absolute;
    top: ($alert-padding - 3px);//12px
    left: $alert-padding-horizontal;
    // width: $avatar-size;//30px;
  }
}

// Modifier: `page-alert`
// -------------------------

.page-alert {
  .alert-wrap {
    max-height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;

    transition: max-height .7s linear 0s;
    &.in {
      max-height: 500px;

      transition: max-height 1s linear 0s;
    }
    .alert {
      margin: 0;
      text-align: left;
      border-radius: 0;
    }
  }
}


// Color Modifier
// ========================================================================

// Modifier: `alert-success`
// -------------------------

.alert-primary {
  // alert-variant mixin Not applicable here
  @include alert-variant($alert-primary-bg, $alert-primary-border, $alert-primary-text);

  .alert-link {
    color: $alert-primary-link-color;
  }
}

.alert-alt.alert-primary {
  @include alert-alt-variant($alert-alt-primary-border, $alert-alt-primary-text);
}

// Modifier: `alert-success`
// -------------------------

.alert-success {
  .alert-link {
    color: $alert-success-link-color;
  }
}

.alert-alt.alert-success {
  @include alert-alt-variant($alert-alt-success-border, $alert-alt-success-text);
}


// Modifier: `alert-info`
// -------------------------

.alert-info {
  .alert-link {
    color: $alert-info-link-color;
  }
}

.alert-alt.alert-info {
  @include alert-alt-variant($alert-alt-info-border, $alert-alt-info-text);
}


// Modifier: `alert-warning`
// -------------------------

.alert-warning {
  .alert-link {
    color: $alert-warning-link-color;
  }
}

.alert-alt.alert-warning {
  @include alert-alt-variant($alert-alt-warning-border, $alert-alt-warning-text);
}


// Modifier: `alert-danger`
// -------------------------
.alert-danger {
  .alert-link {
    color: $alert-danger-link-color;
  }
}

.alert-alt.alert-danger {
  @include alert-alt-variant($alert-alt-danger-border, $alert-alt-danger-text);
}


// Social Modifier
// ========================================================================

.alert-social {
  position: relative;
  padding-left: $alert-social-padding-left;
  > .icon {
    position: absolute;
    top: ($alert-padding - 3px);
    left: $alert-padding-horizontal;
    bottom: 0;
    font-size: $alert-social-icon-size;

    @include icon-fixed-width();
  }
}

// Modifier: `alert-facebook`
// -------------------------

.alert-facebook {
  @include alert-variant($color-facebook, $color-facebook, $alert-social-text);
  .alert-link {
    color: $alert-social-text;
    font-weight: $font-weight-bold;
  }
}

// Modifier: `alert-twitter`
// -------------------------

.alert-twitter {
  @include alert-variant($color-twitter, $color-twitter, $alert-social-text);
  .alert-link {
    color: $alert-social-text;
    font-weight: $font-weight-bold;
  }
}

// Modifier: `alert-google-plus`
// -------------------------

.alert-google-plus {
  @include alert-variant($color-google-plus, $color-google-plus, $alert-social-text);
  .alert-link {
    color: $alert-social-text;
    font-weight: $font-weight-bold;
  }
}

// Modifier: `alert-linkedin`
// -------------------------

.alert-linkedin {
  @include alert-variant($color-linkedin, $color-linkedin, $alert-social-text);
  .alert-link {
    color: $alert-social-text;
    font-weight: $font-weight-bold;
  }
}

// Modifier: `alert-flickr`
// -------------------------

.alert-flickr {
  @include alert-variant($color-flickr, $color-flickr, $alert-social-text);
  .alert-link {
    color: $alert-social-text;
    font-weight: $font-weight-bold;
  }
}

// Modifier: `alert-tumblr`
// -------------------------

.alert-tumblr {
  @include alert-variant($color-tumblr, $color-tumblr, $alert-social-text);
  .alert-link {
    color: $alert-social-text;
    font-weight: $font-weight-bold;
  }
}

// Modifier: `alert-github`
// -------------------------

.alert-github {
  @include alert-variant($color-github, $color-github, $alert-social-text);
  .alert-link {
    color: $alert-social-text;
    font-weight: $font-weight-bold;
  }
}

// Modifier: `alert-dribbble`
// -------------------------

.alert-dribbble {
  @include alert-variant($color-dribbble, $color-dribbble, $alert-social-text);
  .alert-link {
    color: $alert-social-text;
    font-weight: $font-weight-bold;
  }
}

// Modifier: `alert-youtube`
// -------------------------

.alert-youtube {
  @include alert-variant($color-youtube, $color-youtube, $alert-social-text);
  .alert-link {
    color: $alert-social-text;
    font-weight: $font-weight-bold;
  }
}


// Style .Dark
//========================================================================

.alert.dark {

  .alert-link {
    color: $alert-dark-text !important;
    font-weight: $font-weight-bold;
  }

  // Alternate styles
  // -------------------------

  .alert-left-border {
    border: none;
    border-left: 3px solid transparent;
  }

  // Modifier: `alert-dismissible`
  // -------------------------

  &.alert-dismissible {
    &.alert-alt {
      .close {
        color: $alert-dark-text;
        &:hover,
        &:focus {
          color: $alert-dark-text;
        }
      }
    }
  }

  // Color Modifier
  // ========================================================================

  // Modifier: `alert-success`
  // -------------------------

  &.alert-primary {
    @include alert-variant($alert-dark-primary-bg, $alert-dark-primary-bg, $alert-dark-text);

    &.alert-alt {
      @include alert-alt-variant($alert-dark-alt-primary-border, $alert-dark-text);
    }
  }

  // Modifier: `alert-success`
  // -------------------------

  &.alert-success {
    @include alert-variant($alert-dark-success-bg, $alert-dark-success-bg, $alert-dark-text);

    &.alert-alt {
      @include alert-alt-variant($alert-dark-alt-success-border, $alert-dark-text);
    }
  }


  // Modifier: `alert-info`
  // -------------------------

  &.alert-info {
    @include alert-variant($alert-dark-info-bg, $alert-dark-info-bg, $alert-dark-text);

    &.alert-alt {
      @include alert-alt-variant($alert-dark-alt-info-border, $alert-dark-text);
    }
  }


  // Modifier: `alert-warning`
  // -------------------------

  &.alert-warning {
    @include alert-variant($alert-dark-warning-bg, $alert-dark-warning-bg, $alert-dark-text);

    &.alert-alt {
      @include alert-alt-variant($alert-dark-alt-warning-border, $alert-dark-text);
    }
  }


  // Modifier: `alert-danger`
  // -------------------------
  &.alert-danger {
    @include alert-variant($alert-dark-danger-bg, $alert-dark-danger-bg, $alert-dark-text);

    &.alert-alt {
      @include alert-alt-variant($alert-dark-alt-danger-border, $alert-dark-text);
    }
  }
}