/* .flashes { */
/*   position: absolute; */
/*   /1* bottom: 0; *1/ */
/*   /1* right: 0; *1/ */
/*   z-index: 1; */
/*   display: flex; */
/*   flex-direction: column; */
/*   row-gap: var(--size-2); */
/*   padding: var(--size-4); */
/*   width: var(--size-96); */
/* } */

/* .flash { */
/*   position: static; */
/*   /1* bottom: 0; *1/ */
/*   /1* right: 0; *1/ */
/* } */

/* .flash { */
/*   /1* animation: appear-then-fade 4s 300ms both; *1/ */
/*   backdrop-filter: var(--blur-sm) var(--contrast-75); */
/*   border: 1px solid var(--alert-border-color, var(--color-border)); */
/*   border-radius: var(--rounded-lg); */
/*   color: var(--alert-color, var(--color-text)); */
/*   font-size: var(--text-sm); */
/*   inline-size: var(--size-full); */
/*   padding: var(--size-3); */

/*   /1* box-shadow: var(--shadow-lg); *1/ */
/*   box-shadow: lch(0 0 0 / 0.022) 0px 6px 18px, lch(0 0 0 / 0.044) 0px 3px 9px, lch(0 0 0 / 0.044) 0px 1px 1px; */

/*   display: flex; */

/*   [data-turbo-preview] & { */
/*     display: none; */
/*   } */

/*   img { */
/*     filter: var(--alert-icon-color, var(--color-filter-text)); */
/*   } */
/* } */

.flashes {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  row-gap: var(--size-2);
  z-index: 1;
  padding: var(--flash-position, var(--size-4));
}

.flash {
  align-items: center;
  animation: appear-then-fade 4s 300ms both;
  backdrop-filter: var(--blur-sm) var(--contrast-75);
  background-color: var(--flash-background, rgb(from var(--color-text) r g b / .65));
  /* border-radius: var(--rounded-full); */
  color: var(--flash-color, var(--color-text-reversed));
  column-gap: var(--size-2);
  display: flex;
  font-size: var(--text-fluid-sm);
  inline-size: auto;
  justify-content: center;
  line-height: var(--leading-none);
  margin-inline: auto;
  min-block-size: var(--size-11);
  padding: var(--size-1) var(--size-4);
  text-align: center;
  box-shadow: lch(0 0 0 / 0.022) 0px 6px 18px, lch(0 0 0 / 0.044) 0px 3px 9px, lch(0 0 0 / 0.044) 0px 1px 1px;

  [data-turbo-preview] & {
    display: none;
  }
}

.flash--positive {
  --flash-background: var(--color-positive);
  --flash-color: white;
}

.flash--negative {
  --flash-background: var(--color-negative);
  --flash-color: white;
}

.flash2 {
  align-items: center;
  animation: appear-then-fade 4s 300ms both;
  backdrop-filter: var(--blur-sm) var(--contrast-75);
  background-color: var(--flash-background, rgb(from var(--color-text) r g b / .65));
  border-radius: var(--rounded-full);
  color: var(--flash-color, var(--color-text-reversed));
  column-gap: var(--size-2);
  display: flex;
  font-size: var(--text-fluid-base);
  justify-content: center;
  line-height: var(--leading-none);
  margin-block-start: var(--flash-position, var(--size-4));
  margin-inline: auto;
  min-block-size: var(--size-11);
  padding: var(--size-1) var(--size-4);
  text-align: center;

  [data-turbo-preview] & {
    display: none;
  }
}

.flash2--positive {
  --flash-background: var(--color-positive);
  --flash-color: white;
}

.flash2--negative {
  --flash-background: var(--color-negative);
  --flash-color: white;
}

.flash--extended {
  animation-name: appear-then-fade-extended;
  animation-duration: 12s;
}

@keyframes appear-then-fade {
  0%, 100% { opacity: 0; }
  5%, 60%  { opacity: 1; }
}

@keyframes appear-then-fade-extended {
  0%, 100% { opacity: 0; }
  2%, 90% { opacity: 1; }
}