$growl-border: rgba($white, 0.4) !default;

$growl-success: $white !default;
$growl-success-bg: darken($primary_color, 15%) !default;

$growl-error: $white !default;
$growl-error-bg: $warning_color !default;

// --------------------------------------------------------------
div.growl-wrapper {
  position: fixed;
  top: 30px;
  right: 23px;
  z-index: 9999;

  .msg-box {
    border: 1px solid $growl-border;
    &.success { background: $growl-success-bg; color: $growl-success; }
    &.error   { background: $growl-error-bg; color: $growl-error; }

    border-radius: 4px;
    margin-bottom: 7px;
    width: 400px;
    min-height: 53px;
    padding: 10px 15px;
    cursor: pointer;
    box-shadow: 3px 3px 12px 3px rgba(0, 0, 0, 0.2);

    // Popping up animation
    transition-property: opacity, transform;
    animation: growl_fadein 150ms;
    @keyframes growl_fadein {
      from { opacity: 0; transform: scale(0.5, 0.3); }
      to   { opacity: 1; transform: scale(1,1); }
    }

    // Vanishing animation
    transition-timing-function: ease-out;
    transform-origin: top;
    transition-duration: 600ms;
    &.fading {
      transition-timing-function: cubic-bezier(0.5, 0, 1, 1);;
      opacity: 0; transform: scale(0.6, 0.35);
    }

    .default {
      display : flex;
      .default-icon {
        //align-self: center;
        align-self: flex-start;
        padding: 0 7.5px;
        font-size: 22px;
      }
      .default-text {
        line-height: 30px;
        max-width: 350px;
        padding-left: 10px;
      }
    }
  }
}