/*
 *
 *  IN LOCO
 *  www.inlocomedia.com
 *
 *  Copyright 2016 - All Rights Reserved.
 *
 *  -------- SUPERNOVA ---------
 *     alerts component file
 *  ----------- *** ------------
 *
 */

@import "alerts_variables";


// Alerts


.sn-alert {
  top: $default-alert-position-top;
  opacity: 1;
  position: fixed;
  left: 0;
  right: 0;
  max-width: $default-alert-max-width;
  padding: $default-alert-padding;
  background-color: $default-alert-background-color-warning;
  margin: 0 auto;
  border: 0;
  @include shadow-16dp();
  z-index: $z-alerts;
  transition: all 0.5s;

  @media only screen
  and (min-width : 0)
  and (max-width : 1024px) {
    top: $default-alert-position-top;
    max-width: none;
    margin: 0 $default-alert-margin-mobile;
  }

  .sn-alert--hidden {
    display: none !important;
    visibility: hidden !important;
  }
  
  .sn-alert--icon {
    left: $default-alert-message-position;
    i {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto auto;
      width: 100%;
      text-align: center;
    }
  }

  .sn-alert--message {
    margin: 0 $default-alert-message-margin;
  }

  .sn-alert--close,
  .sn-alert--icon {
    position: absolute;
    display: inline-block;
    top: 0;
    bottom: 0;
    width: $default-alert-message-size;
    padding: 0;
    margin: auto auto;
    height: 100%;
    color: $default-alert-color;
    background-color: transparent;
    border: 0;
    outline: 0;
    i {
      font-size: $default-alert-close-font-size;
    }
  }

  .sn-alert--close {
    right: $default-alert-message-position;
    &:hover {
      cursor: pointer;
    }
  }

  &.sn-alert--success     {
    background-color: $default-alert-background-color-success;
    color:$default-alert-color;
  }

  &.sn-alert--info     {
    background-color: $default-alert-background-color-info;
    color:$default-alert-color;
  }

  &.sn-alert--warning     {
    background-color: $default-alert-background-color-warning;
    color:$default-alert-color;
  }

  &.sn-alert--danger     {
    background-color: $default-alert-background-color-danger;
    color:$default-alert-color;
  }
}