/*!************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./source/scss/messages.scss ***!
  \************************************************************************************************************************************************/
:root {
  --messages--status-color: lightgreen;
  --messages--warning-color: lightpink;
  --messages--error-color: lightyellow;
  --messages--notice-color: lightblue;
  --messages--alert-color: lightcoral;
}

.message {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1rem;
  transition: background-color 0.5s ease;
  color: black;
}
.message.warning {
  background-color: var(--messages--error-color);
}
.message.status {
  background-color: var(--messages--status-color);
}
.message.notice {
  background-color: var(--messages--notice-color);
}
.message.error {
  background-color: var(--messages--error-color);
}
.message.alert {
  background-color: var(--messages--alert-color);
}
.message .close {
  cursor: pointer;
  width: 1rem;
  height: 1rem;
  background-color: transparent;
  border: none;
}
.message.hidden {
  display: none;
}

/*# sourceMappingURL=messages.css.map*/