.flash-messages
  position: fixed
  top: 5%
  left: 50%
  transform: translateX(-50%)

.ae-flash
  display: flex
  flex-flow: row nowrap
  margin-bottom: 10px
  padding: 5px
  align-items: center
  border: 1px solid rgba(0, 0, 0, 0.87)
  border-radius: 2px

.ae-flash-message,
.ae-flash-close
  margin: 10px
  color: inherit

.ae-flash-message
  flex-grow: 2

.ae-flash-close
  flex-grow: 1
  font-size: 1.5rem
  font-weight: 700
  margin-bottom: 13px
  max-width: 50px
  text-align: center
  color: inherit
  cursor: pointer
  &:hover
    color: inherit

.ae-flash-success,
.ae-flash-error,
.ae-flash-success,
.ae-flash-notice,
.ae-flash-alert
  border: none
  color: #fff

.ae-flash-success,
.ae-flash-notice
  background-color: $success-color

.ae-flash-error
  background-color: $error-color

.ae-flash-alert
  background-color: $alert-color