// 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-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-text: $color-white !default;

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

.alert-alt {
  color: $alert-alt-color;
  background-color: $alert-alt-bg;
  border: none;
  border-left: 3px solid transparent;
}



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

.alert-dismissible {
  .close {
    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;
      }
    }
  }
}

// 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);
}



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

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

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

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

// 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;
  }
}

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

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

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

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

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

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

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

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

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

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

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

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


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

.alert.dark {

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

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

  .alert-left-border {
    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);
    }
  }
}