.notification,
.notification:before,
.notification:after {
  box-sizing: inherit;
}

.notification {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: ${font_family};
  color: ${base_color};
  line-height: 1.428571428571429;
  font-size: ${font_size_base};
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  font-weight: normal;
  vertical-align: baseline;
  background-color: #f5f7fa;
  border-radius: 3px;
  padding: 16px 20px;
  position: relative;
}

.notification:after {
  clear: both;
  content: " ";
  display: table;
}

.notification .delete, .notification .modal-close {
  border-radius: 0 3px;
  float: right;
  margin: -16px -20px 0 20px;
}

.notification .subtitle,
.notification .title {
  color: inherit;
}

.notification.is-white {
  background-color: #fff;
  color: #111;
}

.notification.is-black {
  background-color: #111;
  color: #fff;
}

.notification.is-light {
  background-color: #f5f7fa;
  color: ${base_color};
}

.notification.is-dark {
  background-color: ${base_color};
  color: #f5f7fa;
}

.notification.is-primary {
  background-color: #1fc8db;
  color: white;
}

.notification.is-info {
  background-color: #42afe3;
  color: white;
}

.notification.is-success {
  background-color: #97cd76;
  color: white;
}

.notification.is-warning {
  background-color: #fce473;
  color: rgba(17, 17, 17, 0.5);
}

.notification.is-danger {
  background-color: #ed6c63;
  color: white;
}
