@layer customer {
  .flash {
    background-color: var(--flash-background-color);
    border-radius: var(--radius-1);
    border: solid 1px var(--flash-color);
    color: var(--flash-color);
    margin-bottom: var(--size-2);
    padding: var(--size-2);

    & > * + * {
      margin-top: var(--size-2);
    }
  }

  .flash\:alert {
    --flash-color: var(--red-8);
    --flash-background-color: var(--red-0);
  }

  .flash\:success {
    --flash-color: var(--green-8);
    --flash-background-color: var(--green-0);
  }

  .flash\:info {
    --flash-color: var(--gray-8);
    --flash-background-color: var(--gray-0);
  }

  .flash\/title {
    font-size: var(--font-size-3);
  }

  .flash\/text {
    margin-bottom: var(--size-4);
  }

  .flash\/list {
    margin-left: var(--size-4);

    & li {
      list-style-type: circle;
    }
  }
}