.messages--status {
  padding: 1ex 3ex 1.5ex 3ex;
  display: block;
}

.messages--status::before {
  display: inline-block;
  block-size: 100%;
  inline-size: 100%;
  content: "";
  width: 36px;
  height:36px;
  margin-right: 1em;
  background-repeat: no-repeat;
}

@media (prefers-color-scheme: light) {
  .messages--status::before {
    background: url("data:image/svg+xml,%3csvg fill='%2373b355' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m6.464 13.676c-.194.194-.513.194-.707 0l-4.96-4.955c-.194-.193-.194-.513 0-.707l1.405-1.407c.194-.195.512-.195.707 0l2.849 2.848c.194.193.513.193.707 0l6.629-6.626c.195-.194.514-.194.707 0l1.404 1.404c.193.194.193.513 0 .707z'/%3e%3c/svg%3e");
    background-size: 2rem;
    background-position-y: 4px;
  }

  .messages--status {
    background-color: #111;
    color: white;
  }
}

@media (prefers-color-scheme: dark) {
  .messages--status::before {
    background: url("data:image/svg+xml,%3csvg fill='%2373b355' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m6.464 13.676c-.194.194-.513.194-.707 0l-4.96-4.955c-.194-.193-.194-.513 0-.707l1.405-1.407c.194-.195.512-.195.707 0l2.849 2.848c.194.193.513.193.707 0l6.629-6.626c.195-.194.514-.194.707 0l1.404 1.404c.193.194.193.513 0 .707z'/%3e%3c/svg%3e");
    background-size: 2rem;
    background-position-y: 4px;
  }

  .messages--status {
    background-color: #666;
    color: black;
  }
}