Undo weird flash notices

app/assets/stylesheets/flash.css

@@ -1,23 +1,19 @@
 .flash {
   display: flex;
-  inset-block-start: var(--block-space);
-  inset-inline-start: 50%;
+  inline-size: 100%;
+  inset: var(--block-space) auto auto auto;
   justify-content: center;
   position: fixed;
-  transform: translate(-50%);
   z-index: 6;
 }
 
 .flash__inner {
   animation: appear-then-fade 3s 300ms both;
-  aspect-ratio: 1;
-  background-color: var(--flash-background, var(--color-positive));
-  border-radius: 50%;
-  display: grid;
-  padding: var(--block-space);
-  place-items: center;
-
-  img {
-    grid-area: 1/1;
-  }
+  background-color: var(--flash-background, var(--color-ink));
+  border-radius: 4em;
+  color: var(--flash-color, var(--color-ink-reversed));
+  display: inline-flex;
+  font-size: var(--font-size-medium);
+  margin: 0 auto;
+  padding: 0.7em 1.4em;
 }

app/views/layouts/application.html.erb

@@ -27,14 +27,9 @@
 
     <% if notice = flash[:notice] || flash[:alert] %>
       <div class="flash" data-controller="element-removal" data-action="animationend->element-removal#remove">
-        <div class="flash__inner shadow" style="<%= "--flash-background: var(--color-negative)" if flash[:alert] %>">
-          <% if flash[:alert] %>
-            <%= image_tag "alert.svg", aria: { hidden: true }, size: 24, class: "colorize--white" %></span>
-          <% else %>
-            <%= image_tag "check.svg", aria: { hidden: true }, size: 24, class: "colorize--white" %></span>
-          <% end %>
+        <div class="flash__inner shadow">
+          <%= notice %>
         </div>
-        <span class="for-screen-reader" role="alert" aria-atomic="true"><%= notice %></span>
       </div>
     <% end %>