@layer components {
  .flash {
    position: relative;
    background: rgb(0 0 0 / 50%);
    backdrop-filter: blur(0.3em);
    color: white;
    padding-block: var(--length-4);
    padding-inline: var(--length-4);
    box-shadow: var(--shadow-3);
    cursor: pointer;
    font-size: var(--font-size-sm-x2);

    &.flash--success {
      background: oklch(from var(--color-green-7) l c h / 70%);
    }

    &.flash--error {
      background: oklch(from var(--color-red-7) l c h / 70%);
    }

    .flash__loading-bar--load {
      animation: flash__grow-x 10000ms ease-out forwards;
    }

    &:hover .flash__loading-bar--load {
      animation: none;
      width: 0%;
    }

    p {
      color: var(--color-neutral-1);
    }
  }

  .flash__loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: var(--length-1);
    background: rgb(255 255 255 / 60%);
    backdrop-filter: blur(0.3em);
    width: 100%;
    transform-origin: left center;
  }

  @keyframes flash__grow-x {
    0% {
      transform: scaleX(0);
    }

    100% {
      transform: scaleX(1);
    }
  }
}