/*------------------------------------*\
  $MESSAGES
\*------------------------------------*/

$error-color:   #ffe5e5;
$warning-color: #fdfdcc;
$success-color: #b7d985;
$default-color: #e1e1e1;

.message-box {
  margin-bottom: 10px;
  padding: 15px;

  p {
    margin-bottom: 10px;
  }

  ul {
    margin-bottom: 0;
  }

  li {
    font-size: font-size(14);
  }

  &--error {
    color: darken($error-color, 35%);
    background-color: $error-color;
  }

  &--warning {
    color: mix($warning-color, #000, 50%);
    background-color: $warning-color;
  }

  &--success {
    color: mix($success-color, #000, 50%);
    background-color: $success-color;
  }
}

.message-text {
  margin-top: 5px;

  &--error {
    color: darken($error-color, 30%);
  }

  &--warning {
    color: darken($warning-color, 60%);
  }

  &--success {
    color: darken($success-color, 40%);
  }
}

@keyframes slide-up {
  0% {
    height: 0;
  }

  100% {
    height: 100px;
  }
}

.notice {
  padding: 20px 0;
  background: {
    color: $default-color;
  }

  p {
    margin: 0;
    font-size: font-size(14);
  }
}