@layer components {
  .flash {
    animation: appear-then-fade 4s 300ms both;
    background-color: var(--flash-background, var(--color-text));
    border-radius: var(--rounded-full);
    color: var(--flash-color, var(--color-text-reversed));
    margin-block-start: var(--flash-position, var(--size-5));
    margin-inline: auto;

    &:is(:hover, :focus-within) {
      animation-play-state: paused;
    }
  }

  .flash__content {
    align-items: center;
    column-gap: var(--size-2);
    display: flex;
    font-size: var(--text-fluid-base);
    justify-content: center;
    line-height: var(--leading-none);
    min-block-size: var(--size-11);
    padding: var(--size-1) var(--size-4);
    text-align: center;
  }

  .flash--positive {
    --flash-color: light-dark(var(--green-400), var(--green-600));
  }

  .flash--negative {
    --flash-color: light-dark(var(--red-400), var(--red-600));
  }

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

  @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;
    }
  }
}