.messages {
  background-color: var(--m-color-jet);
  color: #fff;
  position: relative;
  padding-left: 3rem;
  padding-block: 1rem ;
}

.messages-list__wrapper {
  position: relative;
  padding-top: 140px;
  padding-bottom: 15px;
}

.messages::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  border-radius: unset;
}

.messages__title {
  color: inherit;
}

.messages a {
  color: #fff;
  text-decoration: none;
}

.messages__content{
  padding-block: 0;
}

.message__icon{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
  left: 1rem;
}

.message__icon.success svg{fill:  var(--m-color-success)}
.message__icon.warning svg{fill: var(--m-color-warning)}
.message__icon.danger svg{fill: var(--m-color-danger)}

.messages a:hover,
.messages a:focus {
  text-decoration: underline;
}

.messages--status:before{
  background-color: var(--m-color-success);
}

.messages--warning:before{
  background-color: var(--m-color-warning);
}

.messages--error:before{
  background-color: var(--m-color-danger);
}

.messages-list__item + .messages-list__item {
  margin-top: 1rem;
}